/* Main tabs styling (Stats/Farming/Staking) */
#hpMainTabs .nav-link {
  color: var(--bs-secondary-color);
}
#hpMainTabs .nav-link:hover {
  color: var(--bs-body-color);
}
#hpMainTabs .nav-link.active {
  color: #f97316; /* orange accent to match bottom nav */
}

/* Make the Farming tab visually continue the farmyard panel instead of showing a white cap */
#hpTabFarmingTab.active,
#hpTabFarmingTab.show {
  color: var(--hp-slate-900);
  background: linear-gradient(180deg, #9FD8FF 0%, #C6EEFF 26%);
  border-color: transparent;
  box-shadow: none;
  border-radius: .6rem .6rem 0 0;
  position: relative;
}

/* Make the Staking tab visually continue the staking panel (crypto theme) */
#hpTabStakingTab.active,
#hpTabStakingTab.show {
  color: #fff;
  background: linear-gradient(180deg, #071527 0%, #052034 48%, #071729 100%);
  border-color: transparent;
  box-shadow: none;
  border-radius: .6rem .6rem 0 0;
  position: relative;

}

/* Disabled state for claim button using aria-disabled */
.hp-hm-claim-btn[aria-disabled="true"],
.hp-btn-disabled {
  background: linear-gradient(135deg, #ffb347 0%, #ff5a1f 100%);
  opacity: 0.55;
  pointer-events: auto;
  cursor: not-allowed;
  filter: grayscale(0.5) brightness(0.7);
}


/* Card pulse animation for new farms */
.hp-card-pulse {
  animation: hp-pulse 0.35s cubic-bezier(.4, 0, .6, 1) infinite alternate;
  will-change: filter, transform;
}

.hp-completed-icon {
  animation: hp-pulse 0.7s cubic-bezier(.4, 0, .6, 1) infinite alternate;
  will-change: filter, transform;
}

@keyframes hp-pulse {
  0% {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
    transform: scale(1);
  }

  100% {
    filter: drop-shadow(0 0 16px rgba(255, 255, 255, 1));
    transform: scale(1.11);
  }
}

/* Reinforce specificity so Bootstrap utility classes cannot override */

.hp-rank-icon.hp-rank-icon-sm {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 0, 0, .06);
  overflow: hidden;
}

html[data-theme='dark'] .hp-rank-icon.hp-rank-icon-sm {
  background: rgba(255, 255, 255, .08);
}

.hp-rank-icon.hp-rank-icon-sm img {
  width: 35px;
  height: 35px;
  object-fit: contain;
  display: block;
}

/* Single-line member table rows */
.hp-members-table th,
.hp-members-table td {
  white-space: nowrap;
}

.hp-members-table td .fw-semibold.text-truncate {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.hp-members-table td {
  vertical-align: middle;
}

/* Compact single-line rows for admin tables to avoid bulky multi-line rows.
   Applies to tables wrapped with .hp-table-scroll (auto-wrap) and the known admin table IDs.
*/
.hp-table-scroll table th,
.hp-table-scroll table td,
#tblConversions th, #tblConversions td,
#tblDeposits th, #tblDeposits td,
#tblWithdrawals th, #tblWithdrawals td,
#tblCryptoLogs th, #tblCryptoLogs td,
#tblFarms th, #tblFarms td,
#tblStakes th, #tblStakes td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Ensure inline elements inside cells don't force wrapping */
.hp-table-scroll table td > *,
#tblConversions td > *, #tblDeposits td > *, #tblWithdrawals td > *, #tblCryptoLogs td > *, #tblFarms td > *, #tblStakes td > * {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}


/* moved to centralized mobile block (see bottom) */

:root {
  --hp-primary-600: #FF5A1F;
  --hp-primary-700: #E24D15;
  --hp-accent-500: #F59E0B;
  --hp-slate-900: #0B1220;
  --hp-slate-700: #1F2937;
  --hp-slate-100: #F3F4F6;
  --hp-bg: #ffffff;
  --hp-text: #0B1220;
}

/* Reusable accent outline button (orange) */
.hp-btn-accent-outline {
  --hp-accent-color: #ff5a1f;
  color: var(--hp-accent-color);
  border: 1px solid var(--hp-accent-color);
  background: transparent;
  font-weight: 600;
  letter-spacing: .2px;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hp-btn-accent-outline:hover,
.hp-btn-accent-outline:focus {
  background: var(--hp-accent-color);
  color: #fff;
  box-shadow: 0 4px 14px -2px rgba(255, 90, 31, .45), 0 2px 6px -1px rgba(255, 90, 31, .35);
}

.hp-btn-accent-outline:active {
  background: #e24d15;
  border-color: #e24d15;
  color: #fff;
}

html[data-theme='dark'] .hp-btn-accent-outline {
  background: rgba(255, 90, 31, .06);
  border-color: rgba(255, 90, 31, .85);
  color: #ff7a44;
}

html[data-theme='dark'] .hp-btn-accent-outline:hover,
html[data-theme='dark'] .hp-btn-accent-outline:focus {
  background: #ff5a1f;
  color: #fff;
}

/* QR scanner overlay styling (reuse overlay/modal look) */
#hpQrScannerOverlay .hp-farms-modal { padding: 6px 8px; }
#hpQrScannerOverlay #hpQrScanner { width: 320px; height: 240px; background: #000; border-radius:8px; overflow:hidden; }
#hpQrScannerOverlay .hp-hm-close { position:absolute; right:8px; top:6px; font-size:1.2rem; }

/* Floating scan icon inside inputs */
.hp-input-group.position-relative { position: relative; }
.hp-scan-float {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  display: inline-flex;
  background: none;
  align-items: center;
  justify-content: center;
  color: var(--hp-primary-600);
  border: none;
  cursor: pointer;
  z-index: 5;
}
.hp-scan-float i { font-size: 1.55rem; }
.hp-scan-float:focus { outline: none; box-shadow: 0 6px 18px rgba(255,90,31,0.28); }

/* ensure the input has padding on the right so text doesn't underlap the icon */
.hp-with-scan { padding-right: 56px; }

html[data-theme='dark'] .hp-btn-accent-outline:active {
  background: #e24d15;
  border-color: #e24d15;
}

/* Mobile-only profile logout button visibility safeguard */
#hpProfileLogoutMobile { font-size: 1rem; }
/* moved to centralized tablet block (see centralized tablet section) */


html[data-theme="dark"] {
  --hp-bg: #0B1220;
  --hp-text: #F3F4F6;
  --bs-body-bg: var(--hp-bg);
  --bs-body-color: var(--hp-text);
  --bs-border-color: rgba(255, 255, 255, .12);
  --bs-secondary-color: #cbd5e1;
  --bs-tertiary-color: #94a3b8;
  --bs-secondary-bg: #0f172a;
}

* {
  box-sizing: border-box
}

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--hp-bg);
  color: var(--hp-text);
  margin: 0;
  /* Use flexible viewport height to avoid white gap on mobile when address bar collapses/expands */
  min-height: 100vh; /* fallback for older browsers */
  height: auto; /* do not lock to a fixed vh */
  /* remove default browser 8px margin causing gap under fixed bottom nav */
}

/* Prevent accidental horizontal scroll that can reveal white strips on mobile due to transforms */
html, body { overflow-x: hidden; }

/* Prefer dynamic viewport units where supported to correctly size pages under mobile UI chrome */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
}

/* On small screens, override Bootstrap's min-vh-100 to use small viewport height to avoid extra scroll */
@media (max-width: 768px) {
  .min-vh-100 { min-height: 100svh !important; }
}

/* Tooltip theming (improve dark-mode contrast for referral info) */
.tooltip.show {
  opacity: 1;
}

.tooltip-inner {
  font-size: .7rem;
  font-weight: 500;
  padding: .45rem .6rem;
  letter-spacing: .2px;
  background: rgba(17, 24, 39, .92);
  /* near-slate backdrop for readability */
  color: #f8fafc;
  border-radius: 6px;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, .4), 0 2px 6px -1px rgba(0, 0, 0, .25);
  backdrop-filter: blur(4px);
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  border-top-color: rgba(17, 24, 39, .92);
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  border-bottom-color: rgba(17, 24, 39, .92);
}

.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  border-left-color: rgba(17, 24, 39, .92);
}

.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  border-right-color: rgba(17, 24, 39, .92);
}

html[data-theme="dark"] .tooltip-inner {
  background: linear-gradient(135deg, rgba(255, 90, 31, .15), rgba(255, 90, 31, .05)), #1e293b;
  color: #f1f5f9;
  box-shadow: 0 6px 22px -4px rgba(0, 0, 0, .6), 0 2px 8px -2px rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #1e293b;
}

html[data-theme="dark"] .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #1e293b;
}

html[data-theme="dark"] .tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #1e293b;
}

html[data-theme="dark"] .tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #1e293b;
}

/* Simple upward fade animation for SPA tab transitions */
.hp-view-transition-enter {
  opacity: 0;
  transform: translateY(22px);
  will-change: opacity, transform;
}

.hp-view-transition-active {
  transition: opacity .5s cubic-bezier(.25, .6, .25, 1), transform .65s cubic-bezier(.22, .75, .25, 1);
  opacity: 1;
  transform: translateY(0);
}

/* Prevent horizontal scroll and ensure content fits screen */
html,
body {
  overflow-x: hidden;
}

/* ==========================================================
   Centralized styles migrated from former inline <style> tags
   (dashboard.php, network.php, profile.php, register.php)
   Keep selectors scoped to hp-* namespace to avoid conflicts.
   ========================================================== */

/* --- Dashboard (card actions + copy field) --- */
.hp-card-action {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  background: transparent;
  color: rgba(255, 255, 255, .95);
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Sleek KPI cards: light surfaces with playful gradient accents */
.hp-kpi {
  --kpi-accent-1: #22c55e; /* default green */
  --kpi-accent-2: #16a34a;
  position: relative;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 16px;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .18);
  overflow: hidden;
}

.hp-kpi::before {
  /* left accent stripe */
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--kpi-accent-1), var(--kpi-accent-2));
}

.hp-kpi::after {
  /* soft gradient blob for a tiny bit of playfulness */
  content: '';
  position: absolute;
  top: -35%;
  right: -20%;
  width: 280px;
  height: 280px;
  background: radial-gradient(120px 120px at 60% 40%, color-mix(in lab, var(--kpi-accent-1) 22%, transparent), transparent 70%);
  filter: saturate(95%);
  pointer-events: none;
}

.hp-kpi .small { color: var(--bs-tertiary-color); }
.hp-kpi .display-6 { font-size: clamp(1.4rem, 2.2vw + 0.6rem, 2rem); line-height: 1.1; }

.hp-kpi:hover {
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .25);
  transform: translateY(-1px);
}

/* Make action icons readable on light cards */
.hp-kpi .hp-card-action,
.hp-kpi .hp-card-action-button {
  color: var(--bs-secondary-color);
}
/* Stronger specificity to override .hp-card-action .hp-card-action-button { color: #fff } */
.hp-kpi .hp-card-action .hp-card-action-button { color: var(--bs-secondary-color); }
.hp-kpi .hp-card-action .hp-card-action-button:hover { color: var(--bs-body-color); }
.hp-kpi .hp-card-action i { color: currentColor; }

/* Dark theme tuning */
html[data-theme='dark'] .hp-kpi {
  background: var(--hp-slate-700);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55);
}
html[data-theme='dark'] .hp-kpi::after {
  background: radial-gradient(120px 120px at 60% 40%, color-mix(in lab, var(--kpi-accent-1) 18%, transparent), transparent 70%);
}

/* KPI variants */
.hp-kpi--coins { --kpi-accent-1: #ffb347; --kpi-accent-2: #ff5a1f; }
.hp-kpi--earnings { --kpi-accent-1: #34d399; --kpi-accent-2: #10b981; }
.hp-kpi--withdrawals { --kpi-accent-1: #fb7185; --kpi-accent-2: #f97316; }
.hp-kpi--bonus { --kpi-accent-1: #a78bfa; --kpi-accent-2: #6366f1; }
.hp-kpi--total { --kpi-accent-1: #fbbf24; --kpi-accent-2: #f59e0b; }

/* Total Earned CTA buttons */
.hp-total-cta .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 16px;
  padding: 0.9rem 1.1rem;
  min-height: 48px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  will-change: transform, box-shadow, filter;
}
.btn-hp-deposit {
  color: #fff;
  background: linear-gradient(135deg, #ff914d 0%, #ff5a1f 50%, #ff7a33 100%);
   border: 1px solid rgba(255, 90, 31, 0.55);
  box-shadow: 0 8px 18px rgba(255, 90, 31, 0.28), 0 2px 6px rgba(0,0,0,0.08);
}

/* Loading overlay used by admin dashboard tables and KPI area */
.hp-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.6);
  z-index: 99999; /* high to ensure visibility above card contents */
  border-radius: inherit;
  pointer-events: all;
}
.hp-loading-overlay.dark {
  background: rgba(3,7,18,0.6);
}
.hp-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 4px solid rgba(0,0,0,0.08);
  border-top-color: var(--hp-primary-600);
  animation: hp-spin 0.9s linear infinite;
}

/* small spinner used inside KPI cards */
.hp-kpi-mini-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,0.08);
  border-top-color: var(--hp-primary-600);
  animation: hp-spin 0.8s linear infinite;
  margin-left: 10px;
  vertical-align: middle;
}
@keyframes hp-spin { to { transform: rotate(360deg); } }

/* small flash to highlight an updated KPI */
.hp-kpi-update-flash {
  animation: hp-kpi-flash 1s ease-in-out 1;
}
@keyframes hp-kpi-flash {
  0% { box-shadow: 0 0 0px rgba(255,210,100,0.0); }
  20% { box-shadow: 0 8px 28px -6px rgba(255,210,100,0.35); }
  100% { box-shadow: none; }
}

/* Simple loading pulse: subtle opacity/scale animation for cards/tables while loading */
.hp-loading-pulse {
  -webkit-animation: hp-loading-pulse 1s ease-in-out infinite;
  -moz-animation: hp-loading-pulse 1s ease-in-out infinite;
  animation: hp-loading-pulse 1s ease-in-out infinite;
  will-change: opacity, transform;
  /* subtle background fallback in case animations are disabled */
  background-color: rgba(255,255,255,0.02);
}
@keyframes hp-loading-pulse {
  0% { opacity: 0.98; transform: translateY(0); box-shadow: none; background-color: rgba(255,255,255,0.00); }
  40% { opacity: 0.7; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.06); background-color: rgba(255,255,255,0.03); }
  100% { opacity: 0.98; transform: translateY(0); box-shadow: none; background-color: rgba(255,255,255,0.00); }
}
@-webkit-keyframes hp-loading-pulse {
  0% { opacity: 0.98; -webkit-transform: translateY(0); -webkit-box-shadow: none; background-color: rgba(255,255,255,0.00); }
  40% { opacity: 0.7; -webkit-transform: translateY(-2px); -webkit-box-shadow: 0 10px 30px rgba(0,0,0,0.06); background-color: rgba(255,255,255,0.03); }
  100% { opacity: 0.98; -webkit-transform: translateY(0); -webkit-box-shadow: none; background-color: rgba(255,255,255,0.00); }
}
 
/*
.btn-hp-deposit::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    url('../img/hclogo.svg') center / 24px 24px no-repeat;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.6), inset 0 -1px 2px rgba(0,0,0,.15);
}*/
.btn-hp-deposit:hover {
  filter: brightness(1.02) saturate(1.02);
  box-shadow: 0 10px 22px rgba(255, 90, 31, 0.34), 0 4px 10px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
.btn-hp-deposit:active { transform: translateY(0); filter: brightness(.98); }
.btn-hp-deposit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 126, 51, .35), 0 8px 18px rgba(255, 90, 31, 0.28); }

.btn-hp-withdraw {
  color: #1b2a4a;
  background: linear-gradient(135deg, #eef4ff 0%, #e4ecff 100%);
  border: 1px solid #d6e2ff;
  box-shadow: 0 6px 14px rgba(30, 64, 175, 0.12), 0 1px 4px rgba(0,0,0,0.06);
}

.btn-hp-withdraw:hover {
  filter: brightness(1.01);
  background: linear-gradient(135deg, #e9f1ff 0%, #dfe7ff 100%);
  box-shadow: 0 8px 18px rgba(30, 64, 175, 0.16), 0 3px 8px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.btn-hp-withdraw:active { transform: translateY(0); filter: brightness(.99); }
.btn-hp-withdraw:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99, 102, 241, .25), 0 6px 14px rgba(30, 64, 175, 0.12); }

/* Dark theme variants */
html[data-theme='dark'] .btn-hp-deposit {
  background: linear-gradient(135deg, #ff7e33 0%, #ff5a1f 60%, #ff7a33 100%);
  border-color: rgba(255, 150, 100, 0.55);
  box-shadow: 0 8px 20px rgba(255, 90, 31, 0.25), 0 2px 6px rgba(0,0,0,0.25);
}
html[data-theme='dark'] .btn-hp-withdraw {
  color: #e8eefc;
  background: linear-gradient(135deg, #1e2a40 0%, #23314b 100%);
  border: 1px solid rgba(147, 197, 253, .28);
  box-shadow: 0 8px 18px rgba(30, 64, 175, 0.18), 0 2px 6px rgba(0,0,0,0.35);
}

/* Floating earnings history drawer (webview mode) */
.hp-earnings-float-wrapper {
  position: relative;
}

.hp-earnings-float {
  position: absolute;
  top: 100%;
  left: 0;
  /* will be recalculated in JS to align with card */
  z-index: 400;
  width: auto;
  /* JS sets exact pixel width */
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, .18), 0 4px 12px -2px rgba(0, 0, 0, .12);
  margin-top: .35rem;
  /* subtle gap under card */
  padding: .5rem .5rem .25rem;
  max-height: 320px;
  overflow: auto;
  display: none;
}

/* KPI grid spacing and sizing */
.hp-kpi { padding: 1rem; min-height: 60px; }

.hp-earning-row {
  min-height: 60px;
}

.hp-earning-row-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

html[data-theme="dark"] .hp-earnings-float {
  background: var(--hp-slate-700);
  border-color: rgba(255, 255, 255, .15);
}

.hp-earnings-float.show {
  display: block;
  animation: hpFadeSlide .28s cubic-bezier(.3, .7, .2, 1);
}

@keyframes hpFadeSlide {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Default card action styling (used by gradient rank cards). KPI cards override below. */
.hp-card-action .hp-card-action-button {
  background: transparent;
  color: rgba(255, 255, 255, .95);
  border: none;
  box-shadow: none;
  padding: 0;
}

.hp-card-action i {
  font-size: 1.5rem;
  line-height: 1;
}

.hp-card-action:hover {
  opacity: .9;
}

.hp-copy-wrap {
  position: relative;
}

.hp-copy-wrap .form-control {
  padding-right: 3rem;
}

.hp-copy-btn {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #ff5a1f;
}

.hp-copied {
  outline: 2px solid #ff7e33;
  outline-offset: 2px;
  transition: outline-color .2s ease;
}

/* --- Network Page --- */
.hp-members-grid {
  display: grid;
  /* Desktop default (>=1025px) */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.hp-member-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* moved to centralized mobile block */

.hp-member-card:not(.hp-colored) {
  background: var(--bs-body-bg);
}

.hp-member-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 90, 31, .35), rgba(13, 110, 253, .25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hp-member-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
  border-color: transparent;
}

.hp-member-card:active {
  transform: translateY(-1px) scale(.997);
}

.hp-rank-icon {
  width: 55px;
  height: 55px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);
  transition: transform .25s ease;
  overflow: hidden;
}

/* Ensure rank icon images fit without cropping/stretching */
.hp-rank-icon img {
  width: 90%;
  height: 90%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.hp-rank-filter .hp-input,
.hp-sort-filter .hp-input {
  font-size: .85rem;
  padding: .375rem .55rem .35rem 2rem;
}

/* moved to centralized mobile block */

/* Consistent badge centering */
.badge,
.hp-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  /* remove extra inline height variance */
  border-radius: 7px;
}

/* Specific sizing for hp-rank-badge text & icon alignment */
.hp-rank-badge {
  padding: 4px 10px;
  gap: .4rem;
  font-weight: 600;
  font-size: .75rem;
  min-height: 1.4rem;
}

.hp-rank-badge i,
.hp-rank-badge img,
.hp-rank-badge svg {
  line-height: 1;
  display: inline-block;
  height: 1em;
  width: 1em;
}

/* Fix multi-line edge case: force single line inside badges */
.badge *,
.hp-rank-badge * {
  white-space: nowrap;
}

.hp-member-card:hover .hp-rank-icon {
  transform: rotate(-6deg) scale(1.05);
}

.hp-username {
  color: var(--bs-secondary-color);
  font-weight: 600;
}

/* (Old duplicate .hp-rank-badge block removed; unified above) */

.hp-meta {
  color: var(--bs-tertiary-color);
  font-size: .85rem;
}

.hp-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple .6s linear;
  background: rgba(13, 110, 253, .35);
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.hp-view-toggle .btn {
  min-width: 60px;
}

.hp-view-toggle .btn.active {
  pointer-events: none;
}

/* Page size dropdown (grid pagination) */
.hp-page-size-dd>button.btn {
  font-weight: 500;
  line-height: 1.2;
  font-size: .875rem;
  /* similar to toggle buttons */
  border-color: var(--hp-accent-500);
  color: var(--hp-accent-500);
  background: transparent;
  min-width: 70px;
}

.hp-page-size-dd>button.btn.show,
.hp-page-size-dd>button.btn:focus,
.hp-page-size-dd>button.btn:hover {
  background: rgba(245, 158, 11, .12);
  color: var(--hp-accent-500);
}

.hp-page-size-dd .dropdown-menu {
  margin-top: .25rem !important;
  /* force below */
  border: 1px solid rgba(0, 0, 0, .08);
  font-size: .8rem;
}

.hp-page-size-dd .dropdown-item {
  border-radius: .35rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.hp-page-size-dd .dropdown-item.active,
.hp-page-size-dd .dropdown-item:active {
  background: var(--hp-accent-500);
  color: #fff;
}

.hp-page-size-dd .dropdown-item:hover:not(.active) {
  background: rgba(245, 158, 11, .15);
  color: var(--hp-accent-500);
}

.hp-page-size-label {
  font-size: 1rem;
}

/* Pager buttons below grid */
#hpGridPager .btn {
  font-size: .75rem;
  font-weight: 500;
}

#hpGridPager .btn:hover:not(:disabled) {
  background: rgba(245, 158, 11, .15);
  color: var(--hp-accent-500);
}

#hpGridPager .btn:disabled {
  opacity: .4;
}

/* Unified network control pill styling (overrides earlier where needed) */
.hp-view-toggle .btn,
#hpPageSizeBtn {
  border-radius: 999px;
  border: 1px solid #ffd199;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.hp-view-toggle .btn.active,
.hp-view-toggle .btn:hover,
#hpPageSizeBtn.show,
#hpPageSizeBtn:hover,
#hpGridPager .btn:hover:not(:disabled),
.hp-table-wrap .btn-group .btn:hover:not(:disabled) {
  background: #ff5a1f;
  color: #fff;
  border-color: #ff9a30;
}

html[data-theme='dark'] .hp-view-toggle .btn,
html[data-theme='dark'] #hpPageSizeBtn,
html[data-theme='dark'] #hpGridPager .btn,
html[data-theme='dark'] .hp-table-wrap .btn-group .btn {
  border-color: #ffb347;
}

html[data-theme='dark'] .hp-view-toggle .btn.active,
html[data-theme='dark'] .hp-view-toggle .btn:hover,
html[data-theme='dark'] #hpPageSizeBtn.show,
html[data-theme='dark'] #hpPageSizeBtn:hover,
html[data-theme='dark'] #hpGridPager .btn:hover:not(:disabled),
html[data-theme='dark'] .hp-table-wrap .btn-group .btn:hover:not(:disabled) {
  background: #ff5a1f;
  color: #fff;
  border-color: #ff9a30;
}

/* Referral summary boxes */
.hp-ref-box {
  position: relative;
  border: 1px solid #ffd199;
  border-radius: 40%;
  padding: .5rem 0.5rem .5rem 0.5rem;
  background: var(--bs-body-bg);
  /*box-shadow: 0 2px 6px rgba(0, 0, 0, .04);*/
  min-height: 100%;
  cursor: pointer;
  transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

html[data-theme='dark'] .hp-ref-box {
  border-color: #ffb347;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

/* Toggle active state */
.hp-ref-box.hp-on {
  background: #ff5a1f;
  color: #fff;
  border-color: #ff9a30;
  /*box-shadow: 0 4px 14px rgba(0, 0, 0, .18);*/
}

html[data-theme='dark'] .hp-ref-box.hp-on {
 background: #ff5a1f;
  border-color: #ffb347;
  color: #fff;
}

.hp-ref-box.hp-on .hp-ref-value {
  color: #fff;
}

/*
html[data-theme='dark'] .hp-ref-box.hp-on .hp-ref-icon {
  background: var(--hp-bg);
  color: #fff;
}*/

.hp-ref-icon {
  margin: 0px auto;
  border-radius: 5px;
  color: #ff5a1f;
  font-size: 1.2rem;
  z-index: 10;
  text-align: center;
  transition: .2s;
}

.hp-ref-box.hp-on .hp-ref-icon {
  color: white;
}
.hp-ref-box.hp-off {
  background: transparent;
}

/* Animated collapsing of direct / indirect groups */
.hp-members-grid .hp-member-card {
  transition: opacity .35s ease, transform .35s ease, max-height .4s ease, margin .35s ease, padding .35s ease;
  max-height: 400px;
}

.hp-member-card.hp-intro {
  opacity: 0;
  transform: translateY(8px);
}

/* Table row animation for referral toggles */
.hp-table-wrap tbody tr {
  transition: opacity .35s ease, transform .35s ease, max-height .4s ease, padding .35s ease;
}

.hp-table-wrap tbody tr.direct-row,
.hp-table-wrap tbody tr.indirect-row {
  max-height: 120px;
}

.hp-table-wrap.hide-direct tbody tr.direct-row,
.hp-table-wrap.hide-indirect tbody tr.indirect-row {
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;
}

.hp-members-grid.hide-direct .hp-member-card.direct-card,
.hp-members-grid.hide-indirect .hp-member-card.indirect-card {
  opacity: 0;
  transform: translateY(-6px) scale(.96);
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  pointer-events: none;
}

.hp-ref-label {
  font-size: .65rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 700;
  color: #ff9a30;
}

html[data-theme='dark'] .hp-ref-label {
  color: #ffb347;
}

.hp-ref-value {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
}



.hp-table-wrap {
  display: none;
}

/* --- farms Placeholder Cards --- */
.hp-placeholder-card {
  /* Match farm/stake card overall feel */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-radius: 16px;
  padding: 1rem 1rem 0.9rem;
  border: 1px solid rgba(0, 0, 0, .05);
  background: linear-gradient(135deg, #ffe3d2, #ffd4a8);
}

html[data-theme='dark'] .hp-placeholder-card {
  background: linear-gradient(135deg, rgba(255, 154, 92, .15), rgba(255, 119, 0, .08));
  border-color: rgba(255, 255, 255, .08);
}

.hp-placeholder-card .hp-ph-image {
  max-height: 110px;
  max-width: 110px;
  width: auto;
  height: 50%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}

/* Placeholder text sizing to match small texts in farm/stake cards */
.hp-placeholder-card .hp-ph-text {
  font-size: clamp(.8rem, .6vw + .55rem, .95rem);
  line-height: 1.35;
}

/* moved to centralized mobile block */

.hp-placeholder-claimed {
  filter: grayscale(1) brightness(.9);
}

html[data-theme='dark'] .hp-placeholder-claimed {
  filter: grayscale(1) brightness(.7);
}

/* Claimed farms smooth collapse */
.hp-claimed-collapsible {
  overflow: hidden;
  transition: height .45s cubic-bezier(.25, .7, .3, 1);
  will-change: height;
}

.hp-claimed-collapsible:not(.hp-claimed-open) {
  height: 0;
}

/* Smooth removal for placeholder cards when a real card is inserted */
.hp-placeholder-exit {
  opacity: 0 !important;
  transform: translateY(10px) scale(0.995) !important;
  transition: opacity .38s cubic-bezier(.2,.9,.2,1), transform .38s cubic-bezier(.2,.9,.2,1);
  pointer-events: none;
}

.hp-grid-wrap {
  display: block;
}

.hp-load-more {
  display: none;
}

/* Row selection highlight (transactions & network tables) */
tbody tr.hp-row-selected>* {
  background: linear-gradient(90deg, rgba(255, 90, 31, .12), rgba(255, 160, 60, .10)) !important;
  box-shadow: inset 0 0 0 999px rgba(255, 90, 31, .04);
}

html[data-theme='dark'] tbody tr.hp-row-selected>* {
  background: linear-gradient(90deg, rgba(255, 90, 31, .22), rgba(255, 160, 60, .15)) !important;
  box-shadow: inset 0 0 0 999px rgba(255, 90, 31, .08);
}

/* Send button styles (between Deposit and Withdraw) */
.btn-hp-deposit, .btn-hp-withdraw, .btn-hp-send {
  font-weight: 600;
}
.btn-hp-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffb347, #ff5a1f);
  color: #fff;
  border: none;
  box-shadow: 0 6px 16px rgba(255, 90, 31, .25);
}
.btn-hp-send:hover { filter: brightness(1.05); color: #fff; }
.btn-hp-send:active { filter: brightness(.98); }

/* Mobile spacing tweaks */
@media (max-width: 767.98px) {
  .hp-total-cta { gap: .5rem; }
  .btn-hp-send i { font-size: 1.1rem; }
  /* Make Deposit and Withdraw share equal width on mobile */
  .hp-total-cta .btn-hp-deposit,
  .hp-total-cta .btn-hp-withdraw {
    flex: 1 1 0;
  }
  /* Keep Send auto-sized between them */
  .hp-total-cta .btn-hp-send {
    flex: 0 0 auto;
  }
}

/* Desktop/tablet: align height and let it fill equal vertical size */
@media (min-width: 768px) {
  .btn-hp-send { padding: .5rem .75rem; }
}

tbody tr.hp-row-selected {
  position: relative;
}

tbody tr.hp-row-selected::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 90, 31, .55);
  border-radius: 4px;
  mix-blend-mode: normal;
}

.hp-member-card.hp-colored {
  border: none;
}

.hp-member-card.hp-colored::before {
  display: none;
}

.hp-member-card.hp-colored .hp-username {
  color: rgba(255, 255, 255, .9);
}

.hp-member-card.hp-colored .hp-meta {
  color: rgba(255, 255, 255, .85);
}

/* Direct / Indirect badge on member cards */
.hp-member-card .hp-di-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  line-height: 1;
  color: #fff;
  z-index: 5;
}


.hp-member-card:hover .hp-di-badge {
  transform: scale(1.05);
}

/* Notifications list icon standard styling */
.hp-notif-item {
  gap: .75rem !important;
}

.hp-notif-icon {
  color: #ff5a1f !important;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 90, 31, .12), rgba(255, 90, 31, .05));
  flex-shrink: 0;
}

html[data-theme='dark'] .hp-notif-icon {
  background: linear-gradient(135deg, rgba(255, 90, 31, .25), rgba(255, 90, 31, .12));
}

.hp-notif-item .small {
  line-height: 1.25;
}

/* Read vs Unread states */
.hp-notif-item {
  cursor: pointer;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, .05) !important;
  background: var(--bs-body-bg);
}

html[data-theme='dark'] .hp-notif-item {
  border-bottom-color: rgba(255, 255, 255, .08) !important;
}

.hp-notif-item.hp-notif-unread {
  background: linear-gradient(135deg, rgba(255, 90, 31, .12), rgba(255, 90, 31, .05));
  position: relative;
}

html[data-theme='dark'] .hp-notif-item.hp-notif-unread {
  background: linear-gradient(135deg, rgba(255, 90, 31, .25), rgba(255, 90, 31, .12));
}

.hp-notif-item.hp-notif-unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ff5a1f;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.hp-notif-item.hp-notif-read {
  background: var(--bs-body-bg);
}

.hp-notif-item:active {
  transform: scale(.995);
}

/* Notification modal header centering */
.hp-notif-modal .hp-hm-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 74px;
  padding: 1rem 1.25rem;
}

.hp-notif-modal .hp-hm-header h5 {
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 1.2rem;
}

/* Modal farms / invites */
.hp-member-modal .modal-header {
  border: 0;
}

.hp-member-modal .modal-body {
  padding-top: 0;
  overflow-x: hidden;
}

.hp-member-summary {
  border-radius: 14px;
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, .06);
  background: var(--bs-body-bg);
}

.hp-farms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* desktop default */
  gap: 12px;
}

.hp-farm-card {
  border-radius: 16px;
  padding: 1rem 1rem 0.9rem;
  color: #fff;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .22);
  border: none;
}

/* Completed (unclaimed) farm visual emphasis */
.hp-farm-card.hp-completed-glow {
  position: relative;
  isolation: isolate;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .15), 0 0 18px 4px rgba(255, 255, 255, .18), 0 4px 28px rgba(0, 0, 0, .25);
}

.hp-farm-card.hp-completed-glow.egg {
  box-shadow: 0 0 0 2px rgba(255, 200, 120, .4), 0 0 22px 5px rgba(255, 152, 0, .55), 0 6px 28px rgba(0, 0, 0, .3);
}

.hp-farm-card.hp-completed-glow.chick {
  box-shadow: 0 0 0 2px rgba(255, 140, 120, .4), 0 0 22px 5px rgba(255, 112, 67, .55), 0 6px 28px rgba(0, 0, 0, .3);
}

.hp-farm-card.hp-completed-glow.broiler {
  box-shadow: 0 0 0 2px rgba(255, 120, 90, .4), 0 0 22px 5px rgba(216, 67, 21, .55), 0 6px 28px rgba(0, 0, 0, .35);
}

.hp-farm-card.hp-completed-glow.layer {
  box-shadow: 0 0 0 2px rgba(200, 140, 255, .35), 0 0 24px 6px rgba(142, 36, 170, .55), 0 6px 30px rgba(0, 0, 0, .35);
}

.hp-farm-card.hp-completed-glow.golden {
  box-shadow: 0 0 0 2px rgba(255, 210, 110, .45), 0 0 26px 6px rgba(255, 179, 0, .6), 0 6px 30px rgba(0, 0, 0, .35);
}

.hp-farm-card.hp-completed-glow.prime {
  box-shadow: 0 0 0 2px rgba(255, 120, 120, .4), 0 0 28px 7px rgba(213, 0, 0, .65), 0 6px 34px rgba(0, 0, 0, .4);
}

/* Completed-unclaimed icon tweak */
.hp-farm-chick-gif.hp-completed-icon {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .6));
}

/* Text-based completed icon (e.g., green $) – strong contrasting glow */
.hp-farm-card .hp-completed-icon:not(img) {
  /* Keep any inline color (e.g., #28a745) and add a multi-layer glow for contrast */
  text-shadow:
    0 0 6px rgba(255, 255, 255, .95),
    0 0 14px rgba(255, 255, 255, .6),
    0 0 22px rgba(40, 167, 69, .55);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}

.hp-farm-card .hp-farm-id-badge {
  position: absolute;
  top: -.25rem;
  right: -.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  font-size: .7rem;
  letter-spacing: .5px;
  font-weight: 600;
  padding: .4rem .55rem;
  backdrop-filter: blur(4px);
}

.hp-farm-card .hens {
  font-size: clamp(1.25rem, 2.2vw + .5rem, 2rem);
  font-weight: 800;
  line-height: 1.05;
}

.hp-farm-card .dates {
  opacity: .95;
  font-size: clamp(.8rem, .6vw + .55rem, .95rem);
}

/* Active farms "farmyard" themed wrapper */
.hp-farmyard {
  position: relative;
  padding: 16px 16px 96px; /* space for the fence (desktop/tablet) */
  overflow: hidden;
  /* Deeper blue sky at top -> lighter toward horizon, then soft farmland greens */
  background: linear-gradient(180deg, #9FD8FF 0%, #C6EEFF 26%, #DFF7FF 48%, #E6F8D9 68%, #E0F1C7 100%);
  box-shadow: 0 8px 28px rgba(0,0,0,.06), inset 0 2px 0 rgba(255,255,255,.35);
  --hp-cloud-offsetY: 0px;
}

/* Decorative clouds (very subtle, slightly bluish) */
.hp-farmyard::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%; top: -55px; height: 150px;
  pointer-events: none;
  background:
    radial-gradient(60px 30px at 10% 55%, rgba(255,255,255,.45) 0 98%, transparent 100%),
    radial-gradient(70px 34px at 35% 38%, rgba(255,255,255,.4) 0 98%, transparent 100%),
    radial-gradient(55px 26px at 70% 52%, rgba(255,255,255,.35) 0 98%, transparent 100%),
    radial-gradient(65px 28px at 90% 42%, rgba(255,255,255,.35) 0 98%, transparent 100%);
  filter: blur(.2px);
  transform: translateY(var(--hp-cloud-offsetY));
  transition: transform .2s ease-out;
}

/* Picket fence + rails anchored to bottom */
.hp-farmyard::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 116px;
  pointer-events: none;
  /* Three layers: slats (repeating), upper rail, lower rail */
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.95) 0 14px, rgba(255,255,255,0) 14px 22px),
    linear-gradient(#d6ccb1, #d6ccb1),
    linear-gradient(#d6ccb1, #d6ccb1);
  background-size:
    22px 84px,
    100% 6px,
    100% 6px;
  background-position:
    left 8px,
    left 38px,
    left 56px;
  background-repeat:
    repeat-x,
    no-repeat,
    no-repeat;
  box-shadow: 0 -1px 0 rgba(0,0,0,.04) inset, 0 -6px 18px rgba(0,0,0,.06) inset;
}

/* On small screens, reduce bottom padding and fence height so it doesn't look like extra blank space above the fixed bottom nav */
@media (max-width: 768px) {
  .hp-farmyard { padding-bottom: 64px; }
  .hp-farmyard::before {
    height: 58px;
    background-position:
      left 6px,
      left 30px,
      left 48px;
  }
}

/* Dark theme variant */
html[data-theme='dark'] .hp-farmyard {
  background: linear-gradient(180deg, #1E2634 0%, #1C2432 58%, #15231B 58%, #122017 100%);
  box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.06);
}
html[data-theme='dark'] .hp-farmyard::after {
  background:
    radial-gradient(60px 30px at 10% 55%, rgba(255,255,255,.12) 0 98%, transparent 100%),
    radial-gradient(70px 34px at 35% 38%, rgba(255,255,255,.10) 0 98%, transparent 100%),
    radial-gradient(55px 26px at 70% 52%, rgba(255,255,255,.10) 0 98%, transparent 100%),
    radial-gradient(65px 28px at 90% 42%, rgba(255,255,255,.10) 0 98%, transparent 100%);
}
html[data-theme='dark'] .hp-farmyard::before {
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.08) 0 14px, rgba(255,255,255,0) 14px 22px),
    linear-gradient(#44503a, #44503a),
    linear-gradient(#44503a, #44503a);
  box-shadow: 0 -1px 0 rgba(255,255,255,.03) inset, 0 -6px 18px rgba(0,0,0,.25) inset;
}

/* ===================================================
   Staking area: crypto-themed background (overrides
   .hp-farmyard visuals when applied to #hpTabStaking)
   =================================================== */
#hpTabStaking {
  /* darker, techy gradient */
  background: linear-gradient(180deg, #071527 0%, #052034 48%, #071729 100%);
  box-shadow: 0 10px 30px rgba(4,12,20,.45), inset 0 2px 0 rgba(255,255,255,.02);
  --hp-cloud-offsetY: -6px; /* reuse variable (no clouds here but safe)
  */
}

/* Replace soft clouds with subtle circuit-like highlights */
#hpTabStaking::after {
  content: "";
  position: absolute;
  left: -6%; right: -6%; top: -60px; height: 180px;
  pointer-events: none;
  background:
    radial-gradient(120px 40px at 10% 55%, rgba(80,200,255,0.04) 0 60%, transparent 100%),
    radial-gradient(90px 30px at 40% 30%, rgba(60,180,255,0.035) 0 60%, transparent 100%),
    radial-gradient(70px 24px at 70% 50%, rgba(120,220,200,0.03) 0 60%, transparent 100%);
  filter: blur(10px) contrast(.95) saturate(.9);
  transform: translateY(var(--hp-cloud-offsetY));
}

/* Replace picket fence with a tech grid / PCB rail at the bottom */
#hpTabStaking::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 76px;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, rgba(0,120,160,0.06) 0%, rgba(0,0,0,0) 40%),
    repeating-linear-gradient(90deg, rgba(0,120,180,0.06) 0 1px, transparent 1px 14px);
  background-size:
    100% 6px,
    100% 8px,
    22px 76px;
  background-position:
    left 6px bottom 46px,
    left 36px bottom 34px,
    left 8px bottom 8px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  box-shadow: 0 -2px 10px rgba(3,18,30,.45) inset;
}

/* Slightly different copy for compact screens */
@media (max-width: 768px) {
  #hpTabStaking::before { height: 58px; background-position: left 6px bottom 34px, left 18px bottom 22px, left 6px bottom 6px; }
}

/* Dark theme tweak (when user toggles dark mode) */
html[data-theme='dark'] #hpTabStaking {
  background: linear-gradient(180deg, #02141b 0%, #041525 48%, #021218 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.02);
}
html[data-theme='dark'] #hpTabStaking::after {
  background:
    radial-gradient(120px 40px at 10% 55%, rgba(60,160,220,0.03) 0 60%, transparent 100%),
    radial-gradient(90px 30px at 40% 30%, rgba(50,130,200,0.025) 0 60%, transparent 100%);
}


/* Little chicken decoration near the fence */
.hp-farmyard-chicken {
  position: absolute;
  bottom: 18px; /* above lower rail */
  left: 12px;
  width: 48px;
  height: 36px;
  color: #8B5E34; /* coop wood/brown */
  opacity: .9;
  animation: hp-chicken-bob 2.4s ease-in-out infinite;
  pointer-events: none;
}
html[data-theme='dark'] .hp-farmyard-chicken { color: #C5A67E; opacity: .85; }

@keyframes hp-chicken-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* Compact farm card typography */
.hp-farm-earn {
  font-size: clamp(.8rem, .55vw + .5rem, .9rem);
  line-height: 1.25;
}
.hp-farm-earn b { font-weight: 700; }
.hp-farm-earn .hp-dollar {
  font-weight: 600;
  color: #28a745;
  margin-left: 4px;
}
/* Unified USD icon spacing within farm-earn text */
.hp-farm-earn .hp-usd-circle { margin-left: 4px; vertical-align: middle; }

.hp-farm-meta {
  font-size: clamp(.8rem, .55vw + .5rem, .9rem);
  opacity: .95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-farm-bonus {
  font-size: clamp(.8rem, .55vw + .5rem, .9rem);
  opacity: .9;
}

.hp-section-title {
  font-weight: 700;
  margin: 1rem 0 .5rem;
}

.hp-invites-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* desktop default handled by base .hp-members-grid */

.hp-summary-stats {
  white-space: normal;
}

/* Sortable header arrows */
thead .hp-sortable.sorted-asc::after {
  content: ' \25B2';
  font-size: .8em;
}

thead .hp-sortable.sorted-desc::after {
  content: ' \25BC';
  font-size: .8em;
}

/* moved to centralized mobile block */

/* --- Profile Page --- */
.hp-profile-hero {
  position: relative;
  max-width: 780px;
  height: 260px;
  margin: 0 auto;
}

.hp-profile-banner {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .15);
  overflow: hidden;
}

.hp-rank-float {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.hp-rank-circle {
  width: 162px;
  height: 162px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hp-rank-circle img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  display: block;
  margin: auto;
  filter: url(#hpIconStrokeShadow);
}

.hp-profile-name {
  margin-top: 40px;
  font-weight: 800;
}

.hp-profile-sub {
  color: var(--bs-secondary-color);
}

.hp-info-card {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, .06);
  background: var(--bs-body-bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.hp-info-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 0;
}

.hp-info-item i {
  color: #ff5a1f;
}

/* moved to centralized mobile block */

/* Modal form (profile edit) borrowed from register styling */
.hp-modal-form-card {

/* Simplify icon styling: avoid expensive multi drop-shadows */
.icon-fill { filter: none; }
html[data-theme='dark'] .icon-fill { filter: none; }

/* Referral boxes: inline icon before the value (override absolute positioning) */
.hp-ref-box .hp-ref-icon {
  position: static;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 6px;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* When toggled ON, icon should be white for contrast */
.hp-ref-box.hp-on .hp-ref-icon { color: #fff; }
}

.hp-modal-form-card .form-group {
  width: 100%;
  margin-bottom: 1rem;
  position: relative;
}

.hp-modal-form-card .form-group input {
  width: 100%;
  border: none;
  border-bottom: 2px solid #ffb347;
  background: transparent;
  padding: 0.85rem 0.5rem 0.5rem 2.2rem;
  font-size: 1rem;
  color: inherit;
  border-radius: 0.5rem;
  outline: none;
  transition: border-color .2s, background .2s;
}

.hp-modal-form-card .form-group input:focus {
  border-color: #ff5a1f;
  background: rgba(255, 246, 214, .4);
}

.hp-modal-form-card .form-group .icon {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #ffb347;
  opacity: .85;
}

.hp-modal-form-actions .btn-primary {
  background: linear-gradient(90deg, #ffb347 0%, #ff5a1f 100%);
  border: none;
}

.hp-modal-form-actions .btn-primary:active,
.hp-modal-form-actions .btn-primary:focus {
  background: linear-gradient(90deg, #ff5a1f 0%, #ffb347 100%);
}

/* --- Register Page Layout --- */
.hp-register-container {
  display: flex;
  max-width: 980px;
  width: 100%;
  background: transparent;
  border-radius: 2rem;
  box-shadow: 0 8px 32px rgba(255, 90, 31, 0.10);
  overflow: hidden;
}

.hp-register-left {
  background: linear-gradient(135deg, #d50000 0%, #212121 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
  position: relative;
  /* Desktop: reserve a consistent width for the hero panel */
  flex: 0 0 380px;
  max-width: 420px;
}

.hp-register-left .logo {
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
}

.hp-register-left h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

.hp-register-left p {
  font-size: 1rem;
  opacity: .85;
  margin-bottom: 2rem;
  text-align: center;
  max-width: 340px;
}

.hp-register-left .btn {
  background: linear-gradient(90deg, #ffb347 0%, #ff5a1f 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  padding: .75rem 2rem;
  border-radius: 2rem;
  box-shadow: 0 2px 8px rgba(255, 90, 31, 0.10);
  margin-top: 1rem;
  cursor: pointer;
  transition: background .2s;
}

.hp-register-right {
  flex: 1;
  background: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.hp-register-form-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hp-register-form-card h2 {
  font-weight: 700;
  font-size: 1.7rem;
  margin-bottom: 1.2rem;
  text-align: center;
  color: #ff5a1f;
}

.hp-register-form-card .subtitle {
  text-align: center;
  color: #ff7e5f;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.hp-register-form-card .form-group {
  width: 100%;
  margin-bottom: 1rem;
  position: relative;
}

.hp-register-form-card .form-group input {
  width: 100%;
  border: none;
  border-bottom: 2px solid #ffb347;
  background: transparent;
  padding: 0.85rem 0.5rem 0.5rem 2.2rem;
  font-size: 1rem;
  color: #333;
  border-radius: 0.5rem;
  outline: none;
  transition: border-color .2s;
}

.hp-register-form-card .form-group input:focus {
  border-color: #ff5a1f;
  background: #fffbe6;
}

.hp-register-form-card .form-group .icon {
  position: absolute;
  left: .5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #ffb347;
  opacity: .85;
}

.hp-register-form-card .form-check {
  margin: 1rem 0 .5rem 0;
  width: 100%;
  display: flex;
  align-items: center;
}

.hp-register-form-card .form-check-input {
  margin-right: .5rem;
  accent-color: #ffb347;
}

.hp-register-form-card .form-check-label {
  color: #ff5a1f;
  font-size: .95rem;
}

.hp-register-form-card .btn-primary {
  background: linear-gradient(90deg, #ffb347 0%, #ff5a1f 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  padding: .75rem 2rem;
  border-radius: 2rem;
  box-shadow: 0 2px 8px rgba(255, 90, 31, 0.10);
  margin-top: 1rem;
  transition: background .2s;
  width: 100%;
  cursor: pointer;
}

.hp-register-form-card .btn-primary:active,
.hp-register-form-card .btn-primary:focus {
  background: linear-gradient(90deg, #ff5a1f 0%, #ffb347 100%);
}

.hp-register-form-card .text-muted {
  color: #888 !important;
  font-size: .95rem;
  margin-top: 1rem;
  text-align: center;
}

.hp-register-form-card .link,
.hp-form-card .link,
.linker {
  color: #ff7e5f;
  text-decoration: none;
  font-size: .95rem;
  cursor: pointer;
}

/* Centering body layout specifically for register page */
.hp-register-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* moved to centralized mobile block */

/* Dark theme global contrast for forms, tables, lists, offcanvas */
html[data-theme='dark'] .form-control,
html[data-theme='dark'] .form-select, html[data-theme='dark'] .hp-register-right {
  background-color: #111827;
  color: #e5e7eb;
  border-color: #334155;
}

html[data-theme='dark'] .form-control::placeholder {
  color: #94a3b8;
  opacity: 1;
}

html[data-theme='dark'] .form-control:focus,
html[data-theme='dark'] .form-select:focus {
  background-color: #0f172a;
  color: #f1f5f9;
  border-color: #60a5fa;
  box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .25);
}

html[data-theme='dark'] .input-group-text {
  background-color: #0b1220;
  color: #cbd5e1;
  border-color: #334155;
}

html[data-theme='dark'] .form-check-label {
  color: var(--hp-text);
}

html[data-theme='dark'] .table {
  --bs-table-color: #e5e7eb;
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(255, 255, 255, .12);
  --bs-table-striped-bg: rgba(255, 255, 255, .04);
  --bs-table-hover-bg: rgba(255, 255, 255, .06);
  --bs-table-active-bg: rgba(255, 255, 255, .08);
}

html[data-theme='dark'] .table thead th {
  border-bottom-color: rgba(255, 255, 255, .16);
}

html[data-theme='dark'] .list-group-item {
  background-color: #0f172a;
  color: #e5e7eb;
  border-color: rgba(255, 255, 255, .08);
}

html[data-theme='dark'] .offcanvas {
  background-color: #0B1220;
  color: #e5e7eb;
}

html[data-theme='dark'] .modal-content {
  background-color: #0B1220;
  color: #e5e7eb;
  border-color: rgba(255, 255, 255, .12);
}

/* Make default Bootstrap close (btn-close) visible on dark theme */
html[data-theme='dark'] .btn-close {
  filter: invert(1) grayscale(100%) brightness(180%);
  opacity: .85;
}

html[data-theme='dark'] .btn-close:hover,
html[data-theme='dark'] .btn-close:focus {
  opacity: 1;
  outline: none;
  box-shadow: none;
}

/* Buttons */
html[data-theme='dark'] .btn-outline-secondary {
  color: #cbd5e1;
  border-color: #475569;
}

html[data-theme='dark'] .btn-outline-secondary:hover {
  color: #fff;
  background-color: #1f2937;
  border-color: #64748b;
}

/* Links */
html[data-theme='dark'] a {
  color: #93c5fd;
}

a {
  text-decoration: none;
}

html[data-theme='dark'] a:hover {
  color: #bfdbfe;
}

/* Nav active state more visible on dark */
html[data-theme='dark'] .hp-nav .nav-link.active {
  background: rgba(255, 90, 31, .2);
  color: #ffb08a;
}

/* Card header and borders */
html[data-theme='dark'] .card-header {
  background-color: #111827;
  color: #e5e7eb;
  border-bottom-color: rgba(255, 255, 255, .12);
}

html[data-theme='dark'] .border-top {
  border-top-color: rgba(255, 255, 255, .12) !important;
}

html[data-theme='dark'] .border-bottom {
  border-bottom-color: rgba(255, 255, 255, .12) !important;
}

/* Badges */
html[data-theme='dark'] .badge.bg-light,
html[data-theme='dark'] .text-bg-light {
  background-color: #1f2937 !important;
  color: #e5e7eb !important;
}

/* Dropdowns */
html[data-theme='dark'] .dropdown-menu {
  background-color: #0f172a;
  color: #e5e7eb;
  border-color: rgba(255, 255, 255, .12);
}

html[data-theme='dark'] .dropdown-item {
  color: #e5e7eb;
}

html[data-theme='dark'] .dropdown-item:hover,
html[data-theme='dark'] .dropdown-item:focus {
  background-color: rgba(255, 126, 51, .12);
  color: #ffd7b3;
}

html[data-theme='dark'] .dropdown-item.active,
html[data-theme='dark'] .dropdown-item:active {
  background-color: rgba(255, 126, 51, .2) !important;
  color: #ffddb8 !important;
}

/* Light theme orangish dropdown highlight */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(255, 90, 31, .10);
  color: #b45309;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: rgba(255, 90, 31, .15) !important;
  color: #b45309 !important;
}

/* Native select (best-effort) */
select option:checked {
  background-color: #ffe0cc;
  color: #7a2e0d;
}

html[data-theme='dark'] select option:checked {
  background-color: #7a2e0d;
  color: #ffddb8;
}

/* Pagination */
html[data-theme='dark'] .page-link {
  background-color: #0b1220;
  color: #e5e7eb;
  border-color: #334155;
}

html[data-theme='dark'] .page-link:hover {
  background-color: #111827;
  color: #fff;
  border-color: #64748b;
}

html[data-theme='dark'] .page-item.active .page-link {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* Forms labels and help text */
html[data-theme='dark'] .form-label {
  color: #e5e7eb;
}

html[data-theme='dark'] .form-text {
  color: #94a3b8;
}

/* Smooth theme transition */
html,
body {
  transition: background-color .35s ease, color .35s ease;
}

/* Global form redesign: pill inputs, smooth cards/modals, orange gradient accents */
.hp-form-card,
.card.hp-form-card {
  border-radius: 1.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
  border: 1px solid rgba(0, 0, 0, .06);
}

.modal-content {
  border-radius: 1.75rem;
}

.form-label {
  font-weight: 600;
}

.hp-input.form-control {
  border-radius: 999px;
  padding: .8rem 1rem;
  border: 1px solid #ffd199;
  background: var(--bs-body-bg);
}

.hp-input.form-control:focus {
  border-color: #ff5a1f;
  box-shadow: 0 0 0 .2rem rgba(255, 90, 31, .15);
}

/* Icon-inside pill inputs */
.hp-input-wrap {
  position: relative;
}

.hp-input-wrap .hp-input {
  padding-left: 2.4rem;
}

.hp-input-wrap select.form-select.hp-input {
  padding-left: 2.4rem;
  background-position: right .75rem center;
}

.hp-input-wrap .hp-input-icon {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: #ffb347;
  opacity: .9;
  pointer-events: none;
  font-size: 1.05rem;
  z-index: 2;
  /* ensure visible above custom select buttons */
}

.hp-input-wrap.hp-float .hp-input {
  padding-top: 1.15rem;
}

/* Floating placeholder/label that sits on the border with a small gap (notched effect) */
.hp-float-label {
  position: absolute;
  left: 2.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .95rem;
  color: #6b7280;
  pointer-events: none;
  transition: all .18s ease;
  padding: 0 .4rem;
  background: var(--bs-body-bg);
}

.hp-input-wrap.hp-float .hp-input:focus+.hp-float-label,
.hp-input-wrap.hp-float .hp-input:not(:placeholder-shown)+.hp-float-label,
.hp-input-wrap.hp-float .hp-input.is-filled+.hp-float-label {
  top: 0;
  /* move to the input's top border */
  transform: translateY(-50%) scale(.86);
  color: #ff5a1f;
}

/* Register layout: constrain the form card and make the right column scrollable */
.hp-register-right {
  overflow-y: auto; /* make right column scrollable */
  max-height: 100vh;
}
.hp-register-form-card {
  /* keep the card visually contained so plugins like the password enhancer don't expand it */
  max-height: calc(100vh - 140px);
  /* allow inner content to flow; the right column will scroll when needed */
}

/* Dark theme label color and background harmonize */
html[data-theme='dark'] .hp-float-label {
  color: #94a3b8;
  background: #0f172a;
}

html[data-theme='dark'] .hp-input-wrap.hp-float .hp-input:focus+.hp-float-label {
  color: #ff7e33;
}

/* Ensure custom select float label only floats when button is focused or when populated (.is-filled) */
.hp-input-wrap.hp-float .hp-select-wrap .hp-input:focus+.hp-float-label,
.hp-input-wrap.hp-float .hp-select-wrap .hp-input.is-filled+.hp-float-label {
  top: 0;
  transform: translateY(-50%) scale(.86);
  color: #ff5a1f;
}

/* Explicitly keep select label inline when not focused and not filled */
.hp-input-wrap.hp-float .hp-select-wrap .hp-input:not(:focus):not(.is-filled)+.hp-float-label {
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

.btn-primary {
  background: linear-gradient(90deg, #ffb347 0%, #ff5a1f 100%);
  border: none;
  border-radius: 12px;

}

.hp-btn-input {
  padding: .8rem 1rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}

.btn-primary:focus,
.btn-primary:active {
  background: linear-gradient(90deg, #ff5a1f 0%, #ffb347 100%);
}

html[data-theme='dark'] .hp-input.form-control {
  background: #0f172a;
  color: #e5e7eb;
  border-color: #334155;
}

html[data-theme='dark'] .hp-input.form-control:focus {
  border-color: #ff7e33;
  box-shadow: 0 0 0 .2rem rgba(255, 126, 51, .18);
}

/* ==========================================================
   Browser autofill overrides (keep white background & normal text
   when Chrome/Edge autofills saved username/password).
   ========================================================== */
input.hp-input:-webkit-autofill,
input.hp-input:-webkit-autofill:hover,
input.hp-input:-webkit-autofill:focus,
textarea.hp-input:-webkit-autofill,
select.hp-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
  -webkit-text-fill-color: #0B1220 !important;
  caret-color: #0B1220 !important;
  transition: background-color 5000s ease-in-out 0s;
  /* prevent flash */
}

html[data-theme='dark'] input.hp-input:-webkit-autofill,
html[data-theme='dark'] input.hp-input:-webkit-autofill:hover,
html[data-theme='dark'] input.hp-input:-webkit-autofill:focus,
html[data-theme='dark'] textarea.hp-input:-webkit-autofill,
html[data-theme='dark'] select.hp-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #0f172a inset !important;
  box-shadow: 0 0 0px 1000px #0f172a inset !important;
  -webkit-text-fill-color: #e5e7eb !important;
  caret-color: #e5e7eb !important;
}

/* Firefox autofill */
input.hp-input:-webkit-autofill::first-line {
  font-family: inherit;
  font-size: inherit;
}

input.hp-input:-moz-autofill {
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -moz-text-fill-color: #0B1220 !important;
}

html[data-theme='dark'] input.hp-input:-moz-autofill {
  box-shadow: 0 0 0 1000px #0f172a inset !important;
  -moz-text-fill-color: #e5e7eb !important;
}

/* ==========================================================
   Custom Select (forces dropdown to appear below)
   Used for Deposit / Withdraw network selects
   ========================================================== */
.hp-select-wrap {
  position: relative;
}

.hp-select-original {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.hp-select-btn {
  width: 100%;
  text-align: left;
  border: 1px solid #ffd199;
  background: var(--bs-body-bg);
  border-radius: .5rem;
  padding: .55rem .85rem;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  cursor: pointer;
  color: var(--hp-text);
}

.hp-select-btn:focus {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(255, 90, 31, .25);
  border-color: #ff5a1f;
}

html[data-theme='dark'] .hp-select-btn {
  border-color: #334155;
  background: #0f172a;
  color: #e5e7eb;
}

.hp-select-btn .hp-select-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-select-btn .hp-select-caret {
  transition: transform .25s ease;
  font-size: .85rem;
  opacity: .8;
}

/* Ensure emoji flags render across platforms and size consistently */
.hp-flag {
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-block;
  width: 1.35em;
  text-align: center;
}

/* When hp-select-btn is styled like an input, ensure label area aligns with float label */
.hp-select-btn.form-control.hp-input {
  display: flex;
  align-items: center;
  padding-left: 2.4rem; /* match hp-input left padding so icon doesn't overlap */
}

.hp-select-btn[aria-expanded='true'] .hp-select-caret {
  transform: rotate(180deg);
}

.hp-select-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bs-body-bg);
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: .65rem;
  margin-top: .3rem;
  box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .25), 0 4px 12px -4px rgba(0, 0, 0, .18);
  z-index: 1060;
  max-height: 240px;
  overflow: auto;
  padding: .35rem 0;
  display: none;
}

html[data-theme='dark'] .hp-select-menu {
  background: #1f2937;
  border-color: rgba(255, 255, 255, .15);
}

.hp-select-menu.show {
  display: block;
  animation: hpSelFade .22s cubic-bezier(.3, .7, .2, 1);
}

/* Ensure select menus inside overlays sit above modal body content */
.hp-farms-overlay .hp-select-menu {
  z-index: 6000;
}

/* Center header text (vertical & horizontal) for deposit & withdraw overlays */
.hp-deposit-modal .hp-hm-header,
.hp-withdraw-modal .hp-hm-header,
.hp-profile-edit-modal .hp-hm-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 2rem;
  min-height: 74px;
}

@keyframes hpSelFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hp-select-option {
  padding: .5rem .85rem;
  font-size: .9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  position: relative;
}

.hp-select-option:hover {
  background: linear-gradient(90deg, #ffb347 0%, #ff5a1f 100%);
  color: #fff;
}

.hp-select-option.active {
  background: linear-gradient(90deg, #ff5a1f 0%, #ffb347 100%);
  color: #fff;
}

.hp-select-option:not(:last-child)::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: 0;
  height: 1px;
  background: rgba(0, 0, 0, .05);
}

html[data-theme='dark'] .hp-select-option:not(:last-child)::after {
  background: rgba(255, 255, 255, .08);
}

.hp-select-empty {
  padding: .6rem .85rem;
  font-size: .8rem;
  color: var(--bs-tertiary-color);
}

/* Artistic Theme Toggle */
.hp-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 68px;
  height: 36px;
  border-radius: 999px;
  padding: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.hp-theme-toggle .hp-tt-knob {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  display: grid;
  place-items: center;
  color: #b45309;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  transform: translateX(0);
  transition: transform .35s ease, color .35s ease, background .35s ease;
}

.hp-theme-toggle .hp-tt-knob i {
  transition: transform .35s ease, opacity .35s ease;
}

/* Light (sunny) track */
html[data-theme='light'] .hp-theme-toggle {
  background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, .9), rgba(255, 248, 200, .85) 40%, rgba(255, 214, 102, .85) 100%);
  border-color: #ffe58f;
}

html[data-theme='light'] .hp-theme-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, .9) 0, rgba(255, 233, 150, .45) 40%, rgba(255, 198, 88, .35) 65%, rgba(255, 166, 33, .2) 100%);
  pointer-events: none;
}

html[data-theme='light'] .hp-theme-toggle .hp-tt-knob {
  background: #fffbe6;
  color: #d97706;
  transform: translateX(0);
}

/* Dark (moonish) track with stars */
html[data-theme='dark'] .hp-theme-toggle {
  background: linear-gradient(135deg, #0b1220, #1f2937);
  border-color: #334155;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}

html[data-theme='dark'] .hp-theme-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(#e5e7eb 1px, transparent 1px) 8px 6px/12px 12px,
    radial-gradient(#94a3b8 1px, transparent 1px) 2px 2px/10px 10px;
  opacity: .6;
  pointer-events: none;
}

html[data-theme='dark'] .hp-theme-toggle .hp-tt-knob {
  transform: translateX(32px);
  background: #111827;
  color: #cbd5e1;
}

/* Dark mode readability tweaks */
/* Sortable table headers */
.hp-sort-asc,
.hp-sort-desc {
  white-space: nowrap;
}

html[data-theme='dark'] .card {
  background-color: #0f172a;
  color: #e5e7eb;
  border-color: rgba(255, 255, 255, .08);
}

html[data-theme='dark'] .table {
  color: #e5e7eb;
}

html[data-theme='dark'] .hp-nav .nav-link {
  color: var(--hp-text);
}

/* Sidebar fix for mobile */
.hp-sidebar {
  min-width: 0;
  width: 260px;
  max-width: 100vw;
}

/* Main content fix */
.hp-main {
  min-width: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Sidebar */
.hp-sidebar {
  width: 260px;
  border-right: 1px solid rgba(0, 0, 0, .08);
}

/* Desktop / tablet: pin sidebar to the left and make main content flow to the right
   This overrides Bootstrap offcanvas responsive behavior which is intended for
   use inside a navbar. We want a persistent left navigation on md+ screens. */
@media (min-width: 768px) {
  .hp-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1030; /* above page content but below modals */
    overflow-y: auto;
    background: var(--bs-body-bg);
  }

  /* Push main content to the right and constrain its width to prevent overflow */
  .hp-main {
    margin-left: 260px;
    width: calc(100vw - 260px);
    max-width: calc(100vw - 260px);
    overflow-x: hidden;
  }
  body {
    overflow-x: hidden;
  }
}

/* Active link */
.hp-nav .nav-link {
  padding: .625rem .875rem;
  border-radius: .5rem;
  color: inherit
}

.hp-nav .nav-link.active {
  background: rgba(255, 90, 31, .12);
  color: var(--hp-primary-700);
  font-weight: 600
}

/* Topbar (mobile) */
.hp-topbar {
  background: var(--bs-body-bg)
}

/* Avatar + cards */
.hp-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.card {
  border-radius: 1rem
}

/* Pricing emphasis */
.hp-prime-card {
  border: 2px solid var(--hp-accent-500) !important;
  box-shadow: 0 0 0 .35rem rgba(245, 158, 11, .08) !important
}

/* Network */

/* Network Tree Grid Layout */
.hp-network-tree {
  display: block;
  width: 100%;
  min-width: 560px;
  /* 8 nodes * 70px min-width, plus gaps */
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  height: 100%;
}

.hp-network-tree .tree-node {
  min-width: 110px;
  /* increased from 90px */
  max-width: 140px;
  /* increased from 110px */
  margin: 0 auto;
  word-break: break-word;
  padding-bottom: 24px;
  /* extra space below each node */
}

.hp-network-tree .tree-label {
  margin-top: 4px;
  margin-bottom: 24px;
  /* extra space below label */
  font-size: 1rem;
  text-align: center;
}

.tree-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e9ecef;
  font-size: 2.5rem;
  display: flex;
  position: relative;
  margin: 0px auto;
  justify-content: center;
  align-items: center;
}

.tree-label {
  margin-top: 4px;
  font-size: 1rem;
  text-align: center;
}

.tree-icon i.bi-person-circle {
  font-size: 2.5rem;
}

.tree-icon i.text-secondary {
  color: #adb5bd;
}

.tree-label.text-primary {
  color: var(--hp-primary-600);
}


/* Responsive tree base */
.hp-network-tree { min-width: 600px; overflow-x: auto; }

/* --- Tree container: allow horizontal scroll if needed --- */
.hp-tree-container {
  overflow-x: auto;
  padding: 1rem;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 100%;
}

.hp-prime-badge {
  position: absolute;
  top: 0.55rem;
  right: -2.5rem;
  background: #fffbe6;
  color: #b8860b;
  font-weight: 600;
  padding: 0.5rem 2.5rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: rotate(30deg);
  z-index: 2;
  border: 1px solid #ffe58f;
  text-align: center;
  pointer-events: none;
}

/* Carousel container */
.hp-package-carousel {
  width: 100%;
  overflow: visible;
  /* <-- fix: allow glow to show */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 370px;
  padding-left: 48px;
  padding-right: 48px;
}

/* Carousel track */
.hp-carousel-track {
  width: 100%;
  display: flex;
  transition: transform 0.5s cubic-bezier(.77, 0, .18, 1);
  will-change: transform;
  justify-content: center;
  align-items: flex-end;
  gap: 2rem;
}

/* Card base */
.hp-package-card {
  flex: 0 0 22%;
  min-width: 220px;
  max-width: 260px;
  min-height: 360px;
  border-radius: 1rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  opacity: 0.6;
  filter: grayscale(0.3) brightness(0.95);
  transform: scale(0.95);
  transition:
    box-shadow 0.4s,
    opacity 0.4s,
    filter 0.4s,
    transform 0.4s;
  border: none;
  position: relative;
  background: #fff;
  z-index: 1;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1rem 2rem 1rem;
  text-align: center;

}

/* Selected card */
.hp-package-card.selected {
  box-shadow: 0 0 32px 8px rgba(255, 90, 31, 0.25), 0 4px 32px rgba(255, 90, 31, 0.10);
  opacity: 1;
  filter: none;
  transform: scale(1.08);
  z-index: 2;
  border: 3px solid #ff5a1f;

}

/* Card gradients: premium dark colors, white text for contrast */
.egg {
  background: linear-gradient(135deg, #ff9800 0%, #b85c00 100%);
  color: #fff;
}

.chick {
  background: linear-gradient(135deg, #ff7043 0%, #c62828 100%);
  color: #fff;
}

.broiler {
  background: linear-gradient(135deg, #d84315 0%, #6d4c41 100%);
  color: #fff;
}

.layer {
  background: linear-gradient(135deg, #8e24aa 0%, #311b92 100%);
  color: #fff;
}

.golden {
  background: linear-gradient(135deg, #ffb300 0%, #ff6f00 100%);
  color: #fff;
}

.prime {
  background: linear-gradient(135deg, #d50000 0%, #212121 100%);
  color: #fff;
}

/* Large counter badge gradient (used for Active farms count) */

html[data-theme='dark'] .bg-large {
  background: linear-gradient(135deg, #ff7e33, #ff5a1f) !important;
  color: #fff !important;
}

/* Zero / empty state gradient for badges or counters */
.hp-zero,
.hp-badge-zero {
  background: linear-gradient(135deg, #9e9e9e 0%, #616161 100%) !important;
  color: #fff !important;
}

/* Ensure all text inside cards is white for contrast */
.hp-package-card h5,
.hp-package-card .card-price,
.hp-package-card .card-desc,
.hp-package-card .card-features,
.hp-package-card .btn {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Mobile full-bleed tabs moved to centralized responsive block at bottom */

/* Card content */
.hp-package-card h5 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hp-package-card .card-price {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.5rem 0 1rem 0;
}

.hp-package-card .card-desc {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: #333;
}

.hp-package-card .card-features {
  font-size: 0.9rem;
  color: #444;
  margin-bottom: 1rem;
  padding-left: 0;
  list-style: none;
}

.hp-package-card .card-features li {
  margin-bottom: 0.3rem;
}

.hp-package-card .btn {
  margin-top: auto;
}

/* Carousel buttons */
.hp-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  color: #ff5a1f;
  z-index: 3;
  transition: background 0.2s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-carousel-btn:active {
  background: #ffe0b2;
}

.hp-carousel-prev {
  left: -20px;
}

/* Move arrows inside the container */
.hp-carousel-next {
  right: 0;
}

/* moved to centralized blocks */

.hp-package-card {
  transition:
    box-shadow 0.45s cubic-bezier(.77, 0, .18, 1),
    opacity 0.45s cubic-bezier(.77, 0, .18, 1),
    filter 0.45s cubic-bezier(.77, 0, .18, 1),
    transform 0.45s cubic-bezier(.77, 0, .18, 1),
    z-index 0.45s cubic-bezier(.77, 0, .18, 1),
    min-width 0.45s cubic-bezier(.77, 0, .18, 1),
    max-width 0.45s cubic-bezier(.77, 0, .18, 1),
    margin 0.45s cubic-bezier(.77, 0, .18, 1);
}

.hp-terms-content {
  font-size: 0.9rem;
  text-align: justify;
}

/* Bottom Mobile Nav */
@media (max-width: 768px) {
  .hp-bottom-nav {
    --hp-bnav-pt: .0rem;
    /* top padding, used to align accent */
    --hp-bnav-border: 0px;
    /* top border thickness */
    --hp-accent-w: 100%;
    /* width of the accent line for each item */
    border-bottom: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Glass base color is defined as a var for light/dark overrides */
    --hp-bnav-bg: rgba(255, 255, 255, .72);
    background: var(--hp-bnav-bg);
    -webkit-backdrop-filter: saturate(130%) blur(12px);
    backdrop-filter: saturate(130%) blur(12px);
    box-shadow: 0 -1px 0 rgba(255,255,255,.35) inset, 0 -8px 24px rgba(0,0,0,.06);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    overflow: visible; /* allow center notch to render */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    justify-items: center;
    padding: 0 .25rem calc(env(safe-area-inset-bottom) + .35rem) .25rem;
    z-index: 1040;
    /* No masks: using background radial-gradients for transparent notch */
  }

  /* Make each of the 5 items take equal space */
  .hp-bottom-nav>* {
    justify-self: stretch;
    position: relative;
    z-index: 1; /* keep items above notch */
  }

  .hp-bnav-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    color: var(--bs-secondary-color);
    /* gray for unselected */
    text-decoration: none;
    padding: .35rem .25rem;
    border-radius: .75rem;
    min-width: 52px;
    position: relative;
    width: 100%;
    background: transparent;
    /* ensure button variant has no background */
    border: none;
    /* remove default button border */
    cursor: pointer;
    /* consistent pointer like links */
  }

  .hp-bnav-item i {
    font-size: 1.65rem;
  }

  /* Show labels below icons */
  .hp-bnav-item>span:not(.hp-bell-wrap-mobile) {
    display: block;
    font-size: .75rem;
    line-height: 1;
    margin-top: .1rem;
    color: inherit;
  }

  /* Align center label baseline with others despite floating icon */
  .hp-bnav-center>span:not(.hp-bell-wrap-mobile) {
    margin-top: -10px;
  }

  /* Place unread badge at top-right corner of the bell icon */
  .hp-bell-wrap-mobile {
    position: relative;
    display: inline-block;
  }

  .hp-bell-badge-mobile {
    position: absolute;
    top: 3px;
    right: -8px;
    transform: none;
    font-size: .65rem;
    padding: .15rem .35rem;
  }

  /* Active state: theme orange and thin accent line above icon */
  .hp-bnav-item.active {
    color: #ff5a1f;
    background: transparent;
  }

  .hp-bottom-nav .hp-bnav-item.active:active,
  .hp-bottom-nav .hp-bnav-item.active:focus {
    color: #ff5a1f !important;
  }

  .hp-bottom-nav .hp-bnav-item.active:hover,
  .hp-bottom-nav .hp-bnav-item.active:visited {
    color: #ff5a1f !important;
  }

  .hp-bottom-nav .hp-bnav-item:active {
    color: inherit;
  }

  .hp-bottom-nav .hp-bnav-item.active i {
    color: currentColor !important;
  }

  .hp-bottom-nav .hp-bnav-item.active .hp-logo-circle .hp-logo-img {
    filter: none !important;
    opacity: 1 !important;
  }

  .hp-bnav-item.active::after {
    content: '';
    position: absolute;
    top: calc(var(--hp-bnav-pt) * -1 - var(--hp-bnav-border));
    /* sit just under the top border */
    left: 50%;
    width: var(--hp-accent-w);
    transform: translateX(-50%);
    height: 3px;
    border-radius: 2px;
    background: #ff5a1f;
    z-index: 1;
  }

  /* Dropdown-specific styles removed; Notifications now navigates to a page */
  /* Center item: floating circular action (lift icon only; keep label aligned with others) */
  .hp-bnav-center {
    background: transparent;
    border: none;
    padding: .35rem .25rem;
    border-radius: .75rem;
    z-index: 2;
    /* above bar */
  }

  /* Shared circular logo container for dashboard center button */
  .hp-logo-circle {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 3px solid currentColor;
    background: var(--bs-body-bg);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
    transform: translateY(-36px);
  transition: border-color .3s, filter .3s, color .3s, background-color .3s, transform .3s;
  will-change: transform;
    position: relative;
  }

  .hp-logo-circle .hp-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Dim and slightly blur when not active to match de-emphasized bottom nav state */
    filter: grayscale(100%) blur(1.1px) opacity(.45);
    transition: filter .3s, opacity .3s;
    display: block;
    margin: 0 auto;
  }

  /* Explicit centering enforcement (some devices mis-handle object-fit with SVG intrinsic sizing) */
  .hp-logo-circle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Active state handled by parent .active */
  .hp-bnav-item.active .hp-logo-circle {
    border-color: #ff5a1f;
  }

  .hp-bnav-item.active .hp-logo-circle .hp-logo-img {
    /* Fully crisp and opaque when active */
    filter: none;
    opacity: 1;
  }

  /* Inactive center item inherits secondary color (gray) */
  .hp-bnav-center {
    color: var(--bs-secondary-color);
  }

  .hp-bnav-center.active {
    color: #ff5a1f;
  }

  /* Adjust label offset due to circle lift */
  .hp-bnav-center>span:not(.hp-logo-circle):not(.hp-bell-wrap-mobile) {
    margin-top: -20px;
  }

  /* Hide the top accent line for center item; the ring is enough */
  .hp-bnav-center::after,
  .hp-bnav-center.active::after {
    display: none;
  }

  /* Ensure body has bottom padding so content isn't covered by nav */
}

/* moved to centralized mobile block */

/* Notifications button (desktop) ensure visible icon in both themes */
.hp-notif-btn {
  color: var(--bs-body-color) !important;
}

.hp-notif-btn .bi {
  color: inherit;
}

/* Badge pinned to bell icon corner (desktop) */
.hp-bell-wrap {
  line-height: 1;
}

.hp-bell-wrap .hp-bell-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  transform: none;
  font-size: .65rem;
  padding: .15rem .35rem;
}

/* (replaced by .hp-bell-badge-mobile rules in mobile media query) */

/* Active farms expanded modal (re-added) */
.hp-farms-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* keep vertical spacing but remove horizontal gutter so modals can use full width up to their max-width */
  padding: 2rem 0;
  z-index: 5000;
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}

.hp-farms-overlay.hp-show {
  opacity: 1;
  pointer-events: auto;
}

/* Ensure Bootstrap tooltips are above custom overlays/modals */
.tooltip.hp-tooltip {
  z-index: 10000 !important; /* above .hp-farms-overlay (5000) */
}
.tooltip.hp-tooltip .tooltip-inner {
  font-weight: 600;
}
@media (pointer: coarse) {
  /* improve touch target and keep tooltip clickable on mobile */
  .tooltip.hp-tooltip { pointer-events: auto; }
}

.hp-farms-modal {
  /* allow modal to grow to max-width but also respect viewport gutters */
  width: min(640px, calc(100% - 32px));
  max-width: 640px;
  /*max-height: 90vh;*/
  background: var(--bs-body-bg);
  border-radius: 28px;
  box-shadow: 0 18px 48px -8px rgba(0, 0, 0, .35), 0 4px 20px rgba(0, 0, 0, .15);
  position: relative;
  transform: translateY(20px) scale(.96);
  opacity: 0;
  transition: transform .38s cubic-bezier(.16, .8, .25, 1), opacity .38s ease;
}

.hp-farms-overlay.hp-show .hp-farms-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.hp-hm-close {
  position: absolute;
  top: 5px;
  right: 14px;
  border: none;
  background: transparent;
  z-index: 100;
  font-size: 1.7rem;
  padding: .15rem .35rem;
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: color .25s, opacity .25s, transform .18s;
  opacity: .85;
}

.hp-hm-close:hover {
  color: #fff;
  opacity: 1;
}

.hp-hm-close:active {
  transform: scale(.9);
}

.hp-hm-header {
  padding: 1rem;
  color: #fff;
  position: relative;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
}

.hp-hm-body {
  padding: 1rem 1.5rem;
  max-height: calc(90vh - 140px);
  overflow: auto;
}

.hp-hm-grid {
  display: grid;
  gap: .85rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 520px) {}

.hp-hm-metric {
  font-size: .9rem;
}

.hp-hm-metric b {
  font-size: 1.05rem;
}

.hp-hm-total {
  font-size: 2rem;
  font-weight: 800;
}

.hp-hm-total-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.hp-hm-total-row .totalmaturity-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Purchase modal transform row: always horizontal with center arrow */
.hp-purchase-modal .hp-transform-row {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: .85rem;
}

.hp-purchase-modal .hp-transform-row>div[aria-hidden] {
  flex: 0 0 auto;
}

.hp-purchase-modal .hp-transform-row>div:not([aria-hidden]) {
  flex: 1 1 0;
}

.hp-hm-claim-btn {
  background: linear-gradient(135deg, #ffb347 0%, #ff5a1f 100%);
  color: #fff;
  border: none;
  width: 100%;
  font-weight: 600;
  padding: .65rem 1.1rem;
  border-radius: 12px;
  box-shadow: 0 4px 14px -2px rgba(255, 90, 31, .45), 0 2px 6px rgba(0, 0, 0, .18);
  font-size: .95rem;
  letter-spacing: .5px;
  transition: box-shadow .25s, transform .25s, opacity .25s;
}

.hp-hm-claim-btn:hover:not(:disabled) {
  box-shadow: 0 6px 20px -2px rgba(255, 90, 31, .55), 0 4px 12px rgba(0, 0, 0, .22);
  transform: translateY(-2px);
}

.hp-hm-claim-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 14px -2px rgba(255, 90, 31, .45), 0 2px 6px rgba(0, 0, 0, .18);
}

.hp-hm-claim-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.hp-hm-claim-btn.is-claimed {
  background: linear-gradient(135deg, #999 0%, #666 100%);
}

/* moved to centralized mobile block */

/* Chick laying gif inside farm card */
.hp-farm-dates-wrap {
  position: absolute;
    position: absolute;
  /* vertical center on right*/
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}

.hp-farm-chick-gif {
  width: clamp(56px, 6vw + 36px, 72px);
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .15));
}

/* moved to centralized mobile block */

/* Tighter gutters for farms grid at large sizes for 4-up layout */
/* keep desktop gutters default; adjust in base if needed */

/* Claim toast (orangish gradient, above overlay) */
.hp-claim-toast {
  background: linear-gradient(135deg, #ffb347 0%, #ff5a1f 100%);
  color: #fff;
  padding-left: 10px;
}

.hp-claim-toast .toast-body {
  font-weight: 600;
}

.hp-claim-toast .btn-close {
  filter: invert(1) brightness(2);
  opacity: .9;
}

.hp-claim-toast .btn-close:hover {
  opacity: 1;
}

/* Mobile: make toast span modal width */
/* moved to centralized mobile block */

/* Center toasts horizontally on larger screens while keeping Bootstrap's
   default top-right placement on small screens. We target the custom
   toast container id `#hpToastContainer` used in `assets/js/app.js`. */
@media (min-width: 992px) {
  #hpToastContainer {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    top: 1rem; /* keep near the top */
    width: auto;
    max-width: 80%;
    pointer-events: none; /* keep Bootstrap behavior */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1091; /* above many UI layers */
  }
  /* Make individual toasts still be pointer-interactive inside the container */
  #hpToastContainer .toast {
    pointer-events: auto;
    margin-left: 0; /* reset any RTL spacing */
  }
}

/* Flash maturity date when attempting early claim */
@keyframes hpFlashOrange {

  0%,
  100% {
    color: inherit;
  }

  20%,
  40%,
  60% {
    color: #ff5a1f;
  }

  100% {
    color: inherit;
  }
}

.hp-flash-orange {
  animation: hpFlashOrange 1.2s alternate;
}

/* moved to centralized mobile block */

/* Prevent body content horizontal shift when Bootstrap modals open (scrollbar compensation) */
body.modal-open {
  padding-right: var(--hp-scrollbar-width, 0) !important;
  ;
}

@supports (scrollbar-gutter:stable) {

  body.modal-open {
    padding-right: 0 !important;
  }
}

/* Dashboard compact stats band */
.hp-stats-band {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);
  position: relative;
}

/* Claimed farms */
.hp-claimed-card {
  position: relative;
  filter: grayscale(1) saturate(.3) brightness(.85);
  opacity: .75;
  transition: filter .4s, opacity .4s, transform .45s cubic-bezier(.77, 0, .25, 1);
}

.hp-claimed-card:hover {
  filter: grayscale(.85) saturate(.5) brightness(.9);
  opacity: .85;
}

.hp-claimed-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: .6rem;
  letter-spacing: .05em;
  padding: 4px 6px;
  border-radius: 6px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.hp-claimed-card .hp-farm-chick-gif {
  display: none !important;
}

.hp-claimed-card .hp-claimed-icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25));
}

.hp-claim-move-enter {
  animation: hpClaimMove .55s cubic-bezier(.77, 0, .25, 1);
}

/* Purchase Modal Header Enhancements */
#hpPurchaseModal .modal-content {
  overflow: hidden;
}

#hpPurchaseHeader {
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  border-bottom: 0;
  position: relative;
}

#hpPurchaseHeader .hp-hens-input {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, .55);
  color: #fff;
  box-shadow: none;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}

#hpPurchaseHeader .hp-hens-input:focus {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
}

#hpPurchaseHeader .hp-hens-input::-webkit-inner-spin-button,
#hpPurchaseHeader .hp-hens-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#hpPurchaseHeader .hp-hens-input[type=number] {
  -moz-appearance: textfield;
  appearance: none;
}

#hpPurchaseHeader .hp-hens-input::placeholder {
  color: rgba(255, 255, 255, .6);
}

#hpPurchaseHeader label.form-label {
  color: #fff;
  text-transform: none;
  font-weight: 600;
}

#hpPurchaseHeader .form-text {
  color: rgba(255, 255, 255, .85);
}

#hpPurchaseHeader .btn-close {
  filter: invert(1) brightness(2);
  opacity: .85;
}

#hpPurchaseHeader .btn-close:hover {
  opacity: 1;
}

@keyframes hpClaimMove {
  0% {
    transform: translateY(14px);
    opacity: 0;
  }

  60% {
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Subtle glowing effect for the dashboard "Purchase new farm" button (+) */
.plusbutton {
  position: relative;
  z-index: 0;
  /* soft orange glow using theme accent */
  box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.45), 0 0 14px 4px rgba(255, 90, 31, 0.22);
  animation: hpBtnGlow 2.4s ease-in-out infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#purchasefarmBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(255, 90, 31, 0.55), 0 0 20px 8px rgba(255, 90, 31, 0.35);
}

#purchasefarmBtn:active {
  transform: translateY(0);
}

#purchasefarmBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.55), 0 0 0 7px rgba(255, 90, 31, 0.18);
}

@keyframes hpBtnGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.45), 0 0 14px 4px rgba(255, 90, 31, 0.22);
    filter: saturate(1);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(255, 90, 31, 0.55), 0 0 24px 10px rgba(255, 90, 31, 0.35);
    filter: saturate(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  #purchasefarmBtn { animation: none !important; }
}

/* Smooth lift collapse for original card removal */
.hp-farm-card.hp-moving-out {
  transition: transform .45s cubic-bezier(.77, 0, .25, 1), opacity .35s;
  opacity: 0;
  transform: translateY(-12px);
}

/* New smoother transform-based collapse (avoids layout thrash from height animation) */
.hp-farm-col-out {
  animation: hpfarmOut .42s cubic-bezier(.77, 0, .25, 1) forwards;
  will-change: transform, opacity;
}

@keyframes hpfarmOut {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  55% {
    opacity: .55;
  }

  100% {
    opacity: 0;
    transform: scale(.88) translateY(-10px);
  }
}

/* Hint browser for better perf on frequently animated cards */
.hp-farm-card {
  will-change: transform, opacity;
}

.hp-flip-move {
  transition: transform .45s cubic-bezier(.77, 0, .25, 1);
  will-change: transform;
}

/* Claimed farms toggle (artsy switch) */
.hp-claimed-toggle {
  position: relative;
  display: inline-flex;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hp-claimed-toggle:focus {
  outline: none;
  box-shadow: none;
}

.hp-claimed-toggle:focus-visible .hp-ct-track {
  box-shadow: 0 0 0 3px rgba(255, 140, 64, .55), 0 2px 6px rgba(0, 0, 0, .25);
}

.hp-claimed-toggle .hp-ct-track {
  position: relative;
  width: 108px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e2e5e8 0%, #cfd4d9 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 2px 6px rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 6px;
  transition: background .55s, box-shadow .45s;
  font-family: inherit;
}

.hp-claimed-toggle .hp-ct-label {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 700;
  font-size: .55rem;
  letter-spacing: .18em;
  line-height: 0.60rem;
  color: #6a727a;
  opacity: .85;
  transition: color .5s, opacity .5s, filter .5s, padding .55s cubic-bezier(.77, 0, .25, 1);
  pointer-events: none;
  padding-left: 34px;
  padding-right: 4px;
  width: 100%;
}

.hp-claimed-toggle[aria-checked="false"] .hp-ct-label {
  opacity: .55;
}

.hp-claimed-toggle .hp-ct-knob {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .12);
  transition: transform .6s cubic-bezier(.77, 0, .25, 1), background .45s, color .45s, box-shadow .45s;
  color: #ff7a25;
  position: absolute;
  left: 4px;
  top: 4px;
}

.hp-claimed-toggle .hp-ct-knob i {
  position: absolute;
  font-size: 1rem;
  transition: opacity .45s, transform .55s cubic-bezier(.77, 0, .25, 1);
}


/* Stake modal term slider styling (orange accent + left-fill) */
#hpSTermSlider.form-range {
  height: 0.75rem;
  background-color: transparent; /* JS sets gradient fill inline */
}

#hpSTermSlider.form-range:focus { outline: none; }

/* WebKit/Blink */
#hpSTermSlider.form-range::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--hp-slider-fill, rgba(108,117,125,.25)); /* JS sets gradient; clipped by track radius */
  border-radius: 999px; /* fully rounded ends */
}
#hpSTermSlider.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #ff5a1f;
  border: 0;
  border-radius: 50%;
  margin-top: -6px; /* center the thumb on 6px track */
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.18);
}
#hpSTermSlider.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px rgba(255, 90, 31, 0.22);
}

/* Firefox */
#hpSTermSlider.form-range::-moz-range-track {
  height: 6px;
  background: rgba(108,117,125,.25); /* remainder */
  border-radius: 999px;
}
#hpSTermSlider.form-range::-moz-range-progress {
  height: 6px;
  background: #ff5a1f; /* left fill */
  border-radius: 999px;
}
#hpSTermSlider.form-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #ff5a1f;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.18);
}
#hpSTermSlider.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 6px rgba(255, 90, 31, 0.22);
}
.hp-claimed-toggle .hp-ct-knob i.bi-inbox {
  opacity: 1;
  transform: translateY(0);
}

.hp-claimed-toggle .hp-ct-knob i.bi-check2 {
  opacity: 0;
  transform: translateY(8px) scale(.7);
}

.hp-claimed-toggle[aria-checked="true"] .hp-ct-track {
  background: linear-gradient(135deg, #ffbf73 0%, #ff7e33 45%, #ff5a1f 100%);
  box-shadow: 0 6px 18px -4px rgba(255, 90, 31, .35), 0 3px 8px rgba(0, 0, 0, .18);
}

.hp-claimed-toggle[aria-checked="true"] .hp-ct-label {
  color: #ffffff;
  opacity: .95;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
  padding-left: 4px;
  padding-right: 34px;
}

.hp-claimed-toggle[aria-checked="true"] .hp-ct-knob {
  transform: translateX(69px) rotate(32deg);
  background: #fff3ea;
  color: #ff5a1f;
  box-shadow: 0 6px 16px -4px rgba(255, 90, 31, .45), 0 3px 8px rgba(0, 0, 0, .2);
}

.hp-claimed-toggle[aria-checked="true"] .hp-ct-knob i.bi-inbox {
  opacity: 0;
  transform: translateY(-8px) scale(.6);
}

.hp-claimed-toggle[aria-checked="true"] .hp-ct-knob i.bi-check2 {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion:reduce) {

  .hp-claimed-toggle,
  .hp-claimed-toggle .hp-ct-knob,
  .hp-claimed-toggle .hp-ct-knob i {
    transition: none !important;
  }
}

html[data-theme='dark'] .hp-claimed-toggle .hp-ct-track {
  background: linear-gradient(135deg, #2d3236 0%, #3a4045 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 2px 6px rgba(0, 0, 0, .6);
}

html[data-theme='dark'] .hp-claimed-toggle .hp-ct-label {
  color: #b4bcc4;
}

html[data-theme='dark'] .hp-claimed-toggle .hp-ct-knob {
  background: #1c2023;
  color: #ff9d55;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .6), 0 2px 4px rgba(0, 0, 0, .45);
}

html[data-theme='dark'] .hp-claimed-toggle[aria-checked="true"] .hp-ct-track {
  background: linear-gradient(135deg, #8a4a11 0%, #c24c15 45%, #ff5a1f 100%);
  box-shadow: 0 6px 20px -6px rgba(255, 90, 31, .5), 0 3px 10px rgba(0, 0, 0, .55);
}

html[data-theme='dark'] .hp-claimed-toggle[aria-checked="true"] .hp-ct-knob {
  background: #291e17;
  color: #ff7e33;
}

html[data-theme='dark'] .hp-claimed-card {
  filter: grayscale(1) saturate(.25) brightness(.7);
}

html[data-theme='dark'] .hp-claimed-badge {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* Light mode explicit overrides */
.hp-stats-band .hp-stat-label {
  color: #4d5560;
  opacity: .75;
}

.hp-stats-band .hp-stat-value {
  color: #111;
}

.hp-stat-item {
  flex: 1 1 0;
  padding: 1rem 0rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.hp-stat-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  opacity: .7;
}

.hp-stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}


.hp-stat-sep {
  display: none !important;
}

/* Center text inside stat items */
.hp-stats-band .hp-stat-item {
  text-align: center;
}

/* Mobile 2-column grid: left column shows farms (items 1-4), right column shows stakes (items 5-8) */
@media (max-width:640px) {
  .hp-stats-mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Place items by column so 1-4 stack left, 5-8 stack right */
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    column-gap: 1rem;
  }

  .hp-stats-mobile-grid .hp-stat-item {
    border: 0;
    padding: 0.5rem 0;
    position: relative;
  }

  /* Optional subtle divider between left and right columns */
  .hp-stats-mobile-grid::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 1px;
    background: rgba(0,0,0,.06);
  }
}

@media (max-width: 640px) {
  .hp-stats-band {
    flex-direction: column;
  }

  .hp-stat-item+.hp-stat-item {
    border-top: none;
  }

  .hp-stat-value {
    font-size: 1.1rem;
  }
}

/* Quick interaction bar removed */

/* Mini panels */
.hp-mini-panel {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 18px;
  padding: 1rem 1rem 0.9rem;
  box-shadow: 0 3px 10px -4px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);
  display: flex;
  flex-direction: column;
}

.hp-mini-panel .hp-mini-title {
  color: #4d5560;
}

.hp-mini-panel .hp-mini-header {
  color: #111;
}

.hp-mini-header {
  font-weight: 600;
  font-size: .9rem;
}

.hp-mini-title {
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: .65rem;
  opacity: .7;
}

.hp-next-maturities li {
  display: flex;
  justify-content: space-between;
  padding: .25rem 0;
  border-bottom: 1px dashed rgba(0, 0, 0, .08);
}

.hp-next-maturities li:last-child {
  border-bottom: none;
}

.hp-tier-grid {
  display: flex;
  gap: .5rem;
  flex-wrap: nowrap;
  width: 100%;
}

.hp-tier {
  position: relative;
  padding: .55rem .4rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 10px;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  min-width: 0;
  flex: 1 1 0;
  text-align: center;
  transition: .25s;
  color: #222;
}

.hp-tier-locked {
  background: rgba(245, 246, 248, .85);
  color: #333;
}

/* Improve network rank contrast - remove global opacity dimming */

@media (max-width: 520px) {
  .hp-tier-grid {
    flex-wrap: wrap;
  }

  .hp-tier {
    flex: 1 1 calc(33.33% - .5rem);
  }
}

.hp-tier-active {
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* Removed opacity dimming to keep labels legible */

.hp-tier-achieved {
  border-style: solid;
}

.hp-tier-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ff5a1f;
  color: #fff;
  font-size: .55rem;
  padding: 2px 4px;
  border-radius: 6px;
  font-weight: 700;
}

.hp-tier-grid .hp-tier:not(.hp-tier-active):hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

/* Tier legend removed */
#hpTierLegend .legend-swatch.achieved {
  box-shadow: inset 0 0 0 2px #ffb347;
}

/* Tier gradient mappings removed; using existing .egg .chick .broiler .layer .golden .prime classes */
#hpTierLegend .legend-swatch.achieved {
  box-shadow: inset 0 0 0 2px #ffb347;
}

#hpLargestfarmWrap {
  opacity: .75;
}

/* === Dark Mode Enhancements (appended to ensure precedence) === */

html[data-theme='dark'] .hp-stats-band {
  background: rgba(26, 28, 32, .92);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 6px 26px -10px rgba(0, 0, 0, .75), 0 2px 8px rgba(0, 0, 0, .55);
}

html[data-theme='dark'] .hp-stats-band .hp-stat-label {
  color: #c9ced4;
  opacity: .8;
}

html[data-theme='dark'] .hp-stats-band .hp-stat-value {
  color: #f5f8fa;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

html[data-theme='dark'] .hp-stat-sep {
  background: linear-gradient(to bottom, rgba(255, 255, 255, .05), rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
}

html[data-theme='dark'] .hp-mini-panel {
  background: rgba(20, 23, 27, .9);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .55);
}

html[data-theme='dark'] .hp-mini-panel .hp-mini-title {
  color: #c2c8cf;
}

html[data-theme='dark'] .hp-mini-panel .hp-mini-header {
  color: #f2f5f8;
}

html[data-theme='dark'] .hp-tier-locked {
  background: rgba(255, 255, 255, .07);
  color: #d3d9df;
  border-color: rgba(255, 255, 255, .15);
}

html[data-theme='dark'] .hp-tier {
  border-color: rgba(255, 255, 255, .18);
  color: #d5d9df;
}

/* Dark mode: keep icon simple too */
html[data-theme='dark'] .icon-fill { filter: none; }
.hp-member-modal-ov .hp-member-img-wrap {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hp-member-modal-ov .hp-rank-icon.xl {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}


.hp-member-modal-ov .hp-rank-icon.xl img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.hp-member-modal-ov .hp-member-title {
  margin-top: 70px;
}

.hp-member-modal-ov .hp-member-meta .hp-meta-box {
  background: var(--bs-body-bg);
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 16px;
  padding: .9rem .95rem .95rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .15);
}

html[data-theme='dark'] .hp-member-modal-ov .hp-member-meta .hp-meta-box {
  background: #101826;
  border-color: rgba(255, 255, 255, .08);
}

/* Light mode contrast fix: parent gradient sets white text globally; force dark readable text inside neutral meta boxes */
html[data-theme='light'] .hp-member-modal-ov .hp-member-meta .hp-meta-box {
  color: #1d2733;
}

html[data-theme='light'] .hp-member-modal-ov .hp-member-meta .hp-meta-box .label {
  color: #4a5563;
  opacity: .85;
}

html[data-theme='light'] .hp-member-modal-ov .hp-member-meta .hp-meta-box .value {
  color: #111;
  text-shadow: none;
}

html[data-theme='light'] .hp-member-modal-ov .hp-member-meta .hp-meta-box .value {
  color: #111;
  text-shadow: none;
}

.hp-member-modal-ov .hp-meta-box .label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 600;
  opacity: .8;
}

.hp-member-modal-ov .hp-meta-box .value {
  font-size: 1rem;
  line-height: 1.1;
  font-weight: 700;
}

.hp-member-modal-ov .hp-section-heading {
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: .55rem;
  opacity: .75;
  color: #111;
}

.hp-member-modal-ov .hp-farms-list,
.hp-member-modal-ov .hp-invites-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.hp-member-modal-ov .hp-farm-card.hp-full {
  width: 100%;
  border-radius: 18px;
}

/* Placeholder (empty state) styling for farms & invites in member modal */
.hp-member-modal-ov .hp-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 86px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .08) 6px, rgba(255, 255, 255, .04) 6px, rgba(255, 255, 255, .04) 12px);
  border: 1px dashed rgba(255, 255, 255, .25);
  box-shadow: none !important;
  opacity: .55;
  text-align: center;
}

html[data-theme='light'] .hp-member-modal-ov .hp-placeholder {
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .04) 6px, rgba(0, 0, 0, .02) 6px, rgba(0, 0, 0, .02) 12px);
  border-color: rgba(0, 0, 0, .15);
}

.hp-member-modal-ov .hp-placeholder .hp-ph-inner {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

html[data-theme='light'] .hp-member-modal-ov .hp-placeholder .hp-ph-inner {
  color: #555;
}


.hp-member-modal-ov .hp-member-mini.hp-full {
  width: 100%;
}

.hp-member-modal-ov .hp-member-mini .tiny {
  color: rgba(255, 255, 255, .92);
}

html[data-theme='light'] .hp-member-modal-ov .hp-member-mini .tiny {
  color: var(--bs-secondary-bg);
}

.hp-member-modal-ov .hp-member-mini {
  display: flex;
  align-items: center;
  padding: .65rem .8rem .6rem;
  border-radius: 18px;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .35);
}

.hp-member-modal-ov .hp-member-mini .badge {
  font-size: .65rem;
  font-weight: 600;
}

.hp-member-modal-ov .hp-member-mini .tiny {
  font-size: .75rem;
}

/* Improved contrast */
.hp-member-modal-ov .hp-member-mini,
.hp-member-modal-ov .hp-member-mini .fw-semibold {
  color: #fff;

}

.hp-member-modal-ov .hp-member-mini .badge {
  background: rgba(255, 255, 255, .9) !important;
  color: #222 !important;
  border: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.hp-member-modal-ov .hp-hm-body {
  padding: 1.5rem 1.6rem 3rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

html[data-theme='dark'] .hp-member-modal-ov .hp-hm-body {
  scrollbar-color: rgba(255, 255, 255, .35) transparent;
}

@supports selector(::-webkit-scrollbar) {
  .hp-member-modal-ov .hp-hm-body::-webkit-scrollbar {
    width: 8px;
  }

  .hp-member-modal-ov .hp-hm-body::-webkit-scrollbar-track {
    background: transparent;
  }

  .hp-member-modal-ov .hp-hm-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .25);
    border-radius: 6px;
  }

  html[data-theme='dark'] .hp-member-modal-ov .hp-hm-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .25);
  }
}

@media (min-width:768px) {
  .hp-member-modal-ov .hp-hm-body {
    padding: 2.75rem 2.2rem 2.4rem;
  }

  .hp-member-modal-ov .hp-member-meta .hp-meta-box .value {
    font-size: 1.05rem;
  }
}

.hp-member-modal-ov .hp-farm-card .hens {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .55);
}

.hp-member-modal-ov .hp-farm-card .dates {
  font-size: .70rem;
  opacity: 1;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

html[data-theme='dark'] .hp-member-modal-ov .hp-farm-card .dates {
  opacity: .9;
}

html[data-theme='dark'] .hp-member-modal-ov .hp-section-heading {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .35);
}

.hp-member-modal-ov .hp-hm-header,
.hp-member-modal-ov .hp-hm-header h5,
.hp-member-modal-ov .hp-hm-header .small {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .35);
}

.hp-pw-mismatch {
  color: #e24d15;
  font-size: .98rem;
  margin-bottom: .5rem;
  text-align: left;
  min-height: 1.2em;
}

.hp-pw-strength-bar {
  height: 6px;
  padding-left: 10px;
  border-radius: 3px;
  margin-bottom: 6px;
  transition: width 0.2s, background 0.2s, opacity 0.25s, transform 0.25s;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  display: none;
}

.hp-pw-strength-label {
  font-size: 1rem;
  padding-left: 10px;
  font-weight: 500;
  margin-bottom: 2px;
  transition: opacity 0.25s, transform 0.25s;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  display: none;
}

.hp-pw-req-list {
  list-style: none;
  padding-left: 10px;
  margin-bottom: 16px;
  font-size: .97rem;
  transition: opacity 0.25s, transform 0.25s;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  display: none;
}

.hp-pw-req-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.hp-pw-req-list .bi {
  font-size: .80rem;
}

.hp-pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #888;
}

.hp-pw-toggle.active {
  color: #ff5a1f;
}

.hp-pw-match-icon {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1em;
}

.hp-pw-enhancer-show {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  display: block !important;
}

.form-check-input:checked {
  border-color: #ff5a1f;
  background-color: #ff5a1f;
  box-shadow: 0 0 0 0.25rem rgba(255, 90, 31, .25);
}

/* --- Animation performance improvements for mobile --- */
@media (max-width: 767.98px) {
  .hp-select-menu,
  .hp-farms-modal,
  .hp-member-card,
  .hp-farms-overlay {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: opacity 0.18s cubic-bezier(.4,0,.2,1), transform 0.18s cubic-bezier(.4,0,.2,1);
  }
  .hp-farms-modal,
  .hp-farms-overlay {
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    filter: none !important;
  }
  .hp-member-card {
    transition: box-shadow 0.15s, transform 0.18s cubic-bezier(.4,0,.2,1), opacity 0.18s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  }
  .hp-ripple {
    will-change: transform, opacity;
    transition: opacity 0.18s, transform 0.18s;
  }
}

/* Reduce blur and shadow for overlays on mobile for performance */
@media (max-width: 767.98px) {
  .hp-farms-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0,0,0,0.18) !important;
  }
}

/* Reduce transition duration for dropdowns and overlays */
.hp-select-menu,
.hp-farms-modal,
.hp-farms-overlay {
  transition-duration: 0.18s !important;
}

/* ==================================================================
   Centralized Responsive Blocks
   - Mobile:  <= 767.98px
   - Tablet:  768px–1024px
   Desktop (>=1025px) uses base styles without media queries.
   NOTE: These centralized blocks override earlier scattered queries.
   ================================================================== */

/* Mobile (<= 767.98px) */
@media (max-width: 767.98px) {

  main {
    margin-bottom: 100px;
  }


  /* Full-bleed main tabs and tab content */
  #hpMainTabs,
  #hpMainTabsContent {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* Divide main tabs into 3 equal spaces */
  #hpMainTabs {
    display: flex;
    position: relative;
    border-bottom: 1px solid #dee2e6;
  }
  #hpMainTabs .nav-item {
    flex: 1 1 33.3333%;
    max-width: 33.3333%;
    text-align: center;
  }
  #hpMainTabs .nav-link {
    width: 100%;
    border-radius: 0;
    font-size: 1rem;
    padding: 0.75rem 0.25rem;
  }

  /* KPI tighter gutters on mobile */
  .hp-main .row.g-3 > [class*='col-'] { padding-left: .4rem; padding-right: .4rem; }
  .hp-main .row.g-3 { --bs-gutter-x: .6rem; --bs-gutter-y: .6rem; }

  /* Ensure farm lists auto height */
  .hp-farms, #hpfarms, .hp-farms-list, .hp-hm-body { height: auto !important; }

  /* Filters compact styles */
  .hp-filters { width: 100%; row-gap: .4rem; }
  .hp-rank-filter, .hp-sort-filter { flex: 1 1 0; min-width: 0; display: flex; }
  .hp-rank-filter .hp-input, .hp-sort-filter .hp-input { font-size: .7rem; padding: .3rem .45rem .3rem 1.85rem; line-height: 1.1; }
  #hpRankBtn span, #hpSortBtn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }

  /* Stats grid tweaks (from 640px rules) */
  .hp-stats-band { flex-direction: column; }
  .hp-stats-mobile-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
  .hp-stats-mobile-grid .hp-stat-item { border: 0; padding: 0.5rem 0; position: relative; }
  .hp-stats-value { font-size: 1.35rem; }

  /* Tier grid wrap behavior (from 520px) */
  .hp-tier-grid { flex-wrap: wrap; }
  .hp-tier { flex: 1 1 calc(33.33% - .5rem); }

  /* Placeholder cards */
  .hp-placeholder-card .hp-ph-image { max-height: 90px; }

  /* Members grid on mobile: 1 column */
  .hp-members-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  /* Farms grid on mobile: 1 column */
  .hp-farms-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }

  /* Invites grid on mobile: 1 column */
  .hp-invites-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }

  /* Filters mobile adjustments */
  .hp-filters .ms-auto { margin-left: 0 !important; width: 100%; justify-content: center; }
  .hp-filters .ms-auto>* { margin-left: 0 !important; }
  .hp-filters .hp-view-toggle { justify-content: center; }
  #hpThemeToggle { margin-left: .5rem; }
  .hp-filters .hp-input-wrap { width: 100%; }

  /* Profile hero sizing on mobile */
  .hp-profile-hero { height: 220px; }
  .hp-avatar-circle { width: 112px; height: 112px; }
  .hp-profile-name { margin-top: 20px; font-size: 1.35rem; }

  /* Package carousel (mobile) */
  .hp-package-carousel { min-height: 260px; max-width: 100vw; overflow-x: visible; padding-left: 0; padding-right: 0; }
  .hp-carousel-track { min-width: 100vw; gap: 0; justify-content: center; align-items: flex-end; position: relative; }
  .hp-package-card { min-width: 40vw; max-width: 45vw; height: auto; padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; word-break: break-word; text-align: center; overflow-wrap: break-word; margin: 0 -12vw; z-index: 1; }
  .hp-package-card.selected { min-width: 50vw; max-width: 55vw; transform: scale(1.15) translateY(-18px); opacity: 1; z-index: 3; box-shadow: 0 0 32px 8px rgba(255, 90, 31, 0.25), 0 4px 32px rgba(255, 90, 31, 0.10); border: 3px solid #ff5a1f; margin: 0 auto; }
  .hp-package_card h5, .hp-package-card .card-price, .hp-package_card .card-desc, .hp-package-card .card-features, .hp-package-card .btn { text-align: center; width: 100%; white-space: normal; }
  .hp-package-card .card-features { padding-left: 0; margin-bottom: 1rem; }
  .hp-carousel-btn { display: none; }
  /* Mobile: selected card is bigger and above */
  .hp-carousel-track { align-items: flex-end; }
  .hp-package-card { transform: scale(0.85); opacity: 0.5; margin-bottom: 0; }
  .hp-package-card.selected { transform: scale(1.15) translateY(-18px); opacity: 1; z-index: 2; box-shadow: 0 0 32px 8px rgba(255, 90, 31, 0.25), 0 4px 32px rgba(255, 90, 31, 0.10); border: 3px solid #ff5a1f; }

  /* Members table truncation width on mobile */
  .hp-members-table td .fw-semibold.text-truncate { max-width: 120px; }

  /* Register page layout on mobile/tablet */
  .hp-register-container { flex-direction: column; max-width: 100vw; border-radius: 0; height: 100vh; }
  .hp-register-left, .hp-register-right { border-radius: 0; min-width: 100vw; max-width: 100vw; padding: 1.5rem 1.5rem; }
  .hp-register-left { max-height: 30vh; }
  .hp-register-form-card h2 { font-size: 1.2rem; }
  .hp-register-left h1 { font-size: 1.3rem; }

  /* Bottom Mobile Nav (migrated) */
  .hp-bottom-nav {
    --hp-bnav-pt: .0rem; /* top padding, used to align accent */
    --hp-bnav-border: 0px; /* top border thickness */
    --hp-accent-w: 100%; /* width of the accent line for each item */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Glass base color is defined as a var for light/dark overrides */
    --hp-bnav-bg: rgba(255, 255, 255, .72);
    background: var(--hp-bnav-bg);
    -webkit-backdrop-filter: saturate(130%) blur(12px);
    backdrop-filter: saturate(130%) blur(12px);
    box-shadow: 0 -1px 0 rgba(255,255,255,.35) inset, 0 -8px 24px rgba(0,0,0,.06);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    overflow: visible; /* allow center notch to render */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    justify-items: center;
    padding: 0 .25rem calc(env(safe-area-inset-bottom) + .35rem) .25rem;
    z-index: 1040;
  }

  /* Make each of the 5 items take equal space */
  .hp-bottom-nav > * {
    justify-self: stretch;
    position: relative;
    z-index: 1; /* keep items above notch */
  }

  .hp-bnav-item { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; color: var(--bs-secondary-color); text-decoration: none; padding: .35rem .25rem; border-radius: .75rem; min-width: 52px; position: relative; width: 100%; background: transparent; border: none; cursor: pointer; }
  .hp-bnav-item i { font-size: 1.65rem; }
  .hp-bnav-item > span:not(.hp-bell-wrap-mobile) { display: block; font-size: .75rem; line-height: 1; margin-top: .1rem; color: inherit; }
  .hp-bnav-center > span:not(.hp-bell-wrap-mobile) { margin-top: -10px; }

  .hp-bell-wrap-mobile { position: relative; display: inline-block; }
  .hp-bell-badge-mobile { position: absolute; top: 3px; right: -8px; transform: none; font-size: .65rem; padding: .15rem .35rem; }

  .hp-bnav-item.active { color: #ff5a1f; background: transparent; }
  .hp-bottom-nav .hp-bnav-item.active:active,
  .hp-bottom-nav .hp-bnav-item.active:focus { color: #ff5a1f !important; }
  .hp-bottom-nav .hp-bnav-item.active:hover,
  .hp-bottom-nav .hp-bnav-item.active:visited { color: #ff5a1f !important; }
  .hp-bottom-nav .hp-bnav-item:active { color: inherit; }
  .hp-bottom-nav .hp-bnav-item.active i { color: currentColor !important; }
  .hp-bottom-nav .hp-bnav-item.active .hp-logo-circle .hp-logo-img { filter: none !important; opacity: 1 !important; }
  .hp-bnav-item.active::after { content: ''; position: absolute; top: calc(var(--hp-bnav-pt) * -1 - var(--hp-bnav-border)); left: 50%; width: var(--hp-accent-w); transform: translateX(-50%); height: 3px; border-radius: 2px; background: #ff5a1f; z-index: 1; }

  .hp-bnav-center { background: transparent; border: none; padding: .35rem .25rem; border-radius: .75rem; z-index: 2; }
  .hp-logo-circle { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; border: 3px solid currentColor; background: var(--bs-body-bg); box-shadow: 0 10px 22px rgba(0, 0, 0, .16); transform: translateY(-36px); transition: border-color .3s, filter .3s, color .3s, background-color .3s; position: relative; }
  .hp-logo-circle .hp-logo-img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(100%) opacity(.55); transition: filter .3s, opacity .3s; display: block; margin: 0 auto; }
  .hp-logo-circle { display: flex; align-items: center; justify-content: center; }
  .hp-bnav-item.active .hp-logo-circle { border-color: #ff5a1f; }
  .hp-bnav-item.active .hp-logo-circle .hp-logo-img { filter: none; opacity: 1; }
  .hp-bnav-center { color: var(--bs-secondary-color); }
  .hp-bnav-center.active { color: #ff5a1f; }
  .hp-bnav-center > span:not(.hp-logo-circle):not(.hp-bell-wrap-mobile) { margin-top: -20px; }
  .hp-bnav-center::after, .hp-bnav-center.active::after { display: none; }

  /* Dark theme overrides for bottom nav */
  html[data-theme='dark'] .hp-bottom-nav { --hp-bnav-bg: rgba(20, 22, 27, .50); border-top: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 -1px 0 rgba(255,255,255,.08) inset, 0 -8px 24px rgba(0,0,0,.5); }
  html[data-theme='dark'] .hp-bottom-nav::before,
  html[data-theme='dark'] .hp-bottom-nav::after { content: none !important; display: none !important; }
}
/* Mobile bottom-sheet modal styles (use existing mobile breakpoint) */
@media (max-width: 767.98px) {
  :root { --hp-modal-peek: 56px; }
  .hp-farmyard {
    margin-bottom: -60px;
  }

  /* Custom overlays */
  .hp-farms-overlay { align-items: flex-end; justify-content: stretch; padding: 0 !important; background: rgba(0,0,0,.55) !important; }
  .hp-farms-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: calc(100svh - var(--hp-modal-peek));
    height: auto;
    margin: 0 !important;
    border-top-left-radius: 28px; border-top-right-radius: 28px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    transform: translateY(100%) !important; opacity: 1 !important; transition: transform .35s cubic-bezier(.22,.75,.25,1) !important;
    display: flex; flex-direction: column;
  }
  .hp-farms-overlay.hp-show .hp-farms-modal { transform: translateY(0) !important; }
  .hp-hm-header { position: sticky; top: 0; z-index: 2; }
  .hp-hm-body { flex: 1 1 auto; max-height: none !important; overflow: auto; }
  .hp-farms-modal .hp-hm-actions { position: sticky; bottom: 0; left: 0; right: 0; z-index: 3; background: var(--bs-body-bg); padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(0,0,0,.1); }
  .hp-farms-modal .hp-hm-actions .btn { width: 100%; }
  .hp-farms-modal .hp-hm-body > .btn,
  .hp-farms-modal .hp-hm-body > .btn-primary,
  .hp-farms-modal .hp-hm-body .hp-hm-claim-btn,
  .hp-farms-modal .hp-hm-body .hp-btn-orange,
  .hp-farms-modal .hp-hm-body .hp-btn-green {

    position: sticky; bottom: 0; z-index: 2; display: block; width: 100%; margin-left: 0; margin-right: 0;
   border-radius: 12px;
  }
  /* Bootstrap modal compatibility */
  .modal { padding: 0 !important; }
  .modal-dialog { margin: 0 !important; max-width: 100% !important; width: 100vw !important; max-height: calc(100svh - var(--hp-modal-peek)); height: auto; transform: translateY(100%); transition: transform .35s cubic-bezier(.22,.75,.25,1); display: flex; align-items: stretch; }
  .modal.show .modal-dialog { transform: translateY(0); }
  .modal-content { border-radius: 18px 18px 0 0; height: 100%; display: flex; flex-direction: column; }
  .modal-header { position: sticky; top: 0; z-index: 2; }
  .modal-body { flex: 1 1 auto; overflow: auto; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .modal-footer { position: sticky; bottom: 0; z-index: 2; background: var(--bs-body-bg); box-shadow: 0 -6px 18px rgba(0,0,0,.1); }

  /* Withdraw modal: fixed white action footer on mobile
     - Pin the .fixedbottom wrapper to the viewport bottom (inside withdraw modal)
     - Give it a white background/surface so disabled state doesn't show content underneath
     - Add extra bottom padding to the withdraw modal body so scrollable content is not hidden
  */
  .hp-withdraw-modal .fixedbottom {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 0;
    z-index: 6002; /* above modal content but below global overlays if any */
    background: var(--bs-body-bg);
    border-radius: 12px;
    padding: 20px 8px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Ensure the button inside the fixed container is full-width and retains the green gradient */
  .hp-withdraw-modal .fixedbottom .hp-btn-green,
  .hp-withdraw-modal .fixedbottom button {
    width: 100%;
    display: block;
    border-radius: 10px;
  }

  /* Give the withdraw modal body extra bottom space so content can scroll above the fixed footer */
  .hp-withdraw-modal #hpWdrEmbeddedHistory {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

}
/* Tablet (768px–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Keep tabs within container width on tablet (no full-bleed) */
  #hpMainTabs,
  #hpMainTabsContent {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  /* Comfortable tab sizing on tablet */
  #hpMainTabs .nav-link {
    padding: 0.75rem 0.75rem;
    font-size: 1rem;
  }

  /* Members grid on tablet: 2 columns */
  .hp-members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Farms grid on tablet: 2 columns */
  .hp-farms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Invites grid on tablet: 2 columns */
  .hp-invites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Package carousel sizing on tablet */
  .hp-package-carousel { min-height: 340px; }
  .hp-carousel-track { gap: 1rem; }
  .hp-package-card { min-width: 180px; max-width: 220px; height: 260px; padding: 1.2rem 0.5rem 0.5rem 0.5rem; }
  .hp-carousel-btn { width: 38px; height: 38px; font-size: 1.2rem; left: -12px; right: -12px; }

  /* Hide mobile-only logout on tablet and up */
  #hpProfileLogoutMobile { display: none !important; }

  /* Network tree on tablet */
  .hp-network-tree { min-width: 700px; }
  .tree-icon { width: 40px; height: 40px; font-size: 1.5rem; }
  .tree-label { font-size: 0.85rem; }
  .hp-network-tree .tree-level-2 { column-gap: 18vw !important; }
  .hp-network-tree .tree-level-3 { column-gap: 10vw !important; }
  .hp-network-tree .tree-level-4 { column-gap: 4vw !important; }
  .hp-network-tree .tree-node { min-width: 90px; max-width: 110px; padding-bottom: 18px; }
  .hp-network-tree .tree-label { margin-bottom: 18px; font-size: 0.95rem; }
}

/* Send modal - crypto style */
.hp-send-modal .hp-send-header,
.hp-withdraw-modal.hp-send-modal .hp-send-header{
  /* Match withdraw modal header gradient */
  background: linear-gradient(135deg, #ffb347 0%, #ff5a1f 100%);
  border-bottom: 1px solid #ff9a30;
}
.hp-send-modal .hp-asset-chip {
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  box-shadow: 0 2px 10px rgba(48,113,255,0.25);
}
.hp-send-modal .hp-asset-chip img,
.hp-withdraw-modal.hp-send-modal .hp-asset-chip img{width:32px;height:32px;}
.hp-send-modal .hp-input-group,
.hp-withdraw-modal.hp-send-modal .hp-input-group{ border: 1px solid #ffd199; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(255,90,31,0.08); }
.hp-send-modal .hp-input-group .input-group-text,
.hp-withdraw-modal.hp-send-modal .hp-input-group .input-group-text{background:#fff;border:0; color: #1f2937;}

/* Convert mode segmented toggle */
.hp-withdraw-modal .hp-pane[hidden]{display:none !important}
.hp-withdraw-modal #hpCvtModeToggle{color: #10b981; text-decoration: none; font-weight: 700;}

/* USD chip icon like KPI */
.hp-usd-chip{display:inline-flex; font-size:1em;justify-content:center; width: 1em; height: 1em; font-weight:600; color:#28a745; }
/* New: unified USD circular icon to match HC size. Use .hp-usd-circle around a $ character. */
.hp-usd-circle{ display:inline-flex; align-items:center; justify-content:center; width:1em; height:1em; border-radius:999px; background:#10b981; color:#fff; bottom: 1px;
    position: relative; font-weight:900; box-shadow: 0 2px 8px rgba(16,185,129,.25); font-size: 1em;}
/* scale variants to match contexts that use larger HC icons */

.hp-usd-circle.lg{ width:1.3em; height:1.3em; font-size:2.2em; }
html[data-theme='dark'] .hp-usd-circle{ background:#059669; box-shadow: 0 2px 10px rgba(5,150,105,.35); }
/* Image-based USD logo to match HatchCoin img sizing */
.hp-usd-img{ display:inline-block; height:1em; width:auto; vertical-align:middle;}
.hp-usd-img.sm{ height:1.1em; }
.hp-usd-img.md{ height:1.1em; }
.hp-usd-img.lg{ height:1.3em; }
/* Utility modifiers to mirror various inline hatchcoin usages found in templates */
.hp-usd-img.ml-neg-2{ margin-left: -2px; }
.hp-usd-img.ml-2{ margin-left: 2px; }
.hp-usd-img.ml-3{ margin-left: 3px; }
.hp-usd-img.ml-4{ margin-left: 4px; }
.hp-usd-img.mb-2{ margin-bottom: 2px; }
.hp-usd-img.mb-3{ margin-bottom: 3px; }
.hp-usd-img.vmid{ vertical-align: middle; }
.hp-usd-img.center-fit{ width:100%; height:auto; object-fit:contain; }
/* Larger left icon used in amount inputs to mirror HatchCoin left icon sizing */
.hp-usd-left-large{ width:1.4em; height:1.4em; font-size:1.5rem !important; }

/* HatchCoin image utility classes so USD can mirror HC usage if needed */
.hp-hc-img{ display:inline-block; height:1em; width:auto; vertical-align:middle; margin-left:3px; margin-bottom:2px; }
.hp-hc-img.md{ height:1.1em; }
.hp-hc-img.lg{ height:1.2rem; }
.hp-hc-img.ml-neg-2{ margin-left:-2px; }
.hp-hc-img.ml-3{ margin-left:3px; }
.hp-hc-img.mb-2{ margin-bottom:2px; }
.hp-hc-img.mb-3{ margin-bottom:3px; }
/* Left icon contexts (match previous circle sizing) */
.hp-send-modal .hp-amount-left .hp-usd-img,
.hp-withdraw-modal.hp-send-modal .hp-amount-left .hp-usd-img{ width:35px; height:35px; }
/* Convert swap button between USD and HATCH inputs */
.hp-convert-swap{ width:40px; height:40px; border-radius:999px; border:1px solid rgba(16,24,40,.12); background:#fff; color:#1f2937; display:inline-flex; align-items:center; justify-content:center; box-shadow: 0 0 16px rgba(0,0,0,.12); }
.hp-convert-swap i{ font-size: 1.25rem; }
.swap-icon-wrap {z-index: 1;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; transition: filter .15s ease-out, box-shadow .15s ease-out, background-color .3s, border-color .3s, color .3s; }
.hp-convert-swap:hover{ filter: brightness(.98); }
.hp-convert-swap:active{ opacity: 1;}
.hp-spin-once{ animation: hpSpinOnce .45s ease-out; }
@keyframes hpSpinOnce { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
html[data-theme='dark'] .hp-convert-swap{ background:#0f172a; color:#e5e7eb; border-color: rgba(255,255,255,.18); box-shadow: 0 6px 16px rgba(0,0,0,.45); }
/* Scale the USD circle when used inside left icon of amount inputs */
.hp-send-modal .hp-amount-left .hp-usd-circle,
.hp-withdraw-modal.hp-send-modal .hp-amount-left .hp-usd-circle{ width:35px; height:35px; font-size: 1rem; box-shadow: 0 2px 4px rgba(16,185,129,.35); }
html[data-theme='dark'] .hp-send-modal .hp-amount-left .hp-usd-circle,
html[data-theme='dark'] .hp-withdraw-modal.hp-send-modal .hp-amount-left .hp-usd-circle{ box-shadow: 0 2px 6px rgba(5,150,105,.45); }

/* Buttons: explicit gradient classes to mirror Request withdrawal */
.hp-btn-orange{background:linear-gradient(135deg,#ffb347 0%,#ff5a1f 100%);border:none;box-shadow:0 10px 24px rgba(255,90,31,.25)}
.hp-btn-orange:hover{filter:brightness(.98)}
.hp-btn-green{color: #fff!important; background:linear-gradient(135deg,#34d399 0%,#10b981 100%);border:none;box-shadow:0 10px 24px rgba(16,185,129,.25); border-radius: 999px;}
.hp-btn-green:hover{filter:brightness(.98)}

/* Header green gradient when in Conversion mode */
.hp-withdraw-modal .hp-convert-header{background:linear-gradient(135deg,#34d399 0%,#10b981 100%) !important}
.hp-send-modal .hp-input-group .form-control,
.hp-withdraw-modal.hp-send-modal .hp-input-group .form-control{border:0;background:#fff;color:#1b2a4a; -webkit-text-fill-color:#1b2a4a; padding-top:.55rem; padding-bottom:.55rem;}
.hp-send-modal .hp-input-group .form-control:focus,
.hp-withdraw-modal.hp-send-modal .hp-input-group .form-control:focus{
  background:#fff !important;
  color:#1b2a4a !important;
  -webkit-text-fill-color:#1b2a4a !important;
  caret-color:#1b2a4a;
  outline: none !important;
  box-shadow: none !important; /* suppress Bootstrap blue ring */
  border: 0 !important;
}
.hp-send-modal .hp-input-group .form-control::selection,
.hp-withdraw-modal.hp-send-modal .hp-input-group .form-control::selection{ background: rgba(255,154,48,.25); color:#1b2a4a; }
/* neutralize webkit autofill quirks */
.hp-send-modal .hp-input-group .form-control:-webkit-autofill,
.hp-send-modal .hp-input-group .form-control:-webkit-autofill:hover,
.hp-send-modal .hp-input-group .form-control:-webkit-autofill:focus,
.hp-withdraw-modal.hp-send-modal .hp-input-group .form-control:-webkit-autofill,
.hp-withdraw-modal.hp-send-modal .hp-input-group .form-control:-webkit-autofill:hover,
.hp-withdraw-modal.hp-send-modal .hp-input-group .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:#1b2a4a !important;
  box-shadow: 0 0 0px 1000px #fff inset !important;
}
.hp-send-modal .hp-input-group:focus-within,
.hp-withdraw-modal.hp-send-modal .hp-input-group:focus-within{ border-color:#ff9a30; box-shadow: 0 0 0 3px rgba(255,154,48,.25), 0 4px 12px rgba(255,90,31,.10); }
.hp-send-modal .hp-amount-wrap,
.hp-withdraw-modal.hp-send-modal .hp-amount-wrap{position:relative; display:block; border:1px solid #ffd199;border-radius:14px;padding:8px 12px;background: linear-gradient(135deg, #fff1e6 0%, #ffe8d4 100%); box-shadow: 0 6px 18px rgba(255, 90, 31, 0.12);} 
/* Conversion mode amount box: soft green tint + green border */
.hp-withdraw-modal.hp-send-modal .hp-amount-wrap.hp-convert {
  background: linear-gradient(135deg, #e6ffe8 0%, #d4ffe0 100%);
  border: 1px solid #a3ff99;
}

/* Dark mode variant for conversion amount box */
html[data-theme='dark'] .hp-withdraw-modal.hp-send-modal .hp-amount-wrap.hp-convert {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18) 0%, rgba(16, 185, 129, 0.10) 100%);
  border: 1px solid rgba(52, 211, 153, 0.45);
}
/* Left icon placement for amount inputs in send/withdraw */
.hp-send-modal .hp-amount-left,
.hp-withdraw-modal.hp-send-modal .hp-amount-left{position:absolute; left:10px; top:50%; transform: translateY(-50%); display:flex; align-items:center; justify-content:center;}
.hp-send-modal .hp-amount-left img,
.hp-withdraw-modal.hp-send-modal .hp-amount-left img{width:35px;height:35px;filter: drop-shadow(0 2px 4px rgba(255,90,31,0.25));}
/* Right icon no longer used for amount inputs; keep rule for backward compatibility but hide when left used */
.hp-send-modal .hp-amount-right,
.hp-withdraw-modal.hp-send-modal .hp-amount-right{display:none;} 
.hp-send-modal .hp-amount-right img,
.hp-withdraw-modal.hp-send-modal .hp-amount-right img{width:35px;height:35px;filter: drop-shadow(0 2px 4px rgba(255,90,31,0.25));}
.hp-send-modal .hp-amount-input,
.hp-withdraw-modal.hp-send-modal .hp-amount-input{display:block; width:100%; max-width:100%; border:none;outline:none;font-size:1.25rem;padding:4px 10px 4px 40px;background:transparent; color: #1b2a4a; -webkit-text-fill-color: #1b2a4a; font-weight: 800; letter-spacing: .02em; text-align:left;}
.hp-send-modal .hp-amount-input.text-center,
.hp-withdraw-modal.hp-send-modal .hp-amount-input.text-center{text-align:left;}
.hp-send-modal .hp-amount-input:focus,
.hp-withdraw-modal.hp-send-modal .hp-amount-input:focus{outline:none;}
.hp-send-modal .hp-amount-wrap:focus-within,
.hp-withdraw-modal.hp-send-modal .hp-amount-wrap:focus-within{box-shadow: 0 0 0 3px rgba(147,197,253,.35), 0 6px 18px rgba(30,64,175,0.12); border-color:#c9dafd;}
.hp-send-modal .hp-amount-centered,
.hp-withdraw-modal.hp-send-modal .hp-amount-centered{max-width: 360px; margin: 0 auto;}
.hp-send-modal .hp-amount-centered .hp-amount-input,
.hp-withdraw-modal.hp-send-modal .hp-amount-centered .hp-amount-input{font-size:1.6rem; letter-spacing:.02em;}
.hp-send-modal .hp-amount-input::-webkit-outer-spin-button,.hp-send-modal .hp-amount-input::-webkit-inner-spin-button,
.hp-withdraw-modal.hp-send-modal .hp-amount-input::-webkit-outer-spin-button,.hp-withdraw-modal.hp-send-modal .hp-amount-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.hp-send-modal .hp-amount-right,
.hp-withdraw-modal.hp-send-modal .hp-amount-right{margin-left:0; display:none;}
.hp-send-modal .btn-primary,
.hp-withdraw-modal.hp-send-modal .btn-primary{background: linear-gradient(135deg, #ffb347 0%, #ff5a1f 100%); color: #fff; border: none; box-shadow: 0 6px 18px rgba(255, 90, 31, 0.28);} 
.hp-send-modal .btn-primary:disabled,
.hp-withdraw-modal.hp-send-modal .btn-primary:disabled{opacity:0.7; box-shadow:none;}
.hp-send-modal .hp-hm-body,
.hp-withdraw-modal.hp-send-modal .hp-hm-body { overflow-x: hidden; }

/* Body text: unify size and improve contrast */
.hp-send-modal .hp-hm-body,
.hp-withdraw-modal.hp-send-modal .hp-hm-body{ font-size: .95rem; color: var(--bs-body-color); }
.hp-send-modal .hp-hm-body .form-label{ font-size: .95rem; color: var(--bs-secondary-color); }
.hp-send-modal .hp-hm-body .hp-send-hint,
.hp-withdraw-modal.hp-send-modal .hp-hm-body .hp-send-hint{ color: var(--bs-tertiary-color); font-size: .95rem; }

/* Orange Max link without underline */
.hp-send-modal #hpSendMaxBtn, .hp-withdraw-modal #hpWdrMaxBtn, .hp-withdraw-modal #hpWdrModeToggle { color: #ff5a1f; text-decoration: none; font-weight: 700; }
.hp-send-modal #hpSendMaxBtn:hover, .hp-withdraw-modal #hpWdrMaxBtn:hover { color: #ff7a33; text-decoration: none; }

.hp-withdraw-modal #hpCvtMaxBtn { color: #10b981; text-decoration: none; font-weight: 700; }
.hp-withdraw-modal #hpCvtMaxBtn:hover { color: #10b981; text-decoration: none; }

/* Placeholder contrast for amount input */
.hp-send-modal .hp-amount-input::placeholder{ color: var(--bs-tertiary-color); opacity: 1; }
html[data-theme='dark'] .hp-send-modal .hp-amount-input::placeholder{ color: #94a3b8; }

/* Ensure recipient field has visible contrast */
.hp-send-modal .hp-input-group .form-control::placeholder{ color: #6b7280; }
html[data-theme='dark'] .hp-send-modal .hp-input-group{ background: #0f172a; border-color: rgba(255,255,255,.20); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
html[data-theme='dark'] .hp-send-modal .hp-input-group .form-control{ background: transparent; color: #e5e7eb; -webkit-text-fill-color:#e5e7eb; border:0; }
html[data-theme='dark'] .hp-send-modal .hp-input-group .input-group-text{ background: transparent; border:0; color: #cbd5e1; }
html[data-theme='dark'] .hp-send-modal .hp-input-group:focus-within{ border-color: rgba(255,154,48,.55); box-shadow: 0 0 0 3px rgba(255,154,48,.25), 0 6px 18px rgba(0,0,0,.45); }
html[data-theme='dark'] .hp-send-modal .hp-input-group .form-control:focus{
  background:transparent !important;
  color:#e5e7eb !important;
  -webkit-text-fill-color:#e5e7eb !important;
  caret-color:#e5e7eb;
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
html[data-theme='dark'] .hp-send-modal .hp-input-group .form-control:-webkit-autofill,
html[data-theme='dark'] .hp-send-modal .hp-input-group .form-control:-webkit-autofill:hover,
html[data-theme='dark'] .hp-send-modal .hp-input-group .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:#e5e7eb !important;
  box-shadow: 0 0 0px 1000px #0f172a inset !important;
}
html[data-theme='dark'] .hp-send-modal .hp-input-group .form-control::placeholder{ color: #94a3b8; }

/* Artistic header accent */
.hp-send-modal .hp-send-header{ position: relative; }
.hp-send-modal .hp-send-header::after{content:''; position:absolute; bottom:0; left:50%; transform: translateX(-50%); width: 60%; height: 3px; background: linear-gradient(90deg, rgba(147,197,253,.0), rgba(147,197,253,.6), rgba(147,197,253,.0)); border-radius: 8px;}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark){
  .hp-send-modal .hp-send-header{background: linear-gradient(135deg, #ff7e33 0%, #ff5a1f 60%, #ff7a33 100%); border-bottom-color: rgba(255, 154, 48, .35);} 
  .hp-send-modal .hp-input-group .input-group-text{background:rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12);} 
  .hp-send-modal .hp-input-group .form-control{background:transparent; color:#e5e7eb; border-color: rgba(255,255,255,0.12);} 
  .hp-send-modal .hp-amount-wrap{background: rgba(255, 154, 48, 0.08); border-color: rgba(255, 154, 48, 0.35);} 
  .hp-send-modal .hp-amount-right img{filter: drop-shadow(0 2px 4px rgba(255,90,31,0.35));}
  .hp-send-modal .hp-amount-input{color:#f3f4f6;} 
}

/* App-level dark mode attribute */
html[data-theme='dark'] .hp-send-modal .hp-send-header{background: linear-gradient(135deg, #ff7e33 0%, #ff5a1f 60%, #ff7a33 100%); border-bottom-color: rgba(255, 154, 48, .35);} 
html[data-theme='dark'] .hp-send-modal .hp-asset-chip {background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0.08)); box-shadow: 0 2px 10px rgba(48,113,255,0.35);} 
html[data-theme='dark'] .hp-send-modal .hp-input-group .input-group-text{background:rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12);} 
html[data-theme='dark'] .hp-send-modal .hp-input-group .form-control{background:transparent; color:#e5e7eb; border-color: rgba(255,255,255,0.12);} 
html[data-theme='dark'] .hp-send-modal .hp-amount-wrap{background: rgba(255, 154, 48, 0.08); border-color: rgba(255, 154, 48, 0.35);} 
html[data-theme='dark'] .hp-send-modal .hp-amount-right img{filter: drop-shadow(0 2px 4px rgba(255,90,31,0.35));}
html[data-theme='dark'] .hp-send-modal .hp-amount-input{color:#f3f4f6;} 
html[data-theme='dark'] .hp-send-modal .hp-amount-input{-webkit-text-fill-color:#f3f4f6;}
.hp-send-modal .text-success{ color: #10b981 !important; }
.hp-send-modal .text-danger{ color: #ef4444 !important; }

/* Modal: ensure purchase/stake terms checkbox and label align inline and center vertically */
.hp-purchase-modal .form-check,
.hp-farms-modal .form-check {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  justify-content: center;
  width: 100%;
}
.hp-purchase-modal .form-check .form-check-input,
.hp-farms-modal .form-check .form-check-input {
  margin: 0 !important;
  transform: translateY(0);
}

/* Scrollable table container with sticky header
   Usage: wrap your table in a container with class .hp-table-scroll
   Example:
     <div class="hp-table-scroll">
       <table class="table">...</table>
     </div>
*/