/* Niguro page CSS: Settings (settings.tpl and its sections, settings.*.tpl; built on the page kit in
   niguro.css, see dev/niguro-kit.md). niguro.css keeps the frame, the menu panel and the back link;
   this file is the section card. Every rule is scoped to .ng-set (the settings frame), colours come
   from the tokens and --h tints.

   One section: the header (__ng_set_head.tpl: icon tile, title, one line, actions), the body (a stack:
   16px between stacked items, groups split by a hairline), field rows with the label above a filled
   field, switch rows and lists with hairlines between rows, and the save bar at the bottom (right
   on tablets and desktop; full width and sticking above the bottom bar on phones). */

/* ------------------------------- */
/* phones and tablets: the sections as tabs (__ng_set_tabs.tpl), as niguroapp's settings */
/* ------------------------------- */
/* Under 1024px the left menu is gone: one row of the sections above the card, the [Segments: one style] track
   (niguro.css) that scrolls sideways, the [Scroll arrows] (data-ng-scroll) and their soft edges on a mouse. It
   sticks under the header (--ng-header-h, as /cricket's tabs), on a strip of the canvas so the page passes
   under it; the strip starts at the header and the track 17px lower, clear of the header's 13px cloud edge
   (the same 20px under the header as the page before it sticks); the selected tab is scrolled into view by
   settings.tpl. A section with sub-pages adds a row of
   chips under it (.ng-chiprow, [Chips: one size]). 12px from the row to the chips and to the card. */
.ng-set .ng-set__tabbar {
  position: sticky; top: var(--ng-header-h, 56px); z-index: 20; margin: -17px 0 6px; padding: 17px 0 6px; background: var(--ng-canvas);
}
.ng-set .ng-set__tabs {
  display: flex; gap: var(--ng-seg-gap); padding: var(--ng-seg-pad); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  border-radius: var(--ng-seg-r); background: var(--ng-seg-bg); /* [Segments: one style] */
}
.ng-set .ng-set__tabs::-webkit-scrollbar { display: none; }
.ng-set .ng-set__tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ng-seg-h-lg); padding: 0 var(--ng-seg-px);
  border-radius: var(--ng-seg-r); color: var(--ng-seg-ink); font-size: var(--ng-seg-fs-lg); font-weight: var(--ng-seg-fw); line-height: 1; white-space: nowrap;
  text-decoration: none; transition: background-color .15s, color .15s; /* [Segments: one style] */
}
.ng-set .ng-set__tab:hover { background: var(--ng-seg-hover-bg); color: var(--ng-seg-hover-ink); text-decoration: none; }
.ng-set .ng-set__tab:focus-visible { outline: var(--ng-seg-focus); outline-offset: -2px; }
.ng-set .ng-set__tab.is-on, .ng-set .ng-set__tab.is-on:hover { background: var(--ng-seg-on-bg); color: var(--ng-seg-on-ink); box-shadow: var(--ng-seg-on-shadow); } /* [Segments: one style] */
.ng-set .ng-set__tab .ng-set__tabico { flex: none; width: var(--ng-seg-ico) !important; height: var(--ng-seg-ico) !important; margin: 0; padding: 0; background: none; }
.ng-set .ng-set__tab .ng-set__tabico svg { width: 100%; height: 100%; }
.ng-set .ng-set__subtabs { margin: -2px 0 10px; }
@media (min-width: 1024px) { .ng-set .ng-set__tabbar, .ng-set .ng-set__subtabs { display: none; } }

/* ------------------------------- */
/* the card and its header */
/* ------------------------------- */
/* Sngine's offcanvas frame clips with overflow: hidden, which makes it the scroll box of any sticky
   inside: on phones it clips without becoming one, so the save bar can stick above the bottom bar.
   (From 1024px it stays as it was: the menu panel, taller than the screen, scrolls with the page.) */
@media (max-width: 767.98px) { .ng-set.sg-offcanvas { overflow: clip; } }
.ng-set .ng-set__card { overflow: visible; }
.ng-set .ng-set__head {
  display: flex; align-items: center; gap: 14px; padding: 20px; border-bottom: 1px solid var(--ng-line);
}
.ng-set .ng-set__headicon {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--ng-tint);
}
.ng-set .ng-set__headicon .main-icon { width: 24px !important; height: 24px !important; margin: 0 !important; padding: 0; background: none; }
.ng-set .ng-set__headtext { flex: 1; min-width: 0; }
.ng-set .ng-set__group { margin-bottom: 2px; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--ng-brand); }
.ng-set .ng-set__title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--ng-ink-strong); overflow-wrap: anywhere; }
.ng-set .ng-set__sub { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ng-sub); }
.ng-set .ng-set__acts { flex: none; display: flex; gap: 8px; }
/* Sngine's own header comes right after ours: ours replaces it */
.ng-set .ng-set__head + .card-header.with-icon { display: none; }
@media (max-width: 767.98px) {
  .ng-set .ng-set__head { gap: 12px; padding: 16px; }
  .ng-set .ng-set__title { font-size: 19px; }
  /* phones: the header's actions are icon buttons (the label stays as aria-label) */
  .ng-set .ng-set__actlabel { display: none; }
  .ng-set .ng-set__acts .ng-pbtn { width: 38px; padding: 0; }
}

/* ------------------------------- */
/* the body: a stack, 16px between stacked items */
/* ------------------------------- */
.ng-set .ng-set__card .card-body { padding: 20px; }
@media (max-width: 767.98px) { .ng-set .ng-set__card .card-body { padding: 16px; } }
.ng-set .ng-set__card :is(.card-body, .card-body .pl-md-4, .card-body form, .ng-set__stack) { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ng-set .ng-set__card :is(.card-body, .card-body .pl-md-4, .card-body form, .ng-set__stack) > :not(.row) { margin-top: 0 !important; margin-bottom: 0 !important; }
.ng-set .ng-set__card .pl-md-4 { padding: 0 !important; }
/* rows of fields: 16px both ways (Bootstrap's gutters; their negative top margin meets the stack's gap) */
.ng-set .ng-set__card .row { --bs-gutter-x: 16px; --bs-gutter-y: 16px; margin-top: calc(-1 * var(--bs-gutter-y)) !important; margin-bottom: 0 !important; }
.ng-set .ng-set__card .row > * { margin-bottom: 0; }
.ng-set .ng-set__card .row.form-group { --bs-gutter-x: 0; --bs-gutter-y: 0; margin: 0 !important; padding: 0; border: 0; }
/* group titles and the hairline between groups */
.ng-set .ng-set__card .heading-small {
  display: flex; align-items: center; gap: 8px; padding: 0;
  font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; color: var(--ng-sub);
}
.ng-set .ng-set__card .heading-small .ng-tag { height: 20px; padding: 0 7px; font-size: 11.5px; letter-spacing: 0; text-transform: none; }
/* a group title sits 10px over its group */
.ng-set .ng-set__card :is(.card-body, .card-body .pl-md-4, .card-body form, .ng-set__stack) > .heading-small { margin-bottom: -6px !important; }
.ng-set .ng-set__card :is(.card-body, .card-body .pl-md-4, .card-body form, .ng-set__stack) > .divider {
  margin: 4px 0 !important; border-top: 1px solid var(--ng-line); border-top-style: solid;
}
.ng-set .ng-set__card .section-title { margin: 0 0 6px !important; padding: 0; background: none; text-align: start; font-size: 13px; font-weight: 600; color: var(--ng-sub); }
.ng-set .ng-set__card :is(.h5, .h6, h4, h5, h6) { color: var(--ng-ink-strong); }

/* ------------------------------- */
/* field rows: the label above a filled field (fields and switches are global: --ng-field-h, filled) */
/* ------------------------------- */
.ng-set .ng-set__card .form-group { margin-bottom: 0; padding-top: 0; padding-bottom: 0; border: 0; }
.ng-set .ng-set__card :is(.form-label, .row.form-group > label, .form-group > label) {
  display: block; margin: 0 0 6px; padding: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0;
  color: var(--ng-ink-strong); text-align: start;
}
.ng-set .ng-set__card .form-text { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--ng-sub); }
.ng-set .ng-set__card .form-control-plaintext { padding: 0; font-size: 14.5px; color: var(--ng-ink); }
.ng-set .ng-set__card .input-group-text { border: 0; background: var(--ng-fill-2); color: var(--ng-sub); }
.ng-set .ng-set__card .input-group-text.bg-transparent { background: var(--ng-fill-2) !important; }
.ng-set .ng-set__card .input-group-text .svg-container { display: grid; place-items: center; }
/* the birthdate's three selects stay on one line */
.ng-set .ng-set__card .form-group > .row:has(> .col > .form-select) { --bs-gutter-x: 8px; --bs-gutter-y: 0; margin-top: 0 !important; }

/* checkbox lists (email notifications) */
.ng-set .ng-set__card .form-check:not(.form-check-inline) { display: flex; align-items: flex-start; gap: 10px; min-height: 0; margin: 0 0 12px; padding: 0; }
.ng-set .ng-set__card .form-check:not(.form-check-inline):last-child { margin-bottom: 0; }
.ng-set .ng-set__card .form-check .form-check-input { float: none; flex: none; width: 20px; height: 20px; margin: 0; border-color: var(--ng-faint); }
.ng-set .ng-set__card .form-check .form-check-input[type="checkbox"] { border-radius: 6px; }
.ng-set .ng-set__card .form-check-label { padding-top: 1px; font-size: 14.5px; line-height: 1.4; color: var(--ng-ink); cursor: pointer; }
.ng-set .ng-set__card .form-check + .divider { margin: 4px 0 16px !important; }

/* radio choices as pills (payment methods) */
.ng-set .ng-set__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ng-set .ng-set__chip {
  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-set .ng-set__chip:hover { background: var(--ng-fill-2); }
.ng-set .ng-set__chip .form-check-input { float: none; flex: none; width: 18px; height: 18px; /* [Chips: one size] */ }
.ng-set .ng-set__chip:has(:checked) { background: hsl(var(--primary) / .12); box-shadow: inset 0 0 0 1.5px var(--ng-brand); color: var(--ng-brand); }

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

/* upload fields (verification documents, profile background) */
.ng-set .ng-set__card .x-image {
  height: 120px; border: 1.5px dashed var(--ng-line); border-radius: 14px; background-color: var(--ng-fill);
}
.ng-set .ng-set__card .x-image:not(.full) { width: 160px; }
.ng-set .ng-set__card .x-image .js_x-uploader {
  position: absolute; inset: 0; width: auto !important; height: auto; display: grid; place-items: center; padding: 0; color: var(--ng-sub); cursor: pointer;
}
.ng-set .ng-set__card .x-image:hover .js_x-uploader { color: var(--ng-brand); }
.ng-set .ng-set__card .x-image .btn-close { top: 8px; right: 8px; }

/* the save bar (and the actions row of forms inside a section) */
.ng-set .ng-set__card .card-footer, .ng-set .ng-set__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.ng-set .ng-set__card .card-footer { padding: 16px 20px; border: 0; border-top: 1px solid var(--ng-line); background: transparent; }
@media (max-width: 767.98px) {
  /* phones: the save button is full width and sticks above the bottom bar */
  .ng-set .ng-set__card .card-footer { position: sticky; bottom: var(--ng-bnav-clear); z-index: 5; /* [Bottom bar gap] niguro.css */ padding: 0 16px 16px; border-top: 0; }
  .ng-set .ng-set__card .card-footer .btn, .ng-set .ng-set__actions > :is(.btn, .ng-pbtn) { flex: 1 1 0; }
}

/* ------------------------------- */
/* switch rows: icon tile, title and line, the switch on the right; a hairline between rows */
/* ------------------------------- */
.ng-set .ng-set__card .form-table-row { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; border: 0; }
.ng-set .ng-set__card .form-table-row + .form-table-row { padding-top: 16px; border-top: 1px solid var(--ng-line); }
.ng-set .ng-set__card .form-table-row > div { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
.ng-set .ng-set__card .form-table-row > div:last-child:not(:first-child) { flex: none; margin: 0; }
.ng-set .ng-set__card .form-table-row > div.avatar {
  flex: none; width: 40px !important; height: 40px !important; display: grid !important; place-items: center; overflow: hidden; border-radius: 12px; background: var(--ng-fill-2);
}
.ng-set .ng-set__card .form-table-row > div.avatar .main-icon, .ng-set .ng-set__card .form-table-row > div.avatar > .svg-container {
  width: 24px !important; height: 24px !important; padding: 0; border-radius: 0; background: none;
}
.ng-set .ng-set__card .form-table-row > div.avatar img { width: 100%; height: 100%; object-fit: cover; }
.ng-set .ng-set__card .form-table-row > div.avatar .fab { font-size: 22px; color: var(--ng-ink-strong); }
.ng-set .ng-set__card .form-table-row .form-label { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ng-ink-strong); }
.ng-set .ng-set__card .form-table-row .form-text { display: block !important; margin-top: 2px; }

/* ------------------------------- */
/* lists: a box of rows with hairlines (sessions, payments, codes, coupons, transactions, users…) */
/* ------------------------------- */
.ng-set .ng-set__list, .ng-set .ng-set__card .card-body ul:has(> .feeds-item) {
  margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--ng-line); border-radius: var(--ng-r-md); list-style: none;
}
.ng-set .ng-set__list > .ng-lrow { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; }
.ng-set .ng-set__list > .ng-lrow + .ng-lrow { border-top: 1px solid var(--ng-line); }
.ng-set .ng-set__list .ng-lrow__icon { width: 40px; height: 40px; border-radius: 12px; }
.ng-set .ng-set__list .ng-lrow__icon .ng-ico { width: 20px; height: 20px; }
.ng-set .ng-set__list .ng-lrow__ava { width: 40px; height: 40px; }
.ng-set .ng-set__list .ng-lrow__title { overflow: visible; white-space: normal; overflow-wrap: anywhere; font-size: 15px; line-height: 1.35; }
.ng-set .ng-set__list .ng-lrow__title .ng-tag { vertical-align: 1px; margin-left: 4px; }
.ng-set .ng-set__list .ng-lrow__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; overflow-wrap: anywhere; }
.ng-set .ng-set__list .ng-lrow__sub > :not(:last-child)::after { content: "·"; margin-left: 6px; color: var(--ng-faint); }
.ng-set .ng-set__end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; justify-self: end; min-width: 0; text-align: end; }
.ng-set .ng-set__end--row { flex-direction: row; align-items: center; gap: 6px; }
.ng-set .ng-set__amount { font-size: 15px; font-weight: 800; white-space: nowrap; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }
.ng-set .ng-set__amount.is-in { color: var(--ng-brand); }
.ng-set .ng-set__amount.is-out { color: hsl(var(--destructive)); }
.ng-set .ng-set__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14.5px; font-weight: 700; letter-spacing: .04em; color: var(--ng-ink-strong); }
/* "See more": long lists show 10 rows, then 10 more a tap */
.ng-set .ng-set__list > .ng-hide-more { display: none !important; }
.ng-set .ng-set__more { margin: 0; padding: 12px 14px; border-top: 1px solid var(--ng-line); }

/* small round icon buttons in rows (end a session, delete, share) */
.ng-set .ng-set__ibtn {
  width: 34px; height: 34px; 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-set .ng-set__ibtn:hover { background: var(--ng-fill-2); color: var(--ng-ink-strong); }
.ng-set .ng-set__ibtn .ng-ico { width: 17px; height: 17px; }
.ng-set .ng-set__ibtn--danger { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
.ng-set .ng-set__ibtn--danger:hover { background: hsl(var(--destructive) / .16); color: hsl(var(--destructive)); }

/* people lists from Sngine's __feeds_user.tpl (blocked, connected accounts, affiliates) */
.ng-set .ng-set__card .card-body ul > .feeds-item { margin: 0; padding: 0; border: 0; background: transparent; }
.ng-set .ng-set__card .card-body ul > .feeds-item + .feeds-item { border-top: 1px solid var(--ng-line); }
.ng-set .ng-set__card .card-body ul > .feeds-item > .data-container { display: flex; align-items: center; gap: 12px; min-height: 0; margin: 0; padding: 12px 14px; }
.ng-set .ng-set__card .card-body ul > .feeds-item .data-avatar { position: relative; flex: none; width: 44px; height: 44px; margin: 0; }
.ng-set .ng-set__card .card-body ul > .feeds-item .data-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ng-set .ng-set__card .card-body ul > .feeds-item .data-content {
  flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; margin: 0; padding: 0;
}
.ng-set .ng-set__card .card-body ul > .feeds-item .data-content > .float-end { grid-column: 2; grid-row: 1 / span 3; float: none !important; display: flex; gap: 6px; }
.ng-set .ng-set__card .card-body ul > .feeds-item .data-content > :not(.float-end) { grid-column: 1; margin: 0 !important; min-width: 0; }
.ng-set .ng-set__card .card-body ul > .feeds-item .name a { font-size: 15px; font-weight: 700; color: var(--ng-ink-strong); text-decoration: none; }
.ng-set .ng-set__card .card-body ul > .feeds-item .data-content > :not(.float-end):not(:nth-child(2)) { font-size: 13px; color: var(--ng-sub); }

/* ------------------------------- */
/* stat tiles and balances */
/* ------------------------------- */
.ng-set .ng-set__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 16px; }
.ng-set .ng-set__tile {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; border-radius: var(--ng-r-md); background: var(--ng-fill);
}
.ng-set .ng-set__tile .ng-lrow__icon { width: 40px; height: 40px; flex: none; border-radius: 12px; }
.ng-set .ng-set__tile .ng-lrow__icon .ng-ico { width: 20px; height: 20px; }
.ng-set .ng-set__tile > div { min-width: 0; line-height: 1.3; }
.ng-set .ng-set__tile b { display: block; overflow-wrap: anywhere; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--ng-ink-strong); font-variant-numeric: tabular-nums; }
.ng-set .ng-set__tile small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ng-sub); }
/* phones: the tiles stand up (icon over the number) so three fit a row; a lone tile stays a row */
@media (max-width: 575.98px) {
  .ng-set .ng-set__tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); }
  .ng-set .ng-set__tile { gap: 10px; padding: 14px 12px; }
  .ng-set .ng-set__tile:not(:only-child) { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ng-set .ng-set__tile:not(:only-child) > div { width: 100%; }
  .ng-set .ng-set__tile .ng-lrow__icon { width: 36px; height: 36px; border-radius: 11px; }
  .ng-set .ng-set__tile .ng-lrow__icon .ng-ico { width: 18px; height: 18px; }
  .ng-set .ng-set__tile b { font-size: 18px; }
}
/* a balance: the brand tile (white type) */
.ng-set .ng-set__tile--brand {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(140deg, hsl(0 0% 0% / .2), hsl(0 0% 0% / .45)), hsl(var(--primary));
}
.ng-set .ng-set__tile--brand::after { content: ""; position: absolute; z-index: -1; right: -48px; top: -64px; width: 150px; height: 150px; border-radius: 50%; background: hsl(0 0% 100% / .1); }
.ng-set .ng-set__tile--brand .ng-lrow__icon { background: hsl(0 0% 100% / .18); color: #fff; }
.ng-set .ng-set__tile--brand b { font-size: 22px; color: #fff; }
.ng-set .ng-set__tile--brand small { color: hsl(0 0% 100% / .85); }
.ng-set .ng-set__tile--brand a { color: #fff; font-weight: 700; text-decoration: underline; }

/* Sngine's stat panels left in a section (outside the overridden ones): one gap */
.ng-set .ng-set__card .stat-panel { margin: 0; }

/* the copy-link field (affiliate link) and share buttons */
.ng-set .ng-set__card .input-group:has(.js_clipboard) .form-control { border-radius: 12px 0 0 12px; }
.ng-set .ng-set__card .input-group .js_clipboard { min-width: var(--ng-field-h); min-height: var(--ng-field-h); border: 0; border-radius: 0 12px 12px 0 !important; background: var(--ng-fill-2); color: var(--ng-brand); }
.ng-set .ng-set__share { display: flex; flex-wrap: wrap; gap: 8px; }
.ng-set .ng-set__share .btn-icon-social {
  width: 40px; height: 40px; display: inline-grid; place-items: center; margin: 0; border-radius: 12px; background: var(--ng-fill);
}
.ng-set .ng-set__share .btn-icon-social:hover { background: var(--ng-fill-2); }

/* ------------------------------- */
/* Sngine's pieces inside a section */
/* ------------------------------- */
/* alerts: the global look; the icon sits at the top-left */
.ng-set .ng-set__card .alert:not(.see-more) .icon .fa-2x { font-size: 20px; }
.ng-set .ng-set__card .alert:not(.see-more) > .text { overflow: hidden; }
.ng-set .ng-set__card .alert:not(.see-more) .btn { margin: 8px 0 0 !important; }
.ng-set .ng-set__card .alert .badge { vertical-align: 1px; }
/* Sngine's "See more" under a list */
.ng-set .ng-set__card .see-more { margin: 0 !important; border-radius: var(--ng-r-md); }

/* cards of plans and addresses (monetization plans, addresses): a grid of soft boxes, "Add new" dashed */
.ng-set .ng-set__card .payment-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.ng-set .ng-set__card .payment-plan {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; padding: 16px; border-radius: var(--ng-r-md);
  background: var(--ng-fill); font-size: 14px; line-height: 1.45; color: var(--ng-ink); overflow-wrap: anywhere;
}
.ng-set .ng-set__card .payment-plan .text-xxlg { font-size: 16px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-set .ng-set__card .payment-plan .text-xlg { font-size: 15px; font-weight: 700; color: var(--ng-brand); }
.ng-set .ng-set__card .payment-plan .mt10 { margin-top: 10px !important; }
.ng-set .ng-set__card .payment-plan .row { --bs-gutter-y: 8px; --bs-gutter-x: 8px; }
.ng-set .ng-set__card .payment-plan .text-link { font-weight: 600; color: var(--ng-brand); cursor: pointer; }
.ng-set .ng-set__card .payment-plan.new {
  min-height: 132px; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px dashed var(--ng-line); background: transparent; font-weight: 700; color: var(--ng-brand); cursor: pointer;
}
.ng-set .ng-set__card .payment-plan.new:hover { background: var(--ng-tint); }
/* an address's Edit and delete side by side; the delete button on the card colour */
.ng-set .ng-set__card .payment-plan .row.g-1 { flex-wrap: nowrap; --bs-gutter-x: 8px; --bs-gutter-y: 0; margin-top: 10px !important; }
.ng-set .ng-set__card .payment-plan .row.g-1 > :first-child { flex: 1 1 auto; width: auto; margin: 0 !important; }
.ng-set .ng-set__card .payment-plan .row.g-1 > :last-child { flex: none; width: auto; }
.ng-set .ng-set__card .payment-plan .btn-light { background: var(--ng-card); }
.ng-set .ng-set__card .payment-plan .btn-light:hover { background: var(--ng-fill-2); }
.ng-set .ng-set__card .payment-plan .danger-icon { color: hsl(var(--destructive)); }

/* "Download your information": choice tiles */
.ng-set .ng-set__card .text-center:has(> .button-label) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); gap: 16px; text-align: center; }
.ng-set .ng-set__card .button-label {
  display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 16px 8px 14px;
  border-radius: var(--ng-r-md); background: var(--ng-fill); box-shadow: none; color: var(--ng-ink); transition: background .15s, box-shadow .15s;
}
.ng-set .ng-set__card .button-label:hover { background: var(--ng-fill-2); box-shadow: none; }
.ng-set .ng-set__card .button-label .icon { width: 48px; height: 48px; margin: 0; border-radius: 14px; background: var(--ng-card); opacity: .8; }
.ng-set .ng-set__card .button-label .title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ng-ink-strong); }
.ng-set .ng-set__card .input-label:checked + .button-label { background: hsl(var(--primary) / .12); box-shadow: inset 0 0 0 2px var(--ng-brand); }
.ng-set .ng-set__card .input-label:checked + .button-label .icon { opacity: 1; }
.ng-set .ng-set__card .input-label:focus-visible + .button-label { outline: 2px solid var(--ng-brand); outline-offset: 2px; }
.ng-set .ng-set__card .h5.text-center { margin: 0; font-size: 15px; font-weight: 700; }

/* a status in the middle of a section (verified, pending, declined; delete account) */
.ng-set .ng-set__card .card-body > .text-center:has(> h4) { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 8px; }
.ng-set .ng-set__card .card-body > .text-center:has(> h4) .main-icon { margin: 0 0 6px !important; }
.ng-set .ng-set__card .card-body > .text-center > h4 { margin: 0; font-size: 18px; font-weight: 800; }
.ng-set .ng-set__card .card-body > .text-center > p { margin: 0 !important; color: var(--ng-sub); }
.ng-set .ng-set__card .card-body > .text-center:has(> .btn:only-child) { display: flex; justify-content: center; }

/* two-factor: the QR code and the token */
.ng-set .ng-set__card .card-body ol { margin: 0; padding-left: 20px; color: var(--ng-ink); }
.ng-set .ng-set__card .card-body ol > li + li { margin-top: 6px; }
.ng-set .ng-set__card .row.text-center > .form-group { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ng-set .ng-set__card .row.text-center h6 { margin: 0; font-size: 13.5px; font-weight: 600; }
/* the QR code keeps a white quiet zone in night mode too, or apps can't read it */
.ng-set .ng-set__card .row.text-center img { max-width: 100%; border-radius: 12px; background: #fff; padding: 8px; }
.ng-set .ng-set__card .row.text-center h3 { margin: 0; }
.ng-set .ng-set__card .row.text-center .badge { padding: 8px 14px !important; overflow-wrap: anywhere; white-space: normal; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }

/* progress bars (membership boosts) */
.ng-set .ng-set__card .progress { height: 8px; margin: 8px 0 0 !important; border-radius: 999px; background: var(--ng-card); }
.ng-set .ng-set__card .progress-bar { border-radius: 999px; background: var(--ng-brand); }

/* a key / value list (membership's package details) */
.ng-set .ng-set__kv { display: flex; flex-direction: column; gap: 16px; }
.ng-set .ng-set__kv > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--ng-fill); font-size: 14px; color: var(--ng-ink); }
.ng-set .ng-set__kv > div > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--ng-sub); }
.ng-set .ng-set__kv > div b { font-weight: 700; color: var(--ng-ink-strong); }
.ng-set .ng-set__kv > div .ng-set__kvrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ng-set .ng-set__kv > div a { font-size: 13px; font-weight: 600; color: var(--ng-brand); text-decoration: none; }
@media (min-width: 768px) { .ng-set .ng-set__kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* an upgrade offer (membership): a line and the button, on the brand tint */
.ng-set .ng-set__upgrade {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 16px; border-radius: var(--ng-r-md); background: var(--ng-tint);
}
.ng-set .ng-set__upgrade > div { min-width: 0; flex: 1 1 220px; }
.ng-set .ng-set__upgrade b { display: block; font-size: 15px; font-weight: 700; color: var(--ng-ink-strong); }
.ng-set .ng-set__upgrade span { display: block; margin-top: 2px; font-size: 13px; color: var(--ng-sub); }
@media (max-width: 767.98px) { .ng-set .ng-set__upgrade > .btn { flex: 1 1 100%; } }

/* a link-like action inside a row's line (coupon users) */
.ng-set .ng-set__link { font-weight: 600; color: var(--ng-brand); cursor: pointer; }
.ng-set .ng-set__link:hover { text-decoration: underline; }