/* Niguro page CSS: money pages (built on the page kit in niguro.css; see dev/niguro-kit.md)
   Wallet, Packages, Ads and Developers. Everything is scoped to .ng-money (the pages' .ng-hubwrap),
   colours come from the tokens and --h tints. */

/* ------------------------------- */
/* shared bits */
/* ------------------------------- */

/* two columns: wallet (credit 1/3 | transactions 2/3), forms (halves); stacked under 1024px */
.ng-money .ng-mlay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ng-money .ng-mlay__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ng-money .ng-mlay__col > .card, .ng-money .ng-mlay > .card { margin: 0; }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ng-money .ng-mlay--wallet .ng-mlay__col--side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ng-money .ng-mlay--wallet .ng-mlay__col--side > :only-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .ng-money .ng-mlay--wallet { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px; }
  .ng-money .ng-mlay--half { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

/* a tinted notice (success after a payment, "upgrade to unlock", wallet empty, approval needed) */
.ng-money .ng-mnote {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border-radius: var(--ng-r-md);
  background: hsl(var(--h, 135) 80% 94%); color: hsl(var(--h, 135) 55% 26%); font-size: 14px; line-height: 1.5;
}
body.night-mode .ng-money .ng-mnote { background: hsl(var(--h, 135) 30% 16%); color: hsl(var(--h, 135) 70% 78%); }
.ng-money .ng-mnote > .ng-ico { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.ng-money .ng-mnote b { font-weight: 800; }
.ng-money .ng-mnote a { color: inherit; font-weight: 700; text-decoration: underline; }

/* list card extras: a head with a line under the title, a foot, rows that are buttons, a chevron */
.ng-money .ng-lcard__head--sub { align-items: center; }
.ng-money .ng-lcard__head--sub small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ng-sub); }
.ng-money .ng-lcard__foot { padding: 12px 18px 16px; border-top: 1px solid var(--ng-line); }
.ng-money .ng-lrow--btn {
  width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; margin: 0; border: 0; border-radius: 0;
  background: transparent; font: inherit; text-align: start; cursor: pointer;
}
.ng-money .ng-lrow--btn + .ng-lrow--btn { border-top: 1px solid var(--ng-line); }
.ng-money .ng-lrow--btn:hover { background: var(--ng-fill); }
.ng-money .ng-lrow--btn:focus-visible { outline-offset: -2px; }
.ng-money .ng-lrow__chev { display: grid; place-items: center; color: var(--ng-faint); }
.ng-money .ng-lrow__chev .ng-ico { width: 18px; height: 18px; }
.ng-money .ng-credits .ng-lrow { padding-top: 12px; padding-bottom: 12px; }
.ng-money .ng-credits .ng-lrow__icon { width: 40px; height: 40px; border-radius: 12px; }
.ng-money .ng-credits .ng-lrow__icon .ng-ico { width: 20px; height: 20px; }
.ng-money .ng-credits .ng-lrow__title { font-size: 14.5px; }
.ng-money .ng-hide-more { display: none !important; }

/* form card: an h2 for the title (the kit's head uses b) */
.ng-money .ng-fcard__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ng-ink-strong); }
.ng-money .ng-fcard__head small { margin-top: 2px; }
.ng-money .ng-fcard__body .form-group { margin-bottom: 16px; }
.ng-money .ng-fcard__body .form-group:last-child, .ng-money .ng-fcard__body .mb0 { margin-bottom: 0; }
.ng-money fieldset.form-group { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
.ng-money fieldset > legend.form-label { float: none; width: auto; margin-bottom: 8px; padding: 0; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--ng-ink-strong); }

/* Sngine's money input (currency + number) at the field height */
.ng-money .input-money span { top: 50%; translate: 0 -50%; width: 44px; font-size: 14px; font-weight: 700; color: var(--ng-sub); }
.ng-money .input-money input { height: var(--ng-field-h); padding-left: 44px; font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.3; }
.ng-money .input-money.right input { padding-left: 14px; padding-right: 44px; }

/* radio choices as pills (payment method) */
.ng-money .ng-rchips { display: flex; flex-wrap: wrap; gap: 8px; }
.ng-money .ng-rchip {
  position: relative; display: inline-block; margin: 0; padding: var(--ng-chip-pad); border-radius: var(--ng-chip-r); background: var(--ng-fill); font-size: var(--ng-chip-fs); font-weight: var(--ng-chip-fw); color: var(--ng-ink-strong); cursor: pointer; height: var(--ng-chip-h); line-height: var(--ng-chip-h); /* [Chips: one size] */
}
.ng-money .ng-rchip:hover { background: var(--ng-fill-2); }
.ng-money .ng-rchip .form-check-input { float: none; flex: none; width: 18px; height: 18px; /* [Chips: one size] */ }
.ng-money .ng-rchip:has(:checked) { background: hsl(var(--primary) / .12); box-shadow: inset 0 0 0 1.5px var(--ng-brand); color: var(--ng-brand); }

/* small round icon buttons (edit, stop, delete) */
.ng-money .ng-ibtn {
  width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--ng-fill); color: var(--ng-ink-strong); cursor: pointer; text-decoration: none;
}
.ng-money .ng-ibtn:hover { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
.ng-money .ng-ibtn .ng-ico { width: 16px; height: 16px; }
.ng-money .ng-ibtn--tint { background: hsl(var(--h) 80% 94%); color: hsl(var(--h) 70% 38%); }
.ng-money .ng-ibtn--tint:hover { background: hsl(var(--h) 75% 90%); color: hsl(var(--h) 70% 34%); }
body.night-mode .ng-money .ng-ibtn--tint { background: hsl(var(--h) 30% 18%); color: hsl(var(--h) 75% 65%); }
body.night-mode .ng-money .ng-ibtn--tint:hover { background: hsl(var(--h) 30% 22%); }
.ng-money .ng-acts { display: flex; align-items: center; gap: 6px; }

/* ------------------------------- */
/* wallet: the "Your Credit" card (brand gradient, white type) */
/* ------------------------------- */
.ng-money .ng-credit {
  position: relative; overflow: hidden; isolation: isolate; padding: 20px; border: 0; border-radius: var(--ng-r); color: #fff;
  background:
    radial-gradient(110% 90% at 100% 0%, hsl(0 0% 100% / .2), transparent 55%),
    linear-gradient(140deg, hsl(0 0% 0% / .24) 0%, hsl(0 0% 0% / .5) 100%),
    hsl(var(--primary));
  box-shadow: 0 18px 36px -24px hsl(var(--primary) / .8);
}
body.night-mode .ng-money .ng-credit {
  background:
    radial-gradient(110% 90% at 100% 0%, hsl(0 0% 100% / .14), transparent 55%),
    linear-gradient(140deg, hsl(0 0% 0% / .32) 0%, hsl(0 0% 0% / .6) 100%),
    hsl(var(--primary));
  box-shadow: none;
}
.ng-money .ng-credit::before, .ng-money .ng-credit::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; background: hsl(0 0% 100% / .08); pointer-events: none;
}
.ng-money .ng-credit::before { width: 210px; height: 210px; right: -64px; top: -96px; }
.ng-money .ng-credit::after { width: 150px; height: 150px; right: 40px; bottom: -104px; }
.ng-money .ng-credit__head { display: flex; align-items: center; gap: 12px; }
.ng-money .ng-credit__tile { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: hsl(0 0% 100% / .18); color: #fff; }
.ng-money .ng-credit__tile .ng-ico { width: 22px; height: 22px; }
.ng-money .ng-credit__titles { min-width: 0; }
.ng-money .ng-credit__titles h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.ng-money .ng-credit__titles small { display: block; margin-top: 2px; font-size: 12.5px; color: hsl(0 0% 100% / .82); }
.ng-money .ng-credit__label { margin-top: 22px; font-size: 13px; font-weight: 600; color: hsl(0 0% 100% / .85); }
.ng-money .ng-credit__amount {
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 38px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums;
}
.ng-money .ng-credit__amount .is-cur { margin-right: 3px; font-size: .55em; font-weight: 700; letter-spacing: 0; }
.ng-money .ng-credit__amount .is-cents { font-size: .6em; color: hsl(0 0% 100% / .62); }
.ng-money .ng-credit__amount .is-cents + .is-cur { margin: 0 0 0 3px; }
.ng-money .ng-credit__updated { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12.5px; color: hsl(0 0% 100% / .85); }
.ng-money .ng-credit__updated i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: hsl(140 90% 80%); box-shadow: 0 0 0 3px hsl(140 90% 80% / .25); }
.ng-money .ng-credit__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.ng-money .ng-credit__stat { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; border-radius: 14px; background: hsl(0 0% 100% / .14); }
.ng-money .ng-credit__sico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; }
.ng-money .ng-credit__sico .ng-ico { width: 16px; height: 16px; stroke-width: 2; }
.ng-money .ng-credit__stat.is-in .ng-credit__sico { color: hsl(140 70% 32%); }
.ng-money .ng-credit__stat.is-out .ng-credit__sico { color: hsl(2 72% 48%); }
.ng-money .ng-credit__sval { min-width: 0; line-height: 1.25; }
.ng-money .ng-credit__sval small { display: block; font-size: 12px; color: hsl(0 0% 100% / .82); }
.ng-money .ng-credit__sval b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.ng-money .ng-credit__note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: hsl(0 0% 100% / .14); font-size: 13.5px; color: hsl(0 0% 100% / .85); }
.ng-money .ng-credit__note b { font-weight: 700; color: #fff; }
.ng-money .ng-credit__acts { display: flex; gap: 10px; margin-top: 16px; }
.ng-money .ng-credit__btn {
  flex: 1 1 0; min-width: 0; height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px;
  border: 0; border-radius: 10px; background: hsl(0 0% 100% / .18); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background .15s;
}
.ng-money .ng-credit__btn:hover { background: hsl(0 0% 100% / .27); }
.ng-money .ng-credit__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ng-money .ng-credit__btn .ng-ico { width: 18px; height: 18px; }
.ng-money .ng-credit__btn--solid { background: #fff; color: var(--ng-ink-strong); }
.ng-money .ng-credit__btn--solid:hover { background: hsl(0 0% 100% / .9); }
body.night-mode .ng-money .ng-credit__btn--solid { background: var(--ng-card); color: var(--ng-ink-strong); }
body.night-mode .ng-money .ng-credit__btn--solid:hover { background: var(--ng-fill); }

/* wallet: transaction rows (round tinted icon or the person's picture, amount on the right) */
.ng-money .ng-tx, .ng-money .ng-pay { grid-template-columns: auto minmax(0, 1fr) auto; padding-top: 12px; padding-bottom: 12px; }
.ng-money .ng-tx.is-in { --h: 140; }
.ng-money .ng-tx.is-out { --h: 2; }
.ng-money .ng-tx__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--h) 80% 94%); color: hsl(var(--h) 70% 38%); }
body.night-mode .ng-money .ng-tx__icon { background: hsl(var(--h) 30% 18%); color: hsl(var(--h) 75% 65%); }
.ng-money .ng-tx__icon .ng-ico { width: 20px; height: 20px; }
.ng-money .ng-tx__ava { position: relative; display: block; width: 44px; height: 44px; }
.ng-money .ng-tx__ava img { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ng-money .ng-tx__badge {
  position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  background: hsl(var(--h) 70% 40%); color: #fff; box-shadow: 0 0 0 2px var(--ng-card);
}
.ng-money .ng-tx__badge .ng-ico { width: 12px; height: 12px; stroke-width: 2.4; }
.ng-money .ng-tx .ng-lrow__title { font-size: 15px; }
.ng-money .ng-tx .ng-lrow__sub, .ng-money .ng-pay .ng-lrow__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; overflow-wrap: anywhere; }
.ng-money .ng-tx__amount { justify-self: end; font-size: 15px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ng-money .ng-tx.is-in .ng-tx__amount { color: hsl(140 65% 30%); }
body.night-mode .ng-money .ng-tx.is-in .ng-tx__amount { color: hsl(140 60% 62%); }
.ng-money .ng-tx.is-out .ng-tx__amount { color: hsl(var(--destructive)); }

/* ------------------------------- */
/* packages: pricing cards, tinted by the package colour (--h) */
/* ------------------------------- */
.ng-money .ng-plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; align-items: stretch;
  width: 100%; max-width: calc(var(--n, 3) * 380px + (var(--n, 3) - 1) * 16px); margin-inline: auto;
}
.ng-money .ng-plan {
  display: flex; flex-direction: column; margin: 0; padding: 20px; border: 0; border-radius: var(--ng-r);
  background: linear-gradient(180deg, hsl(var(--h) 85% 55% / .16), transparent 150px), var(--ng-card);
}
body.night-mode .ng-money .ng-plan { background: linear-gradient(180deg, hsl(var(--h) 70% 45% / .2), transparent 150px), var(--ng-card); }
.ng-money .ng-plan.is-current { box-shadow: inset 0 0 0 2px hsl(var(--primary) / .55); }
.ng-money .ng-plan__head { display: flex; align-items: center; gap: 12px; }
.ng-money .ng-plan__icon {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 14px;
  background: linear-gradient(145deg, hsl(var(--h) 85% 60%), hsl(calc(var(--h) + 25) 75% 45%)); color: #fff;
  box-shadow: 0 10px 22px -12px hsl(var(--h) 70% 35% / .6);
}
.ng-money .ng-plan__icon .ng-ico { width: 24px; height: 24px; }
.ng-money .ng-plan__icon img { width: 100%; height: 100%; object-fit: cover; }
.ng-money .ng-plan__titles { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ng-money .ng-plan__name { margin: 0; overflow-wrap: anywhere; font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--ng-ink-strong); }
.ng-money .ng-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 18px; }
.ng-money .ng-plan__price b { font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }
.ng-money .ng-plan__price span { font-size: 13.5px; color: var(--ng-sub); }
.ng-money .ng-plan__list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--ng-line); list-style: none; }
.ng-money .ng-plan__feat { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ng-ink); }
.ng-money .ng-plan__feat small { color: var(--ng-sub); }
.ng-money .ng-plan__feat.is-off { color: var(--ng-sub); }
.ng-money .ng-plan__mark { width: 20px; height: 20px; flex: none; display: grid; place-items: center; margin-top: 0; border-radius: 50%; }
.ng-money .ng-plan__mark .ng-ico { width: 12px; height: 12px; stroke-width: 2.6; }
.ng-money .is-on > .ng-plan__mark { background: hsl(140 70% 92%); color: hsl(140 70% 32%); }
.ng-money .is-off > .ng-plan__mark { background: var(--ng-fill); color: var(--ng-faint); }
body.night-mode .ng-money .is-on > .ng-plan__mark { background: hsl(140 35% 18%); color: hsl(140 60% 62%); }
.ng-money .ng-plan__more {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; margin-top: 16px; padding: 0 12px; border: 0; border-radius: 10px;
  background: var(--ng-fill); color: var(--ng-ink-strong); font-size: 14px; font-weight: 700; text-align: start; cursor: pointer;
}
.ng-money .ng-plan__more:hover { background: var(--ng-fill-2); }
.ng-money .ng-plan__more .ng-ico { width: 18px; height: 18px; flex: none; color: hsl(var(--h) 70% 42%); }
body.night-mode .ng-money .ng-plan__more .ng-ico { color: hsl(var(--h) 75% 65%); }
.ng-money .ng-plan__more span { flex: 1; }
.ng-money .ng-plan__more .ng-plan__caret { color: var(--ng-sub); transition: rotate .2s; }
.ng-money .ng-plan__more[aria-expanded="true"] .ng-plan__caret { rotate: 180deg; }
.ng-money .ng-plan__list--perms { margin-top: 12px; padding-top: 0; border-top: 0; }
.ng-money .ng-plan__desc { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: hsl(var(--h) 80% 95%); font-size: 13.5px; line-height: 1.5; color: var(--ng-ink); }
body.night-mode .ng-money .ng-plan__desc { background: hsl(var(--h) 30% 15%); }
.ng-money .ng-plan__cta { margin-top: auto; padding-top: 18px; }

/* packages: upgraded */
.ng-money .ng-done {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 640px; margin: 0 auto; padding: 32px 24px;
  border: 0; border-radius: var(--ng-r); text-align: center;
  background: radial-gradient(80% 60% at 50% 0%, hsl(var(--primary) / .18), transparent 70%), var(--ng-card);
}
.ng-money .ng-done__art { margin: 0 0 12px; }
.ng-money .ng-done__title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--ng-ink-strong); }
.ng-money .ng-done__sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 16px; color: var(--ng-ink); }
.ng-money .ng-done__line { margin: 6px 0 0; font-size: 14.5px; color: var(--ng-sub); }
.ng-money .ng-done__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ng-money .ng-done .ng-pbtn { margin-top: 12px; }

/* ------------------------------- */
/* ads: totals, campaign rows, the wallet side card, the campaign form */
/* ------------------------------- */
/* the wallet pill beside the tabs: from 576px (on phones the side card shows the balance) */
@media (max-width: 575.98px) { .ng-money .ng-ptabs__acts--wide { display: none; } }
.ng-money .adblock-warning-message { margin: 0; padding: 14px 16px; border-radius: var(--ng-r-md); background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); font-size: 14px; font-weight: 600; text-align: start; }
.ng-money .ng-adstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ng-money .ng-hub__main { container-type: inline-size; }
@container (min-width: 720px) { .ng-money .ng-adstats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.ng-money .ng-astat { display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0; margin: 0; padding: 14px; border: 0; border-radius: var(--ng-r); }
.ng-money .ng-astat .ng-lrow__icon { width: 40px; height: 40px; flex: none; border-radius: 12px; }
.ng-money .ng-astat .ng-lrow__icon .ng-ico { width: 20px; height: 20px; }
.ng-money .ng-astat > div { min-width: 0; line-height: 1.2; }
.ng-money .ng-astat b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 800; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }
.ng-money .ng-astat small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ng-sub); }

.ng-money .ng-camp {
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead main acts" "lead stats stats"; row-gap: 12px; align-items: start;
}
.ng-money .ng-camp > .ng-lrow__lead { grid-area: lead; }
.ng-money .ng-camp > .ng-lrow__main { grid-area: main; align-self: center; }
.ng-money .ng-camp__stats { grid-area: stats; display: flex; flex-wrap: wrap; gap: 8px; }
.ng-money .ng-camp__stats .ng-sbox { flex: 1 1 0; min-width: 0; }
.ng-money .ng-camp__stats .ng-sbox b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.ng-money .ng-camp__acts { grid-area: acts; }
/* stats beside the title only when the list card is wide enough (it sits beside the side column from 1024px) */
.ng-money .ng-camps { container-type: inline-size; }
@container (min-width: 720px) {
  .ng-money .ng-camp { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "lead main stats acts"; align-items: center; }
  .ng-money .ng-camp__stats { flex-wrap: nowrap; }
  .ng-money .ng-camp__stats .ng-sbox { flex: none; min-width: 72px; }
}
.ng-money .ng-camp__thumb { display: block; width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: var(--ng-fill); }
.ng-money .ng-camp .ng-lrow__meta .ng-ico { width: 14px; height: 14px; }
.ng-money .ng-camp__dates { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ng-money .ng-stopico { display: block; width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 3px; }

.ng-money .ng-adbal { text-align: center; }
.ng-money .ng-adbal b { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }

.ng-money .ng-campform { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.ng-money .ng-campform .ng-fcard__body .row.form-group { --bs-gutter-y: 16px; }
.ng-money .ng-campform select[multiple] { min-height: 132px; padding: 8px; }
.ng-money .ng-reach { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--ng-fill); font-size: 14px; color: var(--ng-sub); }
.ng-money .ng-reach .ng-lrow__icon { width: 36px; height: 36px; border-radius: 10px; }
.ng-money .ng-reach .ng-lrow__icon .ng-ico { width: 18px; height: 18px; }
.ng-money .ng-reach b { font-size: 18px; font-weight: 800; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }
.ng-money .ng-reach__load { margin-left: auto; color: var(--ng-brand); }
.ng-money .ng-campform__media .x-image { width: 100%; }
.ng-money .ng-campform__preview { overflow: hidden; }
.ng-money .ng-campform__preview > a img, .ng-money .ng-campform__preview > a video { border-radius: 14px; }
.ng-money .ng-campform__ptext { padding: 10px 2px 0; }
.ng-money .ng-campform__ptext p { margin: 0; }
.ng-money .ng-campform__ptext .ads-title { font-weight: 700; }
.ng-money .ng-campform__ptext .ads-title a { color: var(--ng-ink-strong); }
.ng-money .ng-campform__ptext .ads-descrition { margin-top: 4px; font-size: 13px; color: var(--ng-sub); }
.ng-money .ng-campform__alerts { padding: 0 20px; }
.ng-money .ng-campform__alerts .alert { margin: 16px 0 0; }
.ng-money .ng-campform__bar .ng-fcard__foot { border-top: 0; }
.ng-money .ng-campform__bar .ng-fcard__foot .ng-pbtn:first-child { margin-right: auto; }

/* ------------------------------- */
/* developers: the docs article, code blocks, steps, apps rows, the narrow form */
/* ------------------------------- */
.ng-money .ng-doc { margin: 0; border: 0; border-radius: var(--ng-r); }
.ng-money .ng-doc__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 18px 20px; border-bottom: 1px solid var(--ng-line); }
.ng-money .ng-doc__head h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.015em; color: var(--ng-ink-strong); }
.ng-money .ng-doc__body { padding: 20px; font-size: 15px; line-height: 1.65; color: var(--ng-ink); }
@media (min-width: 768px) { .ng-money .ng-doc__body { padding: 24px 28px 28px; } }
.ng-money .ng-doc__body p { margin: 0 0 12px; }
.ng-money .ng-doc__lead { font-size: 16px; color: var(--ng-ink-strong); }
.ng-money .ng-doc__sec { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--ng-line); scroll-margin-top: calc(var(--ng-top, 56px) + 20px); }
.ng-money .ng-doc__sec h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--ng-ink-strong); }
.ng-money .ng-doc__btn { margin-top: 10px; }
.ng-money .ng-doc__shot { margin: 12px 0 0; text-align: center; }
.ng-money .ng-doc__shot img { border-radius: 14px; box-shadow: 0 0 0 1px var(--ng-line); }
/* niguro [Developers]: the drawn "Log in With" step (__ng_dev_login_art.tpl) */
.ng-money .ng-devart { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; }
.ng-money .ng-chip {
  display: inline; padding: 2px 6px; border-radius: 6px; background: hsl(var(--primary) / .1); color: var(--ng-brand);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; font-weight: 600; line-height: 1; white-space: nowrap;
}
.ng-money .ng-steps { counter-reset: ngstep; display: flex; flex-direction: column; gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; }
.ng-money .ng-steps > li { position: relative; min-width: 0; padding-left: 40px; counter-increment: ngstep; }
.ng-money .ng-steps > li::before {
  content: counter(ngstep); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: var(--ng-tile); color: var(--ng-brand); font-size: 13px; font-weight: 800; line-height: 1;
}
.ng-money .ng-steps > li > * + * { margin-top: 10px; }
.ng-money .ng-code { overflow: hidden; border-radius: 14px; background: var(--ng-fill); box-shadow: inset 0 0 0 1px var(--ng-line); }
.ng-money .ng-code__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--ng-line); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ng-sub); }
.ng-money .ng-code__copy { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--ng-card); color: var(--ng-ink-strong); font-size: 12.5px; font-weight: 700; letter-spacing: 0; cursor: pointer; }
.ng-money .ng-code__copy:hover { background: var(--ng-fill-2); }
.ng-money .ng-code pre {
  margin: 0; padding: 14px 16px; overflow-x: auto; border: 0; background: transparent; color: var(--ng-ink-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; white-space: pre; tab-size: 2;
}
.ng-money .ng-doc__table { overflow-x: auto; margin: 0 0 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--ng-line); }
.ng-money .ng-doc__table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ng-money .ng-doc__table th { padding: 10px 14px; background: var(--ng-fill); text-align: start; font-size: 12.5px; font-weight: 700; color: var(--ng-sub); }
.ng-money .ng-doc__table td { padding: 12px 14px; border-top: 1px solid var(--ng-line); color: var(--ng-ink); }

.ng-money .ng-app { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead main acts" "keys keys keys"; row-gap: 12px; }
@media (min-width: 768px) { .ng-money .ng-app { grid-template-areas: "lead main acts" "lead keys keys"; } }
.ng-money .ng-app > .ng-lrow__lead { grid-area: lead; align-self: start; }
.ng-money .ng-app > .ng-lrow__main { grid-area: main; }
.ng-money .ng-app__acts { grid-area: acts; }
.ng-money .ng-app__keys { grid-area: keys; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
@media (min-width: 1024px) { .ng-money .ng-app__keys { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.ng-money .ng-app__icon { display: block; width: 46px; height: 46px; border-radius: 14px; object-fit: cover; background: var(--ng-fill); }
.ng-money .ng-app__icon--sm { width: 40px; height: 40px; border-radius: 12px; }
.ng-money .ng-app__domain { display: inline-flex; align-items: center; gap: 5px; overflow-wrap: anywhere; }
.ng-money .ng-app .ng-lrow__meta .ng-ico { width: 14px; height: 14px; }
.ng-money .ng-key { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 12px; border-radius: 12px; background: var(--ng-fill); }
.ng-money .ng-key small { font-size: 11.5px; font-weight: 600; color: var(--ng-sub); }
.ng-money .ng-key code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ng-ink-strong); font-size: 12.5px; user-select: all; }
.ng-money .ng-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; }

.ng-money .ng-fcard--narrow { width: 100%; max-width: 760px; margin-inline: auto; }
.ng-money .ng-fcard--narrow .ng-fcard__body .row.form-group { --bs-gutter-y: 16px; }
.ng-money .ng-fcard__back { margin-right: auto; }

/* ------------------------------- */
/* ads analytics (__ng_ads_report.tpl): the Ads Manager's campaign page (/ads/stats/<id>) and Admin › Ads ›   */
/* Analytics. Not scoped to .ng-money, so the admin card uses it too. Tiles, budget meter, the daily chart   */
/* (inline SVG bars; the card's data-metric picks Impressions / Clicks / Spend), the placements' rows.       */
/* ------------------------------- */
.ng-adan { display: flex; flex-direction: column; gap: 16px; min-width: 0; container-type: inline-size; }
.ng-adan .card { margin: 0; }
.ng-money .ng-adan__warn { margin: 0 18px 16px; }

.ng-adan__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container (min-width: 720px) { .ng-adan__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.ng-adan__tile { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px; border-radius: var(--ng-r); background: var(--ng-card); }
.ng-adan__tile .ng-lrow__icon { width: 40px; height: 40px; flex: none; border-radius: 12px; }
.ng-adan__tile .ng-lrow__icon .ng-ico { width: 20px; height: 20px; }
.ng-adan__tile > div { min-width: 0; line-height: 1.2; }
.ng-adan__tile b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; font-weight: 800; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }
.ng-adan__tile small { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--ng-ink); }
.ng-adan__tile em { display: block; margin-top: 3px; font-size: 12px; font-style: normal; color: var(--ng-sub); }
@media (max-width: 400px) {
  .ng-adan__tile { flex-direction: column; gap: 10px; padding: 12px; }
  .ng-adan__tile b { font-size: 18px; }
}

.ng-adan__budget { padding: 16px 18px; border-radius: var(--ng-r); background: var(--ng-card); }
.ng-adan__budgethead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-size: 14px; color: var(--ng-sub); }
.ng-adan__budgethead b { font-size: 17px; font-weight: 800; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }
.ng-adan__budgethead b small { font-size: 13px; font-weight: 600; color: var(--ng-sub); }
.ng-adan__meter { height: 8px; margin: 10px 0 12px; overflow: hidden; border-radius: 999px; background: var(--ng-fill); }
.ng-adan__meter > span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--ng-brand); }
.ng-adan__budgetfoot { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ng-sub); }
.ng-adan__budgetfoot b { font-weight: 700; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }

/* the chart card */
.ng-adan__chartcard .ng-lcard__head { flex-wrap: wrap; }
.ng-adan__range a { flex: none; height: 30px; padding: 0 12px; font-size: 13px; }
.ng-adan__chartbody { padding: 14px 18px 16px; }
.ng-adan__metrics { display: flex; width: 100%; max-width: 520px; }
.ng-adan__metrics button { flex: 1 1 0; min-width: 0; height: auto; min-height: 40px; padding: 4px 8px; flex-direction: column; justify-content: center; gap: 0; line-height: 1.2; cursor: pointer; }
.ng-adan__metrics button b { font-size: 14px; font-weight: 800; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }
.ng-adan__chart { position: relative; margin-top: 16px; padding-top: 22px; }
.ng-adan__max { display: none; position: absolute; top: 0; left: 0; font-size: 12px; font-weight: 600; color: var(--ng-sub); font-variant-numeric: tabular-nums; }
.ng-adan__svg { display: block; width: 100%; height: 180px; overflow: visible; }
@media (min-width: 768px) { .ng-adan__svg { height: 220px; } }
.ng-adan__grid { stroke: var(--ng-line); stroke-width: 1; }
.ng-adan__bars { display: none; fill: var(--ng-brand); }
.ng-adan__bars rect:hover { fill-opacity: .75; }
[data-metric="views"] .ng-adan__bars--views, [data-metric="clicks"] .ng-adan__bars--clicks, [data-metric="spend"] .ng-adan__bars--spend { display: inline; }
[data-metric="views"] .ng-adan__max--views, [data-metric="clicks"] .ng-adan__max--clicks, [data-metric="spend"] .ng-adan__max--spend { display: block; }
.ng-adan__axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: 6px; font-size: 11.5px; color: var(--ng-sub); }
.ng-adan__axis span { overflow: visible; white-space: nowrap; text-align: center; }
.ng-adan__axis span:first-child { text-align: left; }
.ng-adan__axis span:last-child { text-align: right; }
.ng-adan__note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ng-sub); }
.ng-adan__empty { padding: 28px 12px 12px; }
.ng-adan__headnote { font-size: 13px; font-weight: 500; color: var(--ng-sub); }

/* placements: name + share bar, then the numbers (a row of labelled cells on narrow cards) */
.ng-adan__prow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; padding: 14px 18px; align-items: center; }
.ng-adan__prow + .ng-adan__prow { border-top: 1px solid var(--ng-line); }
.ng-adan__prow--head { display: none; }
.ng-adan__pname { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ng-adan__pname b { font-size: 14.5px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-adan__pname small { font-size: 12px; color: var(--ng-sub); }
.ng-adan__share { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--ng-fill); }
.ng-adan__share > span { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--ng-brand); }
.ng-adan__num { min-width: 0; font-size: 14px; font-weight: 700; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ng-adan__num::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 600; color: var(--ng-sub); }
@container (min-width: 640px) {
  .ng-adan__prow { grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(0, 1fr)); }
  .ng-adan__prow--head { display: grid; padding-top: 10px; padding-bottom: 10px; background: var(--ng-fill); font-size: 12px; font-weight: 700; color: var(--ng-sub); }
  .ng-adan__prow--head + .ng-adan__prow { border-top: 0; }
  .ng-adan__prow--head > span:not(:first-child), .ng-adan__num { text-align: right; }
  .ng-adan__pname { grid-column: auto; }
  .ng-adan__num::before { display: none; }
}

/* Admin › Ads › Analytics: top campaigns and System Ads tables in the admin card */
.ng-adan-admin .table td, .ng-adan-admin .table th { vertical-align: middle; }
.ng-adan-admin .ng-adan__sub { margin: 4px 0 0; font-size: 12.5px; color: var(--ng-sub); }

/* the ads' labels: "Sponsored · Why this ad?" on Ads Manager campaigns (_ads_campaigns.tpl) and
   "Advertisement · About ads" on the ad slots (__ng_adslot.tpl) — quiet links in the label's own colour */
.ng-adwhy { font-size: 13px; font-weight: 400; color: var(--ng-sub); }
.ng-adwhy a, .ng-adslot__label a { color: inherit; text-decoration: none; }
.ng-adwhy a:hover, .ng-adslot__label a:hover { color: var(--ng-brand); text-decoration: underline; }

/* ------------------------------- */
/* [Wallet app] (begin) — wallet.tpl's Wallet tab as an app (includes/niguro/wallet/wallet.php, niguro-wallet.js).   */
/* Phones and tablets: one column — the balance card, quick actions, This month, the transactions by day, the       */
/* credits (the hero only from 768px; the 30 days chart from 768px). 1024px up: a dashboard, 360px left column       */
/* (balance, actions, month, credits) and the chart + transactions table on the right. Details: #ng-txsheet.          */
/* ------------------------------- */
@media (max-width: 767.98px) {
  .ng-money .ng-wpage__hero { display: none; }
  .ng-money .ng-wpage__hero + .ng-ptabs { margin-top: 0; }
}
.ng-money .ng-wapp { display: flex; flex-direction: column; gap: 16px; }
.ng-money .ng-wapp > * > .card { margin: 0; }
@media (max-width: 1023.98px) {
  .ng-money .ng-wapp__side, .ng-money .ng-wapp__main { display: contents; }
  .ng-money .ng-wapp .ng-credit { order: 1; }
  .ng-money .ng-wapp .ng-wacts { order: 2; }
  .ng-money .ng-wapp .ng-wmonth { order: 3; }
  .ng-money .ng-wapp .ng-wchart { order: 4; }
  .ng-money .ng-wapp .ng-wtx { order: 5; }
  .ng-money .ng-wapp .ng-credits { order: 6; }
}
@media (min-width: 1024px) {
  .ng-money .ng-wapp { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; }
  .ng-money .ng-wapp__side, .ng-money .ng-wapp__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
}
/* the balance card leads on phones: a little tighter */
@media (max-width: 767.98px) {
  .ng-money .ng-wapp .ng-credit { padding: 18px; }
  .ng-money .ng-wapp .ng-credit__label { margin-top: 16px; }
}

/* quick actions: round tiles with a label under, as many columns as there are actions */
.ng-money .ng-wacts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 14px 8px 12px; border: 0; border-radius: var(--ng-r); }
.ng-money .ng-wact {
  display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 2px; border: 0; border-radius: 14px; background: transparent;
  color: var(--ng-ink-strong); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
}
.ng-money .ng-wact__ico { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--ng-tile); color: var(--ng-brand); transition: background .15s, transform .15s; }
.ng-money .ng-wact__ico .ng-ico { width: 22px; height: 22px; }
.ng-money .ng-wact:hover { color: var(--ng-ink-strong); }
.ng-money .ng-wact:hover .ng-wact__ico { background: hsl(var(--primary) / .18); }
.ng-money .ng-wact:active .ng-wact__ico { transform: scale(.94); }
.ng-money .ng-wact:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
/* niguro [Nepali completion]: a longer label (Nepali "रकम थप्नुहोस्") wraps to a second line, the theme's 2-line clamp */
.ng-money .ng-wact__label { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-align: center; line-height: 1.25; }

/* This month: tinted tiles (money in, out, ads, packages) */
.ng-money .ng-wmonth__when { font-size: 13px; font-weight: 500; color: var(--ng-sub); }
.ng-money .ng-wmonth__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 16px; }
.ng-money .ng-wmonth__tile { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border-radius: 14px; background: var(--ng-fill); }
.ng-money .ng-wmonth__ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--h) 80% 92%); color: hsl(var(--h) 70% 36%); }
body.night-mode .ng-money .ng-wmonth__ico { background: hsl(var(--h) 30% 20%); color: hsl(var(--h) 75% 66%); }
.ng-money .ng-wmonth__ico .ng-ico { width: 18px; height: 18px; }
.ng-money .ng-wmonth__val { min-width: 0; line-height: 1.25; }
.ng-money .ng-wmonth__val small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ng-sub); }
.ng-money .ng-wmonth__val b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }

/* the last 30 days: paired bars (in, out) on the ads analytics chart pattern; from 768px */
.ng-money .ng-wchart { display: none; }
@media (min-width: 768px) { .ng-money .ng-wchart { display: block; } }
.ng-money .ng-wchart__net { font-size: 13px; font-weight: 500; color: var(--ng-sub); }
.ng-money .ng-wchart__net b { font-weight: 800; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }
.ng-money .ng-wchart__body { padding: 14px 18px 16px; }
.ng-money .ng-wchart__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ng-sub); }
.ng-money .ng-wchart__legend span { display: inline-flex; align-items: center; gap: 6px; }
.ng-money .ng-wchart__legend i { width: 10px; height: 10px; border-radius: 3px; }
.ng-money .ng-wchart__legend b { font-weight: 800; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }
.ng-money .ng-wchart__legend .is-in i { background: hsl(140 55% 42%); }
.ng-money .ng-wchart__legend .is-out i { background: hsl(var(--destructive)); }
.ng-money .ng-wchart__svg .is-in { fill: hsl(140 55% 42%); }
.ng-money .ng-wchart__svg .is-out { fill: hsl(var(--destructive)); }
.ng-money .ng-wchart__plot { position: relative; margin-top: 12px; padding-top: 20px; }
.ng-money .ng-wchart__max { position: absolute; top: 0; left: 0; font-size: 12px; font-weight: 600; color: var(--ng-sub); font-variant-numeric: tabular-nums; }
.ng-money .ng-wchart__svg { display: block; width: 100%; height: 150px; overflow: visible; }
@media (min-width: 1024px) { .ng-money .ng-wchart__svg { height: 170px; } }
.ng-money .ng-wchart__grid { stroke: var(--ng-line); stroke-width: 1; }
.ng-money .ng-wchart__svg g:hover rect { fill-opacity: .75; }
.ng-money .ng-wchart__axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-top: 6px; font-size: 11.5px; color: var(--ng-sub); }
.ng-money .ng-wchart__axis span { overflow: visible; white-space: nowrap; text-align: center; }
.ng-money .ng-wchart__axis span:first-child { text-align: left; }
.ng-money .ng-wchart__axis span:last-child { text-align: right; }
.ng-money .ng-wchart__empty { padding: 28px 12px 12px; }

/* transactions: search + filter chips, days, rows (a table from 700px of card) */
.ng-money .ng-wtx { container-type: inline-size; }
.ng-money .ng-wtx__stmt { height: 34px; padding: 0 12px; font-size: 13px; }
.ng-money .ng-wtx__stmt .ng-ico { width: 16px; height: 16px; color: inherit; }
.ng-money .ng-wtx__tools { display: grid; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ng-line); }
.ng-money .ng-wtx__search { position: relative; display: block; margin: 0; }
.ng-money .ng-wtx__search > .ng-ico { position: absolute; left: 13px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--ng-sub); pointer-events: none; }
.ng-money .ng-wtx__search input { padding-left: 40px !important; border-radius: 999px; }
.ng-money .ng-wtx__chips { margin: 0 -2px; }
.ng-money .ng-wtx__chips > button { cursor: pointer; /* [Chips: one size] */ }
@container (min-width: 700px) {
  .ng-money .ng-wtx__tools { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); align-items: center; }
  .ng-money .ng-wtx__chips { flex-wrap: wrap; overflow: visible; }
}
.ng-money .ng-wtx__day + .ng-wtx__day { border-top: 1px solid var(--ng-line); }
.ng-money .ng-wtx__dayhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0; padding: 14px 18px 4px; font-size: 13.5px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-money .ng-wtx__dayhead small { display: inline-flex; gap: 10px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ng-money .ng-wtx__dayhead .is-in { color: hsl(140 65% 30%); }
body.night-mode .ng-money .ng-wtx__dayhead .is-in { color: hsl(140 60% 62%); }
.ng-money .ng-wtx__dayhead .is-out { color: var(--ng-sub); }
.ng-money .ng-wtx__row { width: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; font: inherit; text-align: start; cursor: pointer; }
.ng-money .ng-wtx__row:hover { background: var(--ng-fill); }
.ng-money .ng-wtx__row:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: -2px; }
.ng-money .ng-wtx__dayhead + .ng-wtx__row { border-top: 0; }
.ng-money .ng-wtx__row .ng-lrow__sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-money .ng-wtx__kind, .ng-money .ng-wtx__bal, .ng-money .ng-wtx__head { display: none; }
@container (min-width: 700px) {
  .ng-money .ng-wtx__row, .ng-money .ng-wtx__head { grid-template-columns: 44px minmax(0, 1fr) 128px 120px 120px; }
  .ng-money .ng-wtx__kind, .ng-money .ng-wtx__bal { display: block; min-width: 0; }
  .ng-money .ng-wtx__kind .ng-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .ng-money .ng-wtx__bal { font-size: 13.5px; color: var(--ng-sub); text-align: right; font-variant-numeric: tabular-nums; }
  .ng-money .ng-wtx__head { display: grid; gap: 14px; padding: 8px 18px; background: var(--ng-fill); font-size: 12px; font-weight: 700; color: var(--ng-sub); }
  .ng-money .ng-wtx__head > :first-child { grid-column: 1 / 3; }
  .ng-money .ng-wtx__head > :nth-child(n+3) { text-align: right; }
}
/* a tile colour per kind (the amount keeps green in / red out) */
.ng-wtx__ico--add, .ng-wtx__ico--refund { --h: 140; }
.ng-wtx__ico--earnings { --h: 165; }
.ng-wtx__ico--transfer { --h: 210; }
.ng-wtx__ico--ads { --h: 38; }
.ng-wtx__ico--packages { --h: 270; }
.ng-wtx__ico--payments { --h: 330; }
.ng-wtx__ico--withdraw { --h: 2; }

/* a transaction's details (#ng-txsheet, moved to <body>; a bottom sheet under 1024px, see niguro.css) */
.ng-txsheet .modal-header { padding: 14px 12px 4px 18px; border: 0; }
.ng-txsheet .modal-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--ng-ink-strong); }
.ng-txsheet .modal-body { padding: 4px 18px 8px; }
.ng-txsheet .modal-footer { gap: 8px; padding: 10px 18px 16px; border: 0; }
.ng-txsheet .modal-footer > * { margin: 0; }
@media (max-width: 1023.98px) { .ng-txsheet .modal-footer > * { flex: 1 1 0; } }
@media (min-width: 1024px) {
  .ng-txsheet .modal-dialog { max-width: 440px; }
  .ng-txsheet .modal-content { border-radius: 20px; box-shadow: 0 12px 40px hsl(30 20% 10% / .16); }
}
.ng-txsheet__hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 18px; text-align: center; }
.ng-txsheet__lead.is-in { --h: 140; }
.ng-txsheet__lead.is-out { --h: 2; }
.ng-txsheet__lead .ng-tx__icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--h) 80% 94%); color: hsl(var(--h) 70% 38%); }
body.night-mode .ng-txsheet__lead .ng-tx__icon { background: hsl(var(--h) 30% 18%); color: hsl(var(--h) 75% 65%); }
.ng-txsheet__lead .ng-tx__icon .ng-ico { width: 28px; height: 28px; }
.ng-txsheet__lead .ng-tx__ava { position: relative; display: block; width: 60px; height: 60px; }
.ng-txsheet__lead .ng-tx__ava img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.ng-txsheet__lead .ng-tx__badge { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: hsl(var(--h) 70% 40%); color: #fff; box-shadow: 0 0 0 2px var(--ng-card); }
.ng-txsheet__lead .ng-tx__badge .ng-ico { width: 12px; height: 12px; stroke-width: 2.4; }
.ng-txsheet__amount { margin-top: 4px; font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ng-txsheet__amount.is-in { color: hsl(140 65% 30%); }
body.night-mode .ng-txsheet__amount.is-in { color: hsl(140 60% 62%); }
.ng-txsheet__amount.is-out { color: var(--ng-ink-strong); }
.ng-txsheet__title { max-width: 100%; overflow-wrap: anywhere; font-size: 15px; font-weight: 600; color: var(--ng-ink); }
.ng-txsheet__kv { gap: 0; overflow: hidden; border-radius: 14px; background: var(--ng-fill); }
.ng-txsheet__kv > div { gap: 16px; padding: 10px 14px; border-radius: 0; background: transparent; }
.ng-txsheet__kv > div + div { border-top: 1px solid var(--ng-line); }
.ng-txsheet__kv > div b { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.ng-txsheet__kv > div[hidden] { display: none; }
.ng-txsheet__link { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--ng-fill); }
.ng-txsheet__link:hover { background: var(--ng-fill-2); }
.ng-txsheet__link[hidden] { display: none; }
.ng-txsheet__link .ng-lrow__icon { width: 34px; height: 34px; border-radius: 10px; }
.ng-txsheet__link .ng-lrow__icon .ng-ico { width: 18px; height: 18px; }
.ng-txsheet__link .ng-lrow__title { font-size: 14.5px; }
.ng-txsheet__link .ng-lrow__chev { display: grid; place-items: center; color: var(--ng-faint, var(--ng-sub)); }
.ng-txsheet__link .ng-lrow__chev .ng-ico { width: 18px; height: 18px; }
.ng-txsheet .ng-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

/* Statements: the download form (month or dates by the radio, :has()), the help card, the months list */
.ng-money .ng-wst:has(#ng-wst-bydates:checked) .ng-wst__month { display: none; }
.ng-money .ng-wst:has(#ng-wst-bymonth:checked) .ng-wst__dates { display: none; }
.ng-money .ng-wst__note { margin: 0; font-size: 12.5px; color: var(--ng-sub); }
.ng-money .ng-wst .ng-fcard__foot { flex-wrap: wrap; }
.ng-money .ng-wst__help p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--ng-ink); }
.ng-money .ng-wst__help p:last-child { margin: 0; }
.ng-money .ng-wst__row { grid-template-columns: auto minmax(0, 1fr) auto; }
.ng-money .ng-wst__row .ng-lrow__icon { width: 40px; height: 40px; border-radius: 12px; }
.ng-money .ng-wst__row .ng-lrow__icon .ng-ico { width: 20px; height: 20px; }
.ng-money .ng-wst__row .ng-lrow__title { font-size: 15px; }
.ng-money .ng-wst__sofar { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--ng-sub); }
.ng-money .ng-wst__acts { display: flex; gap: 6px; }
.ng-money .ng-wst__acts .ng-pbtn { height: 32px; padding: 0 12px; font-size: 13px; }
.ng-money .ng-wst__months .ng-lcard__head { flex-wrap: wrap; }
.ng-money .ng-wst__months .ng-seg a { height: 30px; padding: 0 14px; font-size: 13px; }
/* [Wallet app] (end) */

/* ------------------------------- */
/* [Ads app] (begin) — ads.tpl on phones like an app: campaign cards (status, pause / resume switch, budget used,  */
/* numbers at a glance), the floating Create ad button, the campaign form in three steps (niguro-wallet.js);      */
/* 1024px up a tidy list in one card. The hero gives way under 768px (.ng-wpage__hero, [Wallet app] above).       */
/* ------------------------------- */
.ng-money .ng-camp {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "lead main toggle" "budget budget budget" "stats stats stats" "acts acts acts"; row-gap: 12px; align-items: start;
}
.ng-money .ng-camp > .ng-lrow__lead { grid-area: lead; }
.ng-money .ng-camp > .ng-lrow__main { grid-area: main; align-self: center; }
.ng-money .ng-camp__toggle { grid-area: toggle; align-self: center; }
.ng-money .ng-camp__budget { grid-area: budget; display: block; min-width: 0; }
.ng-money .ng-camp__budgetline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; font-size: 12.5px; color: var(--ng-sub); }
.ng-money .ng-camp__budgetline b { font-size: 13.5px; font-weight: 700; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }
.ng-money .ng-camp__budgetline small { font-size: 12px; font-weight: 500; color: var(--ng-sub); }
.ng-money .ng-camp__budget .ng-adan__meter { height: 6px; margin: 6px 0 0; }
.ng-money .ng-camp__stats { grid-area: stats; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ng-money .ng-camp__stats .ng-sbox { min-width: 0; padding: 8px 4px; }
.ng-money .ng-camp__stats .ng-sbox b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ng-money .ng-camp__stats .ng-sbox small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.ng-money .ng-camp__acts { grid-area: acts; justify-content: flex-end; }
.ng-money .ng-camp__an { height: 32px; margin-right: auto; padding: 0 12px; font-size: 13px; }
.ng-money .ng-camp__an .ng-ico { width: 16px; height: 16px; }
@container (min-width: 720px) {
  .ng-money .ng-camp {
    grid-template-columns: 56px minmax(0, 1fr) minmax(0, 330px) auto;
    grid-template-areas: "lead main stats toggle" "lead budget stats acts"; column-gap: 18px; row-gap: 10px; align-items: center;
  }
  .ng-money .ng-camp__stats { flex-wrap: nowrap; }
  .ng-money .ng-camp__stats .ng-sbox { flex: none; min-width: 0; }
  .ng-money .ng-camp__toggle { justify-self: end; }
  .ng-money .ng-camp__an { margin-right: 0; }
}
/* phones: each campaign its own card, the list head a plain section head (the floating button creates) */
@media (max-width: 767.98px) {
  .ng-money .ng-camps { overflow: visible; background: transparent; }
  .ng-money .ng-camps > .ng-lcard__head { min-height: 0; padding: 0 2px; border: 0; }
  .ng-money .ng-camps > .ng-lcard__head .ng-pbtn { display: none; }
  .ng-money .ng-camps > .ng-camp { margin-top: 12px; padding: 16px; border: 0; border-radius: var(--ng-r); background: var(--ng-card); }
  .ng-money .ng-camps > .ng-empty { margin-top: 12px; border-radius: var(--ng-r); background: var(--ng-card); }
  .ng-money .ng-camps > .ng-lcard__foot { padding: 12px 0 0; border: 0; }
}

/* the pause / resume switch (a role="switch" button on Sngine's stop / resume hooks) */
.ng-tswitch { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--ng-sub); font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.ng-tswitch__track { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--ng-fill-2, var(--ng-line)); transition: background .2s; }
.ng-tswitch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px hsl(220 20% 10% / .25); transition: transform .2s; }
.ng-tswitch[aria-checked="true"] { color: var(--ng-brand); }
.ng-tswitch[aria-checked="true"] .ng-tswitch__track { background: var(--ng-brand); }
.ng-tswitch[aria-checked="true"] .ng-tswitch__track::after { transform: translateX(16px); }
[dir="RTL"] .ng-tswitch[aria-checked="true"] .ng-tswitch__track::after { transform: translateX(-16px); }
.ng-tswitch:focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 3px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .ng-tswitch__track, .ng-tswitch__track::after { transition: none; } }

/* the floating Create ad button: over the bottom bar's search button, go to top rides above it */
.ng-adfab {
  position: fixed; z-index: 994; right: 12px; bottom: var(--ng-bnav-clear); display: inline-flex; /* [Bottom bar gap] */ align-items: center; gap: 8px;
  height: 48px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--ng-brand); color: hsl(var(--primary-foreground, 0 0% 100%));
  font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 8px 24px -8px hsl(var(--primary) / .7);
}
.ng-adfab:hover { color: hsl(var(--primary-foreground, 0 0% 100%)); filter: brightness(1.06); }
.ng-adfab .ng-ico { width: 22px; height: 22px; }
[dir="RTL"] .ng-adfab { right: auto; left: 12px; }
@media (min-width: 1024px) { .ng-adfab { display: none; } }
@media (max-width: 1023.98px) {
  body:has(.ng-adfab) { --ng-float: calc(48px + var(--ng-bnav-gap)); } /* [Bottom bar gap]: the button (48px) is the page's floating one */
  .ng-money:has(.ng-adfab) { padding-bottom: 64px; }
}

/* the analytics page: pause / resume, edit, billing under the campaign head */
.ng-money .ng-adan__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 0 18px 16px; }
.ng-money .ng-adan__acts .ng-tswitch { margin-right: auto; }

/* the campaign form in steps (phones; .is-stepped from niguro-wallet.js) */
.ng-money .ng-csteps { display: none; }
.ng-money .ng-campform__prev, .ng-money .ng-campform__next { display: none; }
.ng-money .ng-campform__next .ng-ico { width: 16px; height: 16px; }
.ng-money .ng-campform.is-stepped .ng-csteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ng-money .ng-csteps button {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 0 0 10px; border: 0; background: transparent;
  color: var(--ng-sub); font: inherit; font-size: 13px; font-weight: 700; text-align: start; cursor: pointer; position: relative;
}
.ng-money .ng-csteps button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 999px; background: var(--ng-fill-2, var(--ng-line)); }
.ng-money .ng-csteps b { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ng-fill); font-size: 12.5px; font-weight: 800; color: var(--ng-ink-strong); }
.ng-money .ng-csteps .is-on, .ng-money .ng-csteps .is-done { color: var(--ng-brand); }
.ng-money .ng-csteps .is-on::after, .ng-money .ng-csteps .is-done::after { background: var(--ng-brand); }
.ng-money .ng-csteps .is-on b { background: var(--ng-brand); color: #fff; }
.ng-money .ng-csteps .is-done b { background: var(--ng-tile); color: var(--ng-brand); }
.ng-money .ng-campform.is-stepped[data-step="1"] [data-ng-step]:not([data-ng-step="1"]),
.ng-money .ng-campform.is-stepped[data-step="2"] [data-ng-step]:not([data-ng-step="2"]),
.ng-money .ng-campform.is-stepped[data-step="3"] [data-ng-step]:not([data-ng-step="3"]) { display: none; }
.ng-money .ng-campform.is-stepped[data-step="1"] .ng-mlay__col:not(:has([data-ng-step="1"])),
.ng-money .ng-campform.is-stepped[data-step="2"] .ng-mlay__col:not(:has([data-ng-step="2"])),
.ng-money .ng-campform.is-stepped[data-step="3"] .ng-mlay__col:not(:has([data-ng-step="3"])) { display: none; }
.ng-money .ng-campform.is-stepped:not(.is-first) .ng-campform__back { display: none; }
.ng-money .ng-campform.is-stepped:not(.is-first) .ng-campform__prev { display: inline-flex; margin-right: auto; }
.ng-money .ng-campform.is-stepped:not(.is-last) .ng-campform__next { display: inline-flex; }
.ng-money .ng-campform.is-stepped:not(.is-last) .ng-campform__submit { display: none; }
/* the form sits under the tabs with the page kit's gap (its own margin: 0 above wins over the kit's) */
.ng-money > .ng-campform { margin-top: 16px; }
/* [Ads app] (end) */