/* Partner pages art v2 (owner 2026-11-08: the AI pictures are "not nice"). layout/partner-art.php draws small product views in HTML
   (reseller console, referral link, creator code, order API), each marked Example. This file is their look and where each one sits.
   Loaded by partners.php, partners-apply.php, partners-signup.php, partner-dashboard.php, partners-status.php, resellers.php and the
   partner app shell. Green #45f882 on near-black, the paper order slip stays the only light surface. Logical properties only. */
.pv { --pv-bg: #07100b; --pv-card: #0b1510; --pv-card2: #0f1c15; --pv-ln: rgba(69, 248, 130, .2); --pv-ln2: rgba(156, 190, 168, .13);
  --pv-tx: #e8f2eb; --pv-tx2: #98ab9e; --pv-g: #45f882; --pv-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--pv-ln); border-radius: 16px; color: var(--pv-tx); font-size: 13px; line-height: 1.4; text-align: start;
  background: radial-gradient(70% 90% at 78% 0, rgba(69, 248, 130, .17), transparent 70%), radial-gradient(60% 70% at 0 100%, rgba(69, 248, 130, .08), transparent 70%),
    linear-gradient(rgba(69, 248, 130, .05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(69, 248, 130, .05) 1px, transparent 1px) 0 0 / 28px 28px, var(--pv-bg);
  -webkit-user-select: none; user-select: none; pointer-events: none; }
[dir="rtl"] .pv { background: radial-gradient(70% 90% at 22% 0, rgba(69, 248, 130, .17), transparent 70%), radial-gradient(60% 70% at 100% 100%, rgba(69, 248, 130, .08), transparent 70%),
    linear-gradient(rgba(69, 248, 130, .05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(69, 248, 130, .05) 1px, transparent 1px) 0 0 / 28px 28px, var(--pv-bg); }
.pv * { box-sizing: border-box; }
.pv-card { inline-size: min(100%, 400px); padding: 14px 16px 12px; border: 1px solid var(--pv-ln); border-radius: 12px;
  background: linear-gradient(180deg, var(--pv-card2), var(--pv-card)); box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(232, 242, 235, .05); }
.pv code, .pv pre, .pv-n, .pv-you, .pv-bal b, .pv-code b { font-family: var(--pv-mono); font-variant-numeric: tabular-nums; }
.pv code { font-size: 12px; color: var(--pv-tx); background: none; padding: 0; }

.pv-head { display: flex; align-items: center; gap: 8px; padding-block-end: 10px; margin-block-end: 10px; border-block-end: 1px solid var(--pv-ln2); }
.pv-head b { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.pv-tag { margin-inline-start: auto; padding: 1px 8px; border: 1px solid var(--pv-ln2); border-radius: 999px; color: var(--pv-tx2); font: 500 10.5px/1.6 var(--pv-mono); letter-spacing: .04em; }
.pv-dot { flex: 0 0 auto; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--pv-g); box-shadow: 0 0 0 3px rgba(69, 248, 130, .16); }
.pv-dot--hold { background: #e8c55a; box-shadow: 0 0 0 3px rgba(232, 197, 90, .16); }

.pv-bal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 10px; }
.pv-bal span, .pv-code span { color: var(--pv-tx2); font-size: 12px; }
.pv-bal b { font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: #fff; }

.pv-rows { display: grid; border: 1px solid var(--pv-ln2); border-radius: 8px; overflow: hidden; }
.pv-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; align-items: baseline; gap: 10px; padding: 7px 10px; }
.pv-row--2 { grid-template-columns: minmax(0, 1fr) auto; }
.pv-row + .pv-row { border-block-start: 1px solid var(--pv-ln2); }
.pv-row > :first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pv-row > :not(:first-child) { text-align: end; }
.pv-row--h { background: rgba(69, 248, 130, .05); color: var(--pv-tx2); font-size: 11px; }
.pv-n { color: var(--pv-tx2); font-size: 12px; }
.pv-you { color: var(--pv-g); font-size: 12px; font-weight: 600; }

.pv-line { display: flex; align-items: center; gap: 10px; margin-block-start: 9px; padding-block-start: 9px; border-block-start: 1px dashed var(--pv-ln2); color: var(--pv-tx2); font-size: 12px; }
.pv-line code { color: var(--pv-tx); }
.pv-line em { margin-inline-start: auto; font-style: normal; font-size: 11.5px; font-weight: 600; }
.pv-ok { padding: 1px 8px; border-radius: 999px; background: rgba(69, 248, 130, .12); color: var(--pv-g); }

.pv-link { display: flex; align-items: center; gap: 8px; padding-block: 6px; padding-inline: 10px 6px; border: 1px solid var(--pv-ln); border-radius: 9px; background: rgba(4, 10, 6, .6); }
.pv-link code { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pv-btn { flex: 0 0 auto; padding: 4px 10px; border-radius: 6px; background: var(--pv-g); color: #04140a; font-size: 11.5px; font-weight: 700; }
.pv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block-start: 10px; }
.pv-stats > div { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--pv-ln2); border-radius: 8px; }
.pv-stats span:first-child { color: var(--pv-tx2); font-size: 11px; }
.pv-stats .pv-n { color: #fff; font-size: 15px; font-weight: 600; }

.pv-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 10px; padding: 10px 12px; border: 1px dashed rgba(69, 248, 130, .45); border-radius: 9px; background: rgba(69, 248, 130, .06); }
.pv-code b { color: var(--pv-g); font-size: 18px; font-weight: 600; letter-spacing: .08em; }

.pv-bar { display: flex; align-items: center; gap: 10px; padding-block-end: 10px; border-block-end: 1px solid var(--pv-ln2); }
.pv-bar code { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; }
.pv-bar b { color: var(--pv-g); font: 600 12px var(--pv-mono); }
.pv-bar .pv-tag { margin-inline-start: 0; }
.pv-pre { margin: 10px 0 0; padding: 0; background: none; border: 0; overflow: hidden; font-size: 12px; line-height: 1.6; color: var(--pv-tx2); white-space: pre; text-align: start; }
.pv-pre i { font-style: normal; color: #c9fbdc; }

/* two cards, the second one overlapping the first */
.pv-stack { display: grid; inline-size: min(100%, 440px); }
.pv-stack > .pv-card { inline-size: 88%; }
.pv-stack > .pv-card + .pv-card { justify-self: end; margin-block-start: -22px; position: relative; }
.pv-stack > .pv-card:first-child .pv-line { display: none; }

/* ---- where each view sits ---- */
/* reseller app sign-in and sign-up: the console on the side, above the benefits and the paper slip */
.rx-auth-side .rx-auth-art { inline-size: 100%; }
/* reseller landing (store host /resellers and reseller.thenexus.store): the hero already shows the API panel, so no second view there */
.nxs-hero > .nxs-hero-art, .nxp6 .nxp5-final > .nxp6-final-art { display: none; }
.nxs-aff-art { inline-size: 100%; }
/* partner hub hero: the console with a referral link over it, on wide screens only; program pages keep their terms column */
.nxp5-hero > .nxp5-hero-art { display: none; }
@media (min-width: 1200px) {
  .nxp5-hero:not([class*="nxp5-hero--"]) > .nxp5-hero-art { display: grid; position: absolute; z-index: 0; inset-block: 96px clamp(96px, 9vw, 128px);
    inset-inline-start: auto; inset-inline-end: max(24px, calc((100% - 1320px) / 2 + 12px)); inline-size: 440px; block-size: auto;
    padding: 0; border: 0; background: none; overflow: visible; filter: none; transform: none; }
  .nxp5-hero:not([class*="nxp5-hero--"]) .nxp5-hero-in { z-index: 1; }
  .nxp5-hero:not([class*="nxp5-hero--"]) .nxp5-hero-copy { max-inline-size: 700px; }
}
/* program cards: a stage at the top of each card, the view rising from its lower edge */
.nxp6-card-art { block-size: 176px; inline-size: calc(100% + 52px); margin-block: 0 4px; margin-inline: -26px; place-items: end center; padding-block-end: 0; border-width: 0 0 1px; border-radius: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.nxp6 .nxp6-card-art + .nxp5-card-top { margin-block-start: 8px; }
.nxp6-card-art > .pv-card { transform: translateY(30px); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.nxp5-card:hover .nxp6-card-art > .pv-card { transform: translateY(20px); }
.nxp6-faq-art { margin-block-start: 24px; }
/* program pages, What you get: the lead tile held a picture; without it the tile sizes to its text */
.nxp6 .nxp5-tile--lead { min-block-size: 0; align-items: center; }
.nxps-aside-art { padding-block-end: 40px; border: 0; border-radius: 0; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
@media (prefers-reduced-motion: reduce) { .nxp6-card-art > .pv-card { transition: none; } }
@media (max-width: 420px) { .pv-row { grid-template-columns: minmax(0, 1fr) 58px 58px; gap: 8px; } .pv-row--2 { grid-template-columns: minmax(0, 1fr) auto; } .pv-stack > .pv-card { inline-size: 94%; } }