/* Agsbonlife admin theme on top of Tabler. */
:root,
[data-bs-theme="light"] {
  --tblr-primary: #0d7a37;
  --tblr-primary-rgb: 13, 122, 55;
  --tblr-link-color: #0d7a37;
  --tblr-link-hover-color: #0a5e2a;
  --nx-navy: #0b1f2e;
  --nx-green: #15a34a;
  --nx-muted: #54677a;
  --tblr-body-bg: #f1f5f9;
  --tblr-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Connector height, and the row height the level captions are spaced by. The second is
     measured from a card carrying an expand button, which is the tallest kind. */
  --nx-connector: 2.25rem;
  --nx-row-height: 12rem;
}

body {
  font-feature-settings: "tnum" 0;
}

/* Sidebar ------------------------------------------------------------- */
.navbar-vertical {
  background: var(--nx-navy);
  border-right: 0;
}

.navbar-vertical .navbar-brand {
  font-weight: 800;
  letter-spacing: 1.4px;
}

.navbar-vertical .nav-link {
  border-radius: 9px;
  color: #9fb3c4;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
}

.navbar-vertical .nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-link.active {
  color: #fff;
  font-weight: 700;
  background: rgba(21, 163, 74, 0.2);
  box-shadow: inset 3px 0 0 var(--nx-green);
}

/*
  Below lg the sidebar becomes an inline collapse. This menu is around 1400px tall, so opening it
  pushed the page roughly two screens down and left the reader scrolling through the menu to reach
  anything. Capped to the viewport it scrolls within itself and the page stays where it was.
*/
@media (max-width: 991.98px) {
  .navbar-vertical .navbar-collapse.show,
  .navbar-vertical .navbar-collapse.collapsing {
    max-height: calc(100vh - 3.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Group heading. It folds its group away, so it is a button rather than a label. */
.nx-nav-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 0.75rem 0.375rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #5f7a90;
  text-decoration: none;
  cursor: pointer;
}

.nx-nav-group:hover,
.nx-nav-group:focus-visible {
  color: #9fb3c4;
}

.nx-nav-chevron {
  margin-left: auto;
  font-size: 0.875rem;
  transition: transform 0.15s ease-in-out;
}

/* The chevron follows the collapse's own state rather than a class kept in step by hand. */
.nx-nav-group[aria-expanded="false"] .nx-nav-chevron {
  transform: rotate(-90deg);
}

/* A group's items are a list inside a list item; Tabler's spacing assumes neither. */
.nx-nav-section {
  width: 100%;
}

.nx-nav-section > .navbar-nav {
  width: 100%;
}

/* Content ------------------------------------------------------------- */
.nx-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.nx-num {
  font-variant-numeric: tabular-nums;
}

.table thead th {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--nx-muted);
  text-transform: uppercase;
}

.table td {
  vertical-align: middle;
}

.nx-sub {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--nx-muted);
}

/* Bootstrap 5.3 buttons read their own per-component variables, so --tblr-primary alone
   does not recolour them. */
.btn-primary {
  --tblr-btn-color: #fff;
  --tblr-btn-bg: #0d7a37;
  --tblr-btn-border-color: #0d7a37;
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: #0a5e2a;
  --tblr-btn-hover-border-color: #0a5e2a;
  --tblr-btn-active-bg: #0a5e2a;
  --tblr-btn-active-border-color: #0a5e2a;
  --tblr-btn-disabled-bg: #8fb9a1;
  --tblr-btn-disabled-border-color: #8fb9a1;
}

.form-check-input:checked {
  background-color: #0d7a37;
  border-color: #0d7a37;
}

.page-item.active .page-link {
  background-color: #0d7a37;
  border-color: #0d7a37;
}

a { color: var(--tblr-link-color); }

/* Sponsor tree -------------------------------------------------------- */

.nx-tree-card .nx-crumbs {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  min-width: 0;
  overflow: hidden;
}

.nx-crumbs a {
  color: var(--tblr-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.nx-crumbs a:hover {
  color: var(--nx-green);
}

.nx-crumb-sep {
  color: var(--tblr-border-color);
}

/*
  The viewport clips and scrolls; the stage inside it is what zooms. Scaling the stage rather than
  the viewport keeps the scrollbars measuring real distance at every zoom level.
*/
/* A caption column beside the scroller, rather than a layer over it: laid over, the leftmost card
   of a wide row slides underneath the captions and hides them. */
.nx-tree-frame {
  display: flex;
  align-items: stretch;
}

.nx-tree-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
  padding: 1.5rem 1rem;
  background-image: radial-gradient(var(--tblr-border-color) 1px, transparent 1px);
  background-size: 22px 22px;
  max-height: 70vh;
}

.nx-tree-stage {
  transform: scale(var(--nx-zoom, 1));
  transform-origin: top center;
  transition: transform 0.12s ease-out;
  width: max-content;
  min-width: 100%;
}

/* Level captions, spaced by the same row height the tree uses, so they line up without measuring. */
.nx-levels {
  flex: 0 0 5rem;
  padding: 1.5rem 0 0 1rem;
  pointer-events: none;
  background: var(--tblr-bg-surface);
  border-right: 1px solid var(--tblr-border-color);
}

.nx-levels span {
  display: block;
  height: calc(var(--nx-row-height, 12rem) * var(--nx-zoom, 1));
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--tblr-secondary);
  padding-top: calc(1.25rem * var(--nx-zoom, 1));
}

/*
  A list per level, laid out as a row. The connectors are borders on the list items rather than
  drawn lines: half a line from each side of a gap meets in the middle, which is what makes the
  elbows land correctly however many children a node has.
*/
.nx-tree,
.nx-tree ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nx-tree li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--nx-connector, 2.25rem) 0.625rem 0;
}

.nx-tree > li {
  padding-top: 0;
}

/* The two halves of the horizontal line above a row of siblings. */
.nx-tree li::before,
.nx-tree li::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: var(--nx-connector, 2.25rem);
  border-top: 2px solid var(--tblr-border-color);
}

.nx-tree li::before {
  right: 50%;
  border-right: 2px solid var(--tblr-border-color);
}

.nx-tree li::after {
  left: 50%;
}

/* An only child needs no horizontal line, just the drop. */
.nx-tree li:only-child::before {
  border-right: 2px solid var(--tblr-border-color);
  border-top: 0;
  right: calc(50% - 1px);
  width: 0;
}

.nx-tree li:only-child::after {
  border: 0;
}

/* The ends of a row stop at the elbow rather than running past it. */
.nx-tree li:first-child::before,
.nx-tree li:last-child::after {
  border-top: 0;
}

/* The first child's elbow is drawn by its ::after; its ::before would draw a second, parallel drop. */
.nx-tree li:first-child:not(:only-child)::before {
  border-right: 0;
}

.nx-tree li:last-child::before {
  border-right: 2px solid var(--tblr-border-color);
  border-radius: 0 6px 0 0;
}

.nx-tree li:first-child::after {
  border-left: 2px solid var(--tblr-border-color);
  border-radius: 6px 0 0 0;
}

.nx-tree > li::before,
.nx-tree > li::after {
  display: none;
}

/* The drop from a node to its own children. */
.nx-tree li > ul {
  position: relative;
  padding-top: var(--nx-connector, 2.25rem);
}

.nx-tree li > ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: var(--nx-connector, 2.25rem);
  border-left: 2px solid var(--tblr-border-color);
}

/* The card ----------------------------------------------------------- */

.nx-node {
  position: relative;
  width: 15rem;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 12px;
  padding: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.nx-node-focus {
  border-color: var(--nx-green);
  box-shadow: 0 0 0 2px rgba(21, 163, 74, 0.25);
}

.nx-node-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nx-node-avatar {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
}

.nx-node-who {
  min-width: 0;
  flex: 1 1 auto;
}

.nx-node-name {
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nx-node-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.nx-node-id {
  font-size: 0.6875rem;
  color: var(--tblr-secondary);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* Under the name rather than beside it: rank names here run to "Platinum Millionaire", which
   squeezed the member's own name off the card when the two shared a row. */
.nx-node-rank {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.5625rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nx-node-figures {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.625rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.nx-node-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--tblr-secondary);
}

.nx-node-expand {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  margin-top: 0.625rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: 8px;
  background: transparent;
  font-size: 0.6875rem;
  color: var(--tblr-secondary);
}

.nx-node-expand:hover {
  border-color: var(--nx-green);
  color: var(--nx-green);
}

.nx-node-sign {
  font-weight: 700;
  line-height: 1;
}

/* Reachable by keyboard and by hover, without taking room in the card. */
.nx-node-open {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.625rem;
  opacity: 0;
  transition: opacity 0.1s;
}

.nx-node:hover .nx-node-open,
.nx-node-open:focus-visible {
  opacity: 1;
}

.nx-node-loading {
  font-size: 0.6875rem;
  color: var(--tblr-secondary);
  padding: 0.5rem;
}

/* Top navbar (member portal) ----------------------------------------- */
.navbar .navbar-nav .nav-link {
  color: #9fb3c4;
  font-weight: 600;
  border-radius: 8px;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.navbar .navbar-nav .nav-link.active {
  color: #fff;
  background: rgba(21, 163, 74, 0.22);
  box-shadow: inset 0 -2px 0 var(--nx-green);
}

/* Stacked rather than inline once the menu is folded behind the toggle. */
@media (max-width: 767.98px) {
  .navbar .navbar-collapse .navbar-nav {
    gap: 0.125rem;
    padding-top: 0.5rem;
  }

  .navbar .navbar-nav .nav-link {
    padding: 0.5rem 0.625rem;
  }
}

/* Dashboard ---------------------------------------------------------- */
.nx-hero {
  background: linear-gradient(135deg, var(--nx-navy) 0%, #15354e 100%);
  color: #fff;
  border: 0;
}

.nx-hero .nx-sub,
.nx-hero .text-muted {
  color: #9fb3c4 !important;
}

.nx-hero-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--nx-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  flex: 0 0 auto;
}

.nx-kpi-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex: 0 0 auto;
}

/* Lightweight bar chart: a track per month, the bar sized by percentage of the track. */
.nx-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.nx-bar-col {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.nx-bar-track {
  height: 9rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.nx-bar {
  width: 68%;
  max-width: 2.5rem;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, var(--nx-green) 0%, #0d7a37 100%);
  transition: filter 0.15s;
}

.nx-bar-col:hover .nx-bar {
  filter: brightness(1.08);
}

.nx-bar-col.nx-bar-now .nx-bar {
  background: linear-gradient(180deg, #27c05f 0%, #15a34a 100%);
}

.nx-bar-label {
  margin-top: 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--nx-muted);
  text-transform: uppercase;
}

.nx-bar-value {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--tblr-secondary);
  font-variant-numeric: tabular-nums;
}

/* The little activity dot column. */
.nx-act-dot {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex: 0 0 auto;
}

.min-w-0 { min-width: 0; }

/* Selectable pick cards (delivery address / courier) --------------------------------- */
.nx-pick {
  cursor: pointer;
  border: 1px solid var(--tblr-border-color);
  transition: border-color 0.12s, box-shadow 0.12s;
}

.nx-pick:hover {
  border-color: var(--nx-green);
}

.nx-pick-on {
  border-color: var(--nx-green);
  box-shadow: inset 0 0 0 1px var(--nx-green);
}

/* Drag-to-pan genealogy viewport ----------------------------------------------------- */
.nx-tree-pan {
  cursor: grab;
}

.nx-tree-pan.nx-grabbing {
  cursor: grabbing;
  user-select: none;
}

.nx-tree-pan.nx-grabbing a,
.nx-tree-pan.nx-grabbing .nx-node {
  pointer-events: none;
}

/* Drillable genealogy node: whole card highlights, down-arrow bar at the bottom --------- */
.nx-node-can-drill {
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

.nx-node-can-drill:hover {
  border-color: var(--nx-green);
  background: rgba(21, 163, 74, 0.05);
  box-shadow: 0 2px 10px rgba(21, 163, 74, 0.12);
}

.nx-node-drill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.625rem -0.75rem -0.75rem;
  padding: 0.4rem;
  border-top: 1px solid var(--tblr-border-color);
  border-radius: 0 0 12px 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--nx-green);
  text-decoration: none;
  letter-spacing: 0.2px;
}

.nx-node-drill i {
  transition: transform 0.12s;
}

.nx-node-can-drill:hover .nx-node-drill {
  background: rgba(21, 163, 74, 0.1);
}

.nx-node-can-drill:hover .nx-node-drill i {
  transform: translateY(2px);
}

/* Clickable stat cards (wallet balances -> statement) -------------------------------- */
.nx-card-link {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}

.nx-card-link:hover {
  border-color: var(--nx-green);
  box-shadow: 0 2px 10px rgba(21, 163, 74, 0.12);
  color: inherit;
}

.nx-card-link .nx-sub i {
  color: var(--nx-green);
}

/* ============================================================================
   Member portal · eco redesign (sidebar + dashboard)
   ============================================================================ */
:root {
  --nx-ink: #0f2a1e;
  --nx-leaf: #15a34a;
  --nx-leaf-dark: #0b5d33;
  --nx-leaf-soft: #e9f7ef;
}

/* ---- Sidebar (Tabler core handles the fixed-left layout; we only theme it) ---- */
.nx-sidebar { background: linear-gradient(185deg, #123e2a 0%, #0c2a1d 55%, #0a2318 100%); border: 0; }
@media (min-width: 992px) {
  .nx-sidebar .navbar-collapse { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .nx-sidebar .navbar-collapse > .navbar-nav { flex: 0 0 auto; }
}
.nx-logo-mark {
  width: 34px; height: 34px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.15rem; color: #fff;
  background: linear-gradient(135deg, #2fb86a, #0b5d33); box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.nx-brand-tag { font-size: .5rem; letter-spacing: .5px; color: #8fc9a8; text-transform: uppercase; }
.nx-sidebar .nav-link { color: #cfe6d8; border-radius: 10px; margin: 2px .5rem; padding: .55rem .75rem; font-weight: 500; }
.nx-sidebar .nav-link .nav-link-icon { color: #8fc9a8; }
.nx-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nx-sidebar .nav-link.active {
  background: linear-gradient(90deg, rgba(47,184,106,.28), rgba(47,184,106,.08));
  color: #fff; box-shadow: inset 3px 0 0 #43d07f;
}
.nx-sidebar .nav-link.active .nav-link-icon { color: #43d07f; }
.nx-sidebar-foot {
  position: relative; padding: .75rem 0 0;
  background-image: linear-gradient(180deg, #0c2a1d 0%, rgba(12,42,29,.12) 44%, rgba(9,32,22,.74) 100%);
  background-size: cover; background-position: center 18%;
}
.nx-sidebar-foot > * { position: relative; }
.nx-eco-card {
  position: relative; margin: .5rem; padding: 1rem; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 90% at 80% 10%, rgba(67,208,127,.25), rgba(11,93,51,.15));
  border: 1px solid rgba(255,255,255,.08); min-height: 150px;
}
.nx-eco-globe { position: absolute; right: -10px; bottom: -14px; width: 92px; height: 92px; opacity: .9; }
.nx-eco-list { list-style: none; padding: 0; margin: .5rem 0; }
.nx-eco-list li { color: #d3e9dc; font-size: .82rem; line-height: 1.7; }
.nx-eco-list li i { font-size: .8rem; }
.nx-eco-pipe { color: #4e6f5c; margin-left: .25rem; }
.nx-wordmark { font-size: 1.15rem; letter-spacing: .32em; }

/* ---- Top bar ---- */
.nx-topbar { background: #fff; border-bottom: 1px solid #e6edf2; min-height: 56px; }
.nx-search { max-width: 420px; width: 100%; }
.nx-search .form-control { background: #f3f6f9; border: 0; border-radius: 999px; padding-left: 2.25rem; }

/* ---- Full-width mountains header (dashboard): clear on the right, blurred-white on the left ---- */
.nx-hero-header {
  position: relative; z-index: 3; overflow: visible;
  background-size: cover; background-position: center -80px;
  padding-bottom: 1rem;
}
/* A fixed pixel offset keeps the crop consistent between the tall dashboard hero and the short
   page-header hero. On mobile the hero is narrow and short, so fall back to a percentage. */
@media (max-width: 768px) { .nx-hero-header { background-position: center 30%; } }
/* The account dropdown can now overflow past the header's bottom edge instead of being
   clipped; it sits above the page body below. */
.nx-hero-header .dropdown-menu { z-index: 1050; }
.nx-hero-header::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(7,28,17,.68) 0%, rgba(7,28,17,.34) 40%, rgba(7,28,17,0) 72%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 36%, transparent 68%);
          mask-image: linear-gradient(90deg, #000 0%, #000 36%, transparent 68%);
}
.nx-hero-header .nx-wide { position: relative; z-index: 1; }
/* Content spans the full width beside the sidebar, so the header photo, the top controls and the
   cards share the same edges on any screen width. */
.nx-wide { padding-left: 1.5rem; padding-right: 1.5rem; }
@media (min-width: 1200px) { .nx-wide { padding-left: 2rem; padding-right: 2rem; } }
.nx-hero-welcome { padding-top: .75rem; }
.nx-hero-ink { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.nx-hero-ink-soft { color: rgba(255,255,255,.9); font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,.4); }

/* ---- Dashboard hero ---- */
.nx-hero-banner {
  position: relative; border-radius: 20px; overflow: hidden; color: #fff; padding: 1.75rem 1.9rem;
  background-image: linear-gradient(110deg, rgba(10,40,26,.72) 0%, rgba(18,78,48,.42) 52%, rgba(42,157,92,.18) 100%);
  background-size: cover; background-position: center; min-height: 150px;
  box-shadow: 0 16px 40px rgba(12,59,39,.25);
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}
.nx-hero-banner .nx-hero-actions { position: relative; z-index: 2; }
.nx-hero-leaf { position: absolute; right: 1.25rem; top: 1rem; width: 120px; height: 120px; opacity: .55; z-index: 1; }

/* ---- Rank / certificate medal ---- */
.nx-medal {
  width: 75px; height: 75px; flex: 0 0 75px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  color: #0c3b27; font-weight: 800; font-size: 1.4rem; background: linear-gradient(135deg, #ffe08a, #f4b23e);
  box-shadow: 0 8px 18px rgba(244,178,62,.4); object-fit: cover;
}
/* Genealogy: the rank badge stands in for the initials. */
.nx-rank-avatar { object-fit: cover; background: none; box-shadow: none; }
img.nx-node-avatar { width: 2.5rem; height: 2.5rem; border-radius: 8px; }
/* Dashboard rank card: the text keeps a sensible width and the buttons drop to their own row on a phone. */
.nx-rank-info { flex: 1 1 10rem; overflow-wrap: normal; word-break: normal; }
@media (max-width: 575.98px) {
  .nx-rank-card .nx-medal { width: 60px; height: 60px; flex-basis: 60px; font-size: 1.15rem; border-radius: 15px; }
  .nx-rank-card .h2 { font-size: 1.2rem; }
  .nx-rank-actions { width: 100%; justify-content: flex-end; }
  .nx-rank-actions:empty { display: none !important; }
}
.nx-progress-eco { height: 8px; border-radius: 999px; background: #e3ece7; overflow: hidden; }
.nx-progress-eco > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2fb86a, #43d07f); }

/* ---- Wallet pills (each tinted via a bg-*-lt class in the view) ---- */
.nx-wallet-pill { border-radius: 16px; padding: 1rem 1.1rem; }
.nx-wallet-ico { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; background: rgba(255,255,255,.7); }

/* ---- Bonus chips (each tinted via a bg-*-lt class in the view) ---- */
.nx-bonus { text-align: center; border-radius: 14px; padding: .85rem .4rem; }
.nx-bonus .nx-bonus-ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.8); display: inline-flex; align-items: center; justify-content: center; }

/* ---- Certificate progress strip ---- */
.nx-steps { display: flex; align-items: center; gap: 0; }
.nx-step { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; position: relative; }
.nx-step .dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #e3ece7; color: #8aa699; font-weight: 700; font-size: .8rem; z-index: 2; }
.nx-step.done .dot { background: #2fb86a; color: #fff; }
.nx-step.current .dot { background: #0c3b27; color: #fff; box-shadow: 0 0 0 4px rgba(47,184,106,.25); }
.nx-step::before { content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 3px; background: #e3ece7; z-index: 1; }
.nx-step:first-child::before { display: none; }
.nx-step.done::before, .nx-step.current::before { background: #2fb86a; }
.nx-step small { margin-top: .35rem; color: var(--nx-muted); font-size: .72rem; }

/* ---- CO2e bars ---- */
.nx-co2-bars { display: flex; align-items: stretch; gap: .4rem; height: 80px; }
.nx-co2-bars > div { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.nx-co2-bars .bar { width: 100%; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #43d07f, #1f9e57); min-height: 4px; }

/* ---- Quick actions ---- */
.nx-quick { text-align: center; text-decoration: none; color: inherit; display: block; padding: 1rem .5rem; border-radius: 14px; transition: background .15s; }
.nx-quick:hover { background: var(--nx-leaf-soft); color: inherit; }
.nx-quick .ico { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; }

/* ---- Promo / quote cards (photo-backed) ---- */
.nx-promo { position: relative; border-radius: 20px; overflow: hidden; color: #fff; min-height: 100%;
  background: linear-gradient(120deg, #14432c, #1f7a48); padding: 1.5rem 1.6rem;
  background-size: cover; background-position: center; }
.nx-promo--sprout {
  background-image: linear-gradient(100deg, rgba(9,36,21,.74) 0%, rgba(9,36,21,.34) 46%, rgba(9,36,21,0) 80%);
  background-position: center;
}
.nx-promo--products {
  background-image: linear-gradient(90deg, rgba(14,48,30,.72) 0%, rgba(14,48,30,.22) 42%, rgba(14,48,30,0) 72%);
  background-position: right center;
}
.nx-promo > * { position: relative; z-index: 2; }
.nx-promo-ink { color: #0f2a1e; text-shadow: 0 1px 12px rgba(255,255,255,.65); }
.nx-promo-ink .h2, .nx-promo-ink .h1 { color: #0f2a1e; }

/* Auth pages: vertically center the card, but stay scrollable when the form is tall.
   Plain flex centering clips the top of content taller than the viewport; auto margins
   center when there is room and collapse to 0 (content starts at top) when there is not. */
.page.page-center { justify-content: flex-start; min-height: 100vh; padding-block: 2rem; }
.page.page-center > * { margin-block: auto; }

/* Language switcher on the auth pages (login / register / forgot / reset). */
.nx-auth-lang { position: absolute; top: 1rem; right: 1rem; z-index: 20; }

/* ============================================================================
   AGS Bonlife theme (Claude Design "AGS Bonlife Dashboard v2")
   Same layout as before; bright blue sidebar, light hero, white cards, blue accents.
   Overrides the green eco theme above. Tabler's text-green / bg-green-lt stay green
   where a view marks something as eco (GCP / CFU wallets, Matching bonus).
   ============================================================================ */
:root,
[data-bs-theme="light"] {
  --ags-blue: #1683d8;
  --ags-blue-dark: #0b5fa8;
  --ags-blue-deep: #0a3f78;
  --ags-blue-soft: #e8f3fc;
  --ags-ink: #0f1d36;
  --ags-muted: #5b6b80;
  --ags-border: #e1ebf5;

  --nx-green: var(--ags-blue);
  --nx-navy: var(--ags-blue-deep);
  --nx-muted: var(--ags-muted);
  --nx-leaf-soft: var(--ags-blue-soft);
  --tblr-primary: #1683d8;
  --tblr-primary-rgb: 22, 131, 216;
  --tblr-link-color: #1474c2;
  --tblr-link-hover-color: #0b5fa8;
  --tblr-body-bg: #f2f7fc;
  --tblr-body-color: var(--ags-ink);
  --tblr-border-color: var(--ags-border);
  --tblr-font-sans-serif: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3, .h1, .h2, .h3, .display-6 { color: var(--ags-ink); }

.btn-primary {
  --tblr-btn-bg: #1683d8;
  --tblr-btn-border-color: #1683d8;
  --tblr-btn-hover-bg: #0b5fa8;
  --tblr-btn-hover-border-color: #0b5fa8;
  --tblr-btn-active-bg: #0b5fa8;
  --tblr-btn-active-border-color: #0b5fa8;
  --tblr-btn-disabled-bg: #8dbde6;
  --tblr-btn-disabled-border-color: #8dbde6;
}
.form-check-input:checked { background-color: #1683d8; border-color: #1683d8; }
.page-item.active .page-link { background-color: #1683d8; border-color: #1683d8; }

.card { border-radius: 18px; border-color: var(--ags-border); box-shadow: 0 1px 3px rgba(15, 29, 54, .04); }
.card-header { border-bottom-color: var(--ags-border); }

/* ---- Sidebar ---- */
.nx-sidebar { background: linear-gradient(180deg, #1b9be2 0%, #138ad8 45%, #0e72c4 78%, #0a5da8 100%); }
.nx-logo-white { display: block; width: 140px; height: auto; }
@media (max-width: 991.98px) { .nx-logo-white { width: 72px; } }
/* Centred logo. Tabler's ".navbar-vertical.navbar-expand-lg .navbar-brand" sets space-between, so
   this needs the extra .navbar to outrank it. */
.navbar.navbar-vertical.nx-sidebar .navbar-brand { display: flex; justify-content: center; }
.navbar.navbar-vertical.nx-sidebar .navbar-brand > a { display: block; }
@media (min-width: 992px) { .navbar.navbar-vertical.nx-sidebar .navbar-brand { width: 100%; } }
/* .navbar.nx-sidebar outranks the generic ".navbar .navbar-nav .nav-link" rules above, which tint
   links grey and the active one green. */
.navbar.nx-sidebar .navbar-nav .nav-link { color: #fff; font-weight: 500; border: 1px solid transparent; }
.navbar.nx-sidebar .navbar-nav .nav-link .nav-link-icon { color: #fff; }
.navbar.nx-sidebar .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.navbar.nx-sidebar .navbar-nav .nav-link.active {
  background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .35);
  color: #fff; box-shadow: 0 4px 14px rgba(6, 60, 120, .18);
}
.navbar.nx-sidebar .navbar-nav .nav-link.active .nav-link-icon { color: #fff; }
.nx-sidebar-foot {
  background-image: linear-gradient(180deg, rgba(14, 114, 196, 1) 0%, rgba(14, 114, 196, 0) 22%, rgba(8, 62, 120, 0) 60%, rgba(8, 62, 120, .55) 100%),
                    url('/img/ags-sidebar.webp');
  background-size: cover; background-position: center top;
  min-height: 330px; padding: 6.5rem 1.5rem 1.75rem;
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* One word per line, as in the design. */
.nx-side-tag { max-width: 7rem; color: #fff; font-weight: 600; font-size: 1.5rem; line-height: 1.25; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.nx-side-rule { display: block; width: 30px; height: 2px; background: #fff; margin-top: .9rem; border-radius: 2px; }
.nx-eco-list li { color: #fff; }
.nx-eco-list li i { color: #bfe3ff; }
.nx-eco-pipe { color: rgba(255, 255, 255, .45); }
.nx-brand-tag { color: #d7ecfc; }

/* ---- Hero header: light, the Central Asia panorama fading in on the right ---- */
.nx-hero-header {
  background-image: linear-gradient(90deg, #f2f7fc 0%, rgba(242, 247, 252, .95) 28%, rgba(242, 247, 252, .55) 48%, rgba(242, 247, 252, 0) 70%),
                    url('/img/ags-hero.webp');
  background-size: cover; background-position: right -145px;
}
.nx-hero-header::before { display: none; }
.nx-hero-ink { color: var(--ags-ink); text-shadow: 0 0 14px rgba(255, 255, 255, .7); }
.nx-hero-ink-soft { color: #33445c; font-weight: 500; text-shadow: 0 0 12px rgba(255, 255, 255, .8); }
.nx-hero-welcome .text-end .nx-hero-ink,
.nx-hero-welcome .text-end .nx-hero-ink-soft { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }

/* Top controls: white pills. */
.nx-topbar-row .navbar-nav .nav-link {
  background: #fff; color: var(--ags-ink); border-radius: 999px;
  box-shadow: 0 2px 10px rgba(15, 29, 54, .08);
}
.nx-topbar-row .navbar-nav .nav-link:hover { background: #fff; color: var(--ags-blue); }
.nx-topbar-row .nx-sub { color: var(--ags-ink); }
.nx-topbar-row .avatar { background: linear-gradient(135deg, #1b9be2, #0b5fa8); color: #fff; font-weight: 700; }

/* ---- Dashboard pieces ---- */
.nx-medal { color: #fff; background: linear-gradient(145deg, #4fb3ef, #1683d8); box-shadow: 0 10px 22px rgba(22, 131, 216, .35); }
.nx-promo { background: linear-gradient(120deg, #0a4f8f, #1683d8); }
.nx-promo--sprout {
  background-image: linear-gradient(90deg, rgba(8, 56, 112, .88) 0%, rgba(8, 56, 112, .5) 40%, rgba(8, 56, 112, 0) 70%), url('/img/ags-hiker.webp');
  background-size: cover; background-position: 70% center;
}
.nx-promo--products {
  background-image: linear-gradient(90deg, rgba(8, 56, 112, .85) 0%, rgba(8, 56, 112, .35) 42%, rgba(8, 56, 112, 0) 72%), url('/img/ags-products-2.webp');
  background-size: cover; background-position: center;
}
.nx-step.done .dot { background: var(--ags-blue); }
.nx-step.current .dot { background: var(--ags-blue); box-shadow: 0 0 0 4px rgba(22, 131, 216, .2); }
.nx-step::before { background: var(--ags-blue-soft); }
.nx-step .dot { background: var(--ags-blue-soft); color: #7d8ea3; }
.nx-step.done::before, .nx-step.current::before { background: var(--ags-blue); }
.nx-progress-eco > span { background: linear-gradient(90deg, #4fb3ef, #1683d8); }
.nx-bar { background: linear-gradient(180deg, #4fb3ef 0%, #1683d8 100%); }
.nx-bar-col.nx-bar-now .nx-bar { background: linear-gradient(180deg, #2f9ae6 0%, #0b5fa8 100%); }
.nx-hero { background: linear-gradient(135deg, #0b5fa8 0%, #1683d8 100%); }
.nx-hero-avatar { background: #fff; color: var(--ags-blue); }

/* Earnings bars on the sales page. */
.nx-co2-bars { gap: .55rem; }
.nx-co2-bars .bar { background: #b9dcf6; border-radius: 3px 3px 0 0; }
.nx-co2-bars > div:last-child .bar { background: #8cc8f1; }

/* Network tabs: sponsor / placement genealogy. */
.nx-net-tabs .nav-link { border-radius: 999px; font-weight: 500; color: #33445c; }
.nx-net-tabs .nav-link.active { background: var(--ags-blue); color: #fff; }

/* Placement (binary) genealogy: narrower cards so four levels fit, a side tag on each card, and
   dashed empty slots that link to the enroll form. */
.nx-btree .nx-node { width: 11.5rem; padding: .65rem; padding-top: .9rem; }
.nx-btree li { padding-left: .4rem; padding-right: .4rem; }
.nx-node-side {
  position: absolute; top: -.6rem; left: 50%; transform: translateX(-50%);
  font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ags-blue); color: #fff; border-radius: 999px; padding: .1rem .55rem;
}
.nx-slot {
  width: 11.5rem; min-height: 5.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; border: 2px dashed #b9d4ec; border-radius: 12px; background: #f7fbff;
  color: #4a6a8a; font-size: .78rem; font-weight: 600; text-decoration: none; position: relative;
}
.nx-slot i { font-size: 1.3rem; color: var(--ags-blue); }
.nx-slot:hover { border-color: var(--ags-blue); background: var(--ags-blue-soft); color: var(--ags-blue-dark); }
.nx-slot-side { font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7d8ea3; }
/* The copy-sign-up-link button sits on the slot's bottom edge. */
.nx-slot-wrap { position: relative; display: inline-block; }
.nx-slot-copy {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #b9d4ec; border-radius: 50%; background: #fff; color: var(--ags-blue);
  font-size: .9rem; cursor: pointer; box-shadow: 0 1px 3px rgba(16, 60, 110, .12);
}
.nx-slot-copy:hover { border-color: var(--ags-blue); background: var(--ags-blue); color: #fff; }
.nx-slot-copy.is-copied { border-color: #2fb344; background: #2fb344; color: #fff; }

/* Register / enroll: the chosen placement side reads as selected. */
.btn-check:checked + .btn { background: var(--ags-blue); border-color: var(--ags-blue); color: #fff; }

/* Placement preference: one selectable card per option. */
.nx-pref-option {
  display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; cursor: pointer;
  border: 1px solid var(--ags-border); border-radius: 12px; transition: border-color .12s, background .12s;
}
.nx-pref-option:hover { border-color: var(--ags-blue); }
.nx-pref-option:has(input:checked) { border-color: var(--ags-blue); background: var(--ags-blue-soft); }
.nx-pref-ico {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem; background: var(--ags-blue-soft); color: #1b6fb8;
}

/* Copyright line at the foot of every page. */
.nx-footer { padding: 1.25rem 0 1.5rem; font-size: .8125rem; color: var(--ags-muted); border-top: 0; }


/* Placement tree level captions: placed by script at each row, so they follow zoom and scroll. */
.nx-levels.nx-levels-abs { position: relative; overflow: hidden; padding: 0; }
.nx-levels.nx-levels-abs span { position: absolute; left: 1rem; height: auto; padding: .35rem 0 0; }

/* Sidebar section label (TOOLS). */
.nx-sidebar .nx-side-section {
  margin: 1rem 1.25rem .25rem; font-size: .625rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255, 255, 255, .7);
}

/* Sidebar footer photo: no hard edge under the menu. The lake fades in from the sidebar's blue
   through a blurred band, and darkens a little at the bottom so the tagline stays readable. */
.nx-sidebar-foot {
  background-image: none;
  position: relative;
  isolation: isolate;
  min-height: 360px;
  /* Clips the scaled blur layer below. Without it the sidebar overflows by a few pixels and gets
     scrollbars wherever they take up room (macOS "always show", classic Windows scrollbars). */
  overflow: hidden;
}
.nx-sidebar-foot::before,
.nx-sidebar-foot::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 62, 120, 0) 55%, rgba(8, 62, 120, .6) 100%),
              url('/img/ags-sidebar.webp') center top / cover no-repeat;
}
.nx-sidebar-foot::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 22%, #000 48%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .35) 22%, #000 48%);
}
.nx-sidebar-foot::after {
  filter: blur(10px);
  transform: scale(1.06);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 30%, transparent 52%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 30%, transparent 52%);
}

/* Print: just the page content, without the sidebar or the header. */
@media print {
    aside.navbar-vertical, .nx-hero-header { display: none !important; }
    .page-wrapper { margin: 0 !important; }
}

/* Bonus statement on paper: a letterhead and plain ruled tables instead of screen cards. */
@media print {
    body, .page, .page-wrapper, .page-body { background: #fff !important; }
    .page-body { margin: 0 !important; padding: 0 !important; }
    .page-body > .container-fluid { padding: 0 !important; max-width: none !important; }
    .nx-stmt { padding: 14mm 12mm 16mm; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-size: 9.5pt; color: #111827; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .nx-stmt-head { align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 18px; border-bottom: 2px solid #1f4e8c; }
    .nx-stmt-head img { height: 52px; width: auto; }
    .nx-stmt-title { font-size: 17pt; font-weight: 700; color: #1f4e8c; line-height: 1.2; }
    .nx-stmt-period { font-size: 10pt; color: #4b5563; margin-top: 2px; }
    .nx-stmt > .row { display: flex; flex-wrap: nowrap; gap: 24px; margin: 0 0 18px !important; }
    .nx-stmt > .row > [class*="col-"] { flex: 1 1 0; width: auto; max-width: none; padding: 0; margin: 0; }
    .nx-stmt dl.row { display: flex; flex-wrap: wrap; gap: 0; margin: 0 !important; }
    .nx-stmt dl.row > dt, .nx-stmt dl.row > dd { padding: 3px 0; margin: 0; font-size: 9.5pt; }
    .nx-stmt dl.row > dt { flex: 0 0 38%; color: #6b7280; }
    .nx-stmt dl.row > dd { flex: 0 0 62%; }
    .nx-stmt .card { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0 0 18px; height: auto !important; }
    .nx-stmt .card-header { display: block; background: none; border: 0; border-bottom: 1px solid #1f4e8c; min-height: 0; padding: 0 0 4px; break-after: avoid; }
    .nx-stmt .card-title { font-size: 10.5pt; font-weight: 700; color: #1f4e8c; }
    .nx-stmt .card-body { padding: 6px 0 0; }
    .nx-stmt .table-responsive { overflow: visible; }
    .nx-stmt .table { font-size: 9pt; margin: 0; }
    .nx-stmt .table th { background: #eef2f7 !important; color: #374151; font-size: 8pt; font-weight: 600; padding: 5px 6px; border-bottom: 1px solid #cbd5e1; }
    .nx-stmt .table td { padding: 4px 6px; border-bottom: 1px solid #e5e7eb; }
    .nx-stmt .table tr { break-inside: avoid; }
    .nx-stmt .table th, .nx-stmt .table td { border-radius: 0 !important; }
    .nx-stmt .table tr > :first-child { padding-left: 6px !important; }
    .nx-stmt .table tr > :last-child { padding-right: 6px !important; }
    .nx-stmt .table tfoot td { font-weight: 700; background: #eef2f7 !important; border-top: 1.5px solid #1f4e8c; border-bottom: 0; }
}