/* Rendimentos: jornada orientada por valor, compreensão e decisão. */
.income-page-head {
  gap: 24px;
}

.income-page-head p {
  max-width: 720px;
}

.income-hero-card {
  align-items: start;
  background:
    radial-gradient(circle at 8% 0%, rgba(var(--network-rgb), 0.24), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, var(--network)), var(--surface) 62%);
  border-color: color-mix(in srgb, var(--network) 34%, var(--line));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
  gap: 34px 64px;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  overflow: hidden;
  padding: clamp(26px, 4vw, 46px);
  position: relative;
}

.income-hero-card::after {
  background: var(--network);
  border-radius: 999px;
  content: "";
  filter: blur(88px);
  height: 180px;
  opacity: 0.07;
  pointer-events: none;
  position: absolute;
  right: -40px;
  top: -80px;
  width: 260px;
}

.income-hero-card > * {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.income-hero-main {
  display: grid;
  gap: 7px;
}

.income-hero-main > small {
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 700;
  margin-top: 3px;
}

.income-hero-main > #incomeLiveValue {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: clamp(38px, 4.5vw, 50px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.income-hero-main > p {
  color: var(--muted-strong);
  font-size: 14px;
  margin: 0;
}

.income-sync-status {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.income-sync-status > span {
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--success-soft);
  flex: 0 0 7px;
  height: 7px;
  width: 7px;
}

.income-sync-status small {
  color: var(--muted);
  font-size: 12px;
}

.income-hero-card .cycle-progress {
  align-self: center;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  border: 1px solid var(--line);
  border-radius: 18px;
  gap: 14px;
  padding: 20px;
}

.income-hero-card .cycle-progress-head {
  font-size: 13px;
}

.income-hero-card .cycle-progress-head strong {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 17px;
}

.income-hero-card .progress-bar.large {
  background: var(--surface-3);
  height: 9px;
}

.income-hero-card .progress-bar.large span {
  background: linear-gradient(90deg, var(--network), color-mix(in srgb, var(--network) 48%, var(--success)));
  box-shadow: 0 0 18px rgba(var(--network-rgb), 0.24);
}

.income-hero-metrics {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 22px;
}

.income-hero-metrics article {
  border-right: 1px solid var(--line);
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 2px 22px;
}

.income-hero-metrics article:first-child {
  padding-left: 0;
}

.income-hero-metrics article:last-child {
  border-right: 0;
  padding-right: 0;
}

.income-hero-metrics span,
.income-hero-metrics small {
  color: var(--muted);
  font-size: var(--font-size-minimum);
}

.income-hero-metrics strong {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 22px);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.income-hero-metrics #incomeGrossAvailable.is-positive {
  color: var(--success);
}

.income-hero-metrics article:first-child strong,
.income-hero-metrics #incomeFullCycle {
  color: var(--success);
}

.income-origins-card {
  display: block;
  margin: 16px 0 30px;
  padding: 0;
}

.income-origins-card > summary {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  list-style: none;
  padding: 22px 24px;
}

.income-origins-card > summary::-webkit-details-marker,
.income-position-row > summary::-webkit-details-marker,
.basket-builder-disclosure > summary::-webkit-details-marker {
  display: none;
}

.income-origins-card > summary h3 {
  color: #269bd3;
  font-size: 20px;
  margin: 3px 0;
}

.income-origins-card > summary p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.income-origins-action {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-strong);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 750;
  min-height: 38px;
  padding: 0 14px;
}

.income-origins-card[open] .income-origins-action {
  background: rgba(var(--network-rgb), 0.12);
  border-color: rgba(var(--network-rgb), 0.28);
  color: var(--network);
}

.income-positions-list {
  border-top: 1px solid var(--line);
  gap: 9px;
  padding: 14px;
}

.income-position-row {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: block;
  overflow: hidden;
  padding: 0;
}

.income-position-row[open] {
  border-color: color-mix(in srgb, var(--network) 30%, var(--line));
}

.income-position-summary {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.38fr) minmax(150px, auto) 28px;
  list-style: none;
  padding: 16px 18px;
}

.income-position-identity,
.income-position-net {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.income-position-title-line,
.ptoken-title-with-yield {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.income-position-name {
  color: var(--muted-strong) !important;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ptoken-title-with-yield > .ptoken-yield-indicator,
.income-position-row .ptoken-yield-indicator {
  align-items: center;
  background: color-mix(in srgb, var(--success) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--success) 38%, var(--line));
  border-radius: 999px;
  color: var(--success) !important;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: max(var(--desktop-font-size-floor, 0px), 11px) !important;
  font-weight: 850;
  gap: 4px;
  letter-spacing: 0 !important;
  line-height: 1;
  padding: 5px 8px;
  text-transform: none !important;
  white-space: nowrap;
}

.ptoken-yield-indicator.is-compact {
  padding: 4px 7px;
}

.ptoken-yield-icon {
  fill: none;
  flex: 0 0 auto;
  height: 15px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
  width: 15px;
}

.ptoken-title-with-yield > .ptoken-yield-indicator b,
.ptoken-title-with-yield > .ptoken-yield-indicator small,
.income-position-row .ptoken-yield-indicator b,
.income-position-row .ptoken-yield-indicator small {
  color: inherit !important;
  font-family: inherit;
  font-size: inherit !important;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.ptoken-title-with-yield > .ptoken-yield-indicator small,
.income-position-row .ptoken-yield-indicator small {
  font-weight: 700;
  opacity: 0.9;
}

.basket-explainer > .ptoken-title-with-yield > strong {
  color: var(--ink-strong);
  font-size: 16px;
}

.income-token-symbol {
  color: var(--network) !important;
  font-size: var(--font-size-minimum) !important;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.income-position-title-line > .income-token-symbol {
  color: var(--ink-strong) !important;
  font-family: var(--font-display);
  font-size: 18px !important;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.income-position-net {
  justify-items: end;
  text-align: right;
}

.income-position-value-line {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  max-width: 100%;
  min-width: 0;
}

.income-yield-flow {
  --income-yield-row-delay: 0s;
  align-items: center;
  display: flex;
  gap: 1px;
  height: 30px;
  justify-content: center;
  justify-self: center;
  max-width: 150px;
  min-width: 120px;
  overflow: hidden;
  pointer-events: none;
  position: relative;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
}

.income-yield-chevron {
  animation: income-yield-chevron-wave 4.6s ease-in-out infinite;
  background: linear-gradient(135deg, color-mix(in srgb, var(--success) 60%, transparent), var(--success));
  clip-path: polygon(0 0, 56% 0, 100% 50%, 56% 100%, 0 100%, 43% 50%);
  color: var(--success) !important;
  display: block;
  flex: 0 0 28px;
  filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--success) 18%, transparent));
  height: 22px;
  opacity: 0;
  transform: translateX(-4px) scale(0.92);
  will-change: opacity, transform;
}

.income-yield-chevron:nth-child(1) {
  animation-delay: var(--income-yield-row-delay);
}

.income-yield-chevron:nth-child(2) {
  animation-delay: calc(var(--income-yield-row-delay) + 0.18s);
}

.income-yield-chevron:nth-child(3) {
  animation-delay: calc(var(--income-yield-row-delay) + 0.36s);
}

.income-yield-chevron:nth-child(4) {
  animation-delay: calc(var(--income-yield-row-delay) + 0.54s);
}

.income-position-row:nth-child(2n) .income-yield-flow {
  --income-yield-row-delay: -1.52s;
}

.income-position-row:nth-child(3n) .income-yield-flow {
  --income-yield-row-delay: -3.04s;
}

.income-origins-card:not([open]) .income-yield-chevron {
  animation-play-state: paused;
}

@keyframes income-yield-chevron-wave {
  0%,
  8%,
  64%,
  100% {
    opacity: 0;
    transform: translateX(-4px) scale(0.92);
  }

  18% {
    opacity: 0.2;
  }

  28% {
    opacity: 0.72;
    transform: translateX(0) scale(1);
  }

  43% {
    opacity: 0.16;
    transform: translateX(5px) scale(0.96);
  }
}

.income-position-net b {
  color: var(--success);
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .income-yield-chevron {
    animation: none;
    opacity: 0.24;
    transform: none;
  }
}

.income-position-chevron {
  color: var(--muted-strong) !important;
  font-size: 20px !important;
  justify-self: end;
  transition: transform 180ms ease;
}

.income-position-row[open] .income-position-chevron {
  transform: rotate(180deg);
}

.income-position-details {
  background: color-mix(in srgb, var(--surface-3) 62%, transparent);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(210px, 1.35fr) repeat(4, minmax(115px, 0.8fr));
  padding: 16px 18px;
}

.income-position-details > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.income-position-details small,
.income-position-details span {
  color: var(--muted);
  font-size: var(--font-size-minimum);
}

.income-position-details b,
.income-position-details strong {
  color: var(--ink-strong);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.income-decision-heading {
  display: grid;
  gap: 6px;
  margin: 44px 0 18px;
  max-width: 760px;
}

.income-decision-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(25px, 2.6vw, 34px);
  line-height: 1.12;
  margin: 0;
}

.income-decision-heading p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

.income-decision-head {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.income-decision-head h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.18;
  margin: 3px 0 7px;
}

.income-decision-head p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  max-width: 740px;
}

.income-decision-number {
  align-items: center;
  background: rgba(var(--network-rgb), 0.14);
  border: 1px solid rgba(var(--network-rgb), 0.34);
  border-radius: 14px;
  color: var(--network);
  display: flex;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 850;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.income-recommended-badge {
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 36%, transparent);
  border-radius: 999px;
  color: var(--success);
  font-size: 13px;
  font-weight: 800;
  padding: 8px 12px;
  white-space: nowrap;
}

.smart-reinvest-card {
  background:
    linear-gradient(140deg, rgba(var(--network-rgb), 0.09), transparent 48%),
    var(--surface);
  border-color: rgba(var(--network-rgb), 0.30);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14);
  display: grid;
  gap: 22px;
  margin: 0 0 18px;
  padding: clamp(22px, 3vw, 32px);
}

.smart-reinvest-head {
  background: color-mix(in srgb, var(--surface-2) 90%, var(--network));
  padding: 18px;
}

.smart-reinvest-head p {
  font-size: 13px;
  line-height: 1.6;
}

.smart-reinvest-head > .income-growth-highlight {
  border-color: color-mix(in srgb, var(--success) 30%, var(--line));
  min-width: 220px;
  padding: 15px;
}

.smart-reinvest-head > .income-growth-highlight strong {
  color: var(--success);
  font-family: var(--font-display);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.income-before-after {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr auto 1fr;
  padding: 15px 18px;
}

.income-before-after > div {
  display: grid;
  gap: 3px;
}

.income-before-after > div:last-child {
  text-align: right;
}

.income-before-after small {
  color: var(--muted);
  font-size: var(--font-size-minimum);
}

.income-before-after strong {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 20px;
}

.income-before-after > div:last-child strong,
.smart-reinvest-row [data-smart-yield] {
  color: var(--success);
}

.income-cycle-growth {
  align-items: center;
  color: var(--success);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  justify-self: end;
  margin-top: 3px;
}

.income-cycle-growth svg {
  fill: none;
  height: 15px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 19px;
}

.income-cycle-growth b {
  color: inherit;
  font: inherit;
}

.income-before-after > span {
  color: var(--network);
  font-size: 20px;
}

.smart-reinvest-row {
  border-radius: 14px;
  padding: 16px;
}

.smart-reinvest-row .income-token-symbol {
  font-size: 15px !important;
  line-height: 1.2;
}

.smart-reinvest-footer {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.smart-reinvest-footer > span {
  font-size: 13px;
}

.reinvest-threshold-card {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  padding: 20px;
}

.reinvest-threshold-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 4px 0;
}

.reinvest-threshold-card p,
.reinvest-threshold-card span,
.reinvest-threshold-card small {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.reinvest-threshold-card > div:last-child {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  display: grid;
  gap: 3px;
  padding: 14px;
}

.basket-builder-section {
  display: grid;
  gap: 18px;
  margin: 18px 0;
}

.admin-ptoken-composition-card {
  background: linear-gradient(145deg, color-mix(in srgb, var(--network) 8%, var(--surface)), var(--surface));
  border-color: color-mix(in srgb, var(--network) 34%, var(--line));
}

.admin-ptoken-composition-form {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 0.8fr) auto;
  margin-top: 18px;
}

.admin-ptoken-composition-form label {
  color: var(--muted-strong);
  display: grid;
  font-size: var(--font-size-minimum);
  font-weight: 750;
  gap: 7px;
}

.admin-ptoken-composition-form .button {
  min-height: 44px;
}

.admin-ptoken-limit-rule {
  align-items: end;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, 1.4fr) minmax(180px, 0.6fr) auto;
  margin-top: 18px;
  padding-top: 18px;
}

.admin-ptoken-limit-rule > div {
  display: grid;
  gap: 4px;
}

.admin-ptoken-limit-rule > div strong {
  color: var(--ink-strong);
  font-size: 14px;
}

.admin-ptoken-limit-rule > div span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.admin-ptoken-limit-rule label {
  color: var(--muted-strong);
  display: grid;
  font-size: var(--font-size-minimum);
  font-weight: 750;
  gap: 7px;
}

.admin-ptoken-limit-rule .button {
  min-height: 44px;
}

.admin-ptoken-symbol-rule {
  grid-template-columns: minmax(260px, 1.25fr) repeat(2, minmax(130px, .38fr)) auto;
}

.admin-ptoken-economics-rule {
  grid-template-columns: minmax(260px, 1.25fr) repeat(2, minmax(140px, .38fr)) auto;
}

.admin-ptoken-existing-fee-rule {
  grid-template-columns: minmax(260px, 1.2fr) minmax(200px, .7fr) minmax(160px, .45fr) auto;
}

.basket-opportunity-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--network-rgb), 0.14), transparent 34%),
    var(--surface);
  border-color: color-mix(in srgb, var(--network) 22%, var(--line));
  display: grid;
  gap: 22px;
  padding: clamp(22px, 3vw, 32px);
}

.ptoken-decision-head .ptoken-quick-definition {
  background: color-mix(in srgb, var(--network) 8%, var(--surface));
  border-left: 3px solid var(--network);
  border-radius: 0 11px 11px 0;
  color: var(--ink-strong);
  font-size: 15px;
  line-height: 1.45;
  max-width: 820px;
  padding: 10px 13px;
}

.ptoken-quick-definition strong {
  color: var(--network);
}

.ptoken-quick-benefits {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 11px 0 0;
  max-width: 920px;
  padding: 0;
}

.ptoken-quick-benefits li {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
}

.ptoken-quick-benefits strong {
  color: var(--ink-strong);
  font-size: 13px;
}

.ptoken-quick-benefits span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.ptoken-opportunity-map {
  border-top: 1px solid color-mix(in srgb, var(--network) 24%, var(--line));
  display: grid;
  gap: 18px;
  padding-top: 22px;
}

.ptoken-opportunity-loading {
  background: var(--surface-2);
  border: 1px dashed color-mix(in srgb, var(--network) 34%, var(--line));
  border-radius: 16px;
  display: grid;
  gap: 5px;
  padding: 20px;
}

.ptoken-opportunity-loading strong {
  color: var(--ink-strong);
  font-size: 16px;
}

.ptoken-opportunity-loading span {
  color: var(--muted);
  font-size: 13px;
}

.ptoken-opportunity-heading {
  display: grid;
  gap: 4px;
}

.ptoken-opportunity-heading > span,
.ptoken-level-roadmap > header span,
.ptoken-first-goal > header > span,
.ptoken-expansion-option > header > span {
  color: var(--network);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ptoken-opportunity-heading h4,
.ptoken-first-goal h4 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  margin: 0;
}

.ptoken-opportunity-heading p,
.ptoken-first-goal p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.ptoken-opportunity-options {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
}

.ptoken-opportunity-options > :only-child {
  grid-column: 1 / -1;
}

.ptoken-create-now,
.ptoken-first-goal,
.ptoken-expansion-option {
  border-radius: 18px;
  min-width: 0;
  padding: 20px;
}

.ptoken-create-now {
  --ptoken-target-color: var(--success);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--success) 18%, transparent), transparent 42%),
    color-mix(in srgb, var(--success) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--success) 46%, var(--line));
  display: grid;
  gap: 16px;
}

.ptoken-create-now.needs-backing {
  --ptoken-target-color: var(--warning);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--warning) 18%, transparent), transparent 42%),
    color-mix(in srgb, var(--warning) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 52%, var(--line));
}

.ptoken-create-now > header {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.ptoken-create-now > header > div {
  display: grid;
  gap: 4px;
}

.ptoken-ready-badge {
  align-items: center;
  color: var(--success);
  display: inline-flex;
  font-size: 13px;
  font-weight: 850;
  gap: 6px;
}

.ptoken-create-now.needs-backing .ptoken-ready-badge {
  color: var(--warning);
}

.ptoken-create-now h4 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.15;
  margin: 0;
}

.ptoken-create-now > header p {
  color: var(--muted-strong);
  font-size: 13px;
  margin: 0;
}

.ptoken-create-now > header > strong {
  color: var(--success);
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
}

.ptoken-create-now.needs-backing > header > strong {
  color: var(--warning);
}

.ptoken-create-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ptoken-create-metrics article {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 22%, var(--line));
  border-radius: 12px;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px;
}

.ptoken-create-now.needs-backing .ptoken-create-metrics article {
  border-color: color-mix(in srgb, var(--warning) 28%, var(--line));
}

.ptoken-create-metrics small,
.ptoken-create-metrics span {
  color: var(--muted);
  font-size: 12px;
}

.ptoken-create-metrics b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 17px;
  overflow-wrap: anywhere;
}

.ptoken-current-progress {
  display: grid;
  gap: 7px;
}

.ptoken-current-progress > div {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.ptoken-current-progress > div span,
.ptoken-current-progress > div strong {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 800;
}

.ptoken-current-progress > div strong {
  color: var(--ptoken-target-color);
}

.ptoken-level-card-progress > span {
  background: color-mix(in srgb, var(--success) 12%, var(--surface-3));
  border-radius: 999px;
  display: block;
  height: 10px;
  overflow: hidden;
}

.ptoken-level-card-progress > span i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--success) 72%, var(--network)), var(--success));
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 240ms ease;
}

.ptoken-current-progress > input[type="range"] {
  appearance: none;
  background: linear-gradient(
    90deg,
    var(--ptoken-target-color) 0%,
    var(--ptoken-target-color) var(--ptoken-target-progress),
    color-mix(in srgb, var(--ptoken-target-color) 13%, var(--surface-3)) var(--ptoken-target-progress),
    color-mix(in srgb, var(--ptoken-target-color) 13%, var(--surface-3)) 100%
  );
  border-radius: 999px;
  cursor: pointer;
  height: 10px;
  margin: 6px 0;
  outline: none;
  width: 100%;
}

.ptoken-current-progress > input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background: var(--surface);
  border: 6px solid var(--ptoken-target-color);
  border-radius: 50%;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ptoken-target-color) 32%, transparent);
  height: 23px;
  width: 23px;
}

.ptoken-current-progress > input[type="range"]::-moz-range-thumb {
  background: var(--surface);
  border: 6px solid var(--ptoken-target-color);
  border-radius: 50%;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ptoken-target-color) 32%, transparent);
  height: 11px;
  width: 11px;
}

.ptoken-current-progress > input[type="range"]:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ptoken-target-color) 20%, transparent);
}

.ptoken-current-progress > small {
  align-items: center;
  color: var(--muted);
  display: grid;
  font-size: 12px;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
}

.ptoken-current-progress > small b {
  color: var(--muted-strong);
}

.ptoken-current-progress > small em {
  color: var(--ptoken-target-color);
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.ptoken-current-composition {
  display: grid;
  gap: 7px;
}

.ptoken-current-composition > small {
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 750;
}

.ptoken-current-composition > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ptoken-current-composition > div span,
.ptoken-expansion-gaps span {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  padding: 7px 10px;
}

.ptoken-current-composition > div span.is-ready {
  border-color: color-mix(in srgb, var(--success) 36%, var(--line));
}

.ptoken-current-composition > div span.is-partial {
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
}

.ptoken-current-composition > div b,
.ptoken-expansion-gaps b {
  color: var(--ink-strong);
  margin-right: 6px;
}

.ptoken-create-now > .button,
.ptoken-first-goal > .button,
.ptoken-expansion-option > .button {
  min-height: 44px;
  width: 100%;
}

.ptoken-target-outcome {
  display: grid;
  gap: 15px;
}

.ptoken-target-outcome > .button {
  min-height: 44px;
  width: 100%;
}

.ptoken-target-completion {
  border-top: 1px solid color-mix(in srgb, var(--warning) 38%, var(--line));
  display: grid;
  gap: 11px;
  padding-top: 14px;
}

.ptoken-target-completion.is-actionable {
  border-top-color: color-mix(in srgb, var(--success) 52%, var(--line));
}

.ptoken-target-completion.is-waiting {
  border-top-color: var(--line);
}

.ptoken-target-completion > header {
  align-items: end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.ptoken-target-completion > header > div {
  display: grid;
  gap: 2px;
}

.ptoken-target-completion > header span,
.ptoken-target-purchase-card > header span {
  color: var(--warning);
  font-size: max(var(--desktop-font-size-floor, 0px), 9px);
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ptoken-target-completion.is-actionable > header span,
.ptoken-target-purchase-card.is-actionable > header span {
  color: var(--success);
}

.ptoken-target-completion > header h5 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0;
}

.ptoken-target-completion > header p {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  line-height: 1.45;
  margin: 0;
  max-width: 480px;
  text-align: right;
}

.ptoken-target-purchase-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
}

.ptoken-target-purchase-card {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--line));
  border-radius: 12px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px;
}

.ptoken-target-purchase-card.is-actionable {
  background: color-mix(in srgb, var(--success) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 42%, var(--line));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--success) 8%, transparent);
}

.ptoken-target-purchase-card.is-unavailable {
  border-style: dashed;
  opacity: 0.78;
}

.ptoken-target-purchase-card > header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.ptoken-target-purchase-card > header > div {
  display: grid;
  gap: 2px;
}

.ptoken-target-purchase-card > header strong,
.ptoken-target-purchase-card > header > b {
  color: var(--ink-strong);
  font-size: 13px;
}

.ptoken-target-purchase-card > header > b {
  color: var(--warning);
  white-space: nowrap;
}

.ptoken-target-purchase-card.is-actionable > header > b {
  color: var(--success);
}

.ptoken-target-purchase-card > p {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  line-height: 1.45;
  margin: 0;
}

.ptoken-target-purchase-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ptoken-target-purchase-card > div > span {
  display: grid;
  gap: 2px;
}

.ptoken-target-purchase-card > div small {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 9px);
}

.ptoken-target-purchase-card > div b {
  color: var(--ink-strong);
  font-size: 12px;
}

.ptoken-target-purchase-card > .button {
  min-height: 34px;
  padding: 7px 9px;
  width: 100%;
}

.ptoken-expansion-option {
  background: color-mix(in srgb, var(--network) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--network) 34%, var(--line));
  display: grid;
  gap: 13px;
}

.ptoken-expansion-option > header {
  display: grid;
  gap: 4px;
}

.ptoken-expansion-option > header > strong {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
}

.ptoken-expansion-comparison {
  align-items: center;
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.ptoken-expansion-comparison > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px;
}

.ptoken-expansion-comparison small {
  color: var(--muted);
  font-size: 12px;
}

.ptoken-expansion-comparison b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 16px;
}

.ptoken-expansion-comparison > i {
  color: var(--network);
  font-style: normal;
  font-weight: 900;
}

.ptoken-expansion-option > p {
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

.ptoken-expansion-gaps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ptoken-expansion-recommendation {
  background: color-mix(in srgb, var(--network) 9%, var(--surface));
  border-left: 3px solid var(--network);
  border-radius: 0 9px 9px 0;
  padding: 9px 10px;
}

.ptoken-expansion-recommendation strong {
  color: var(--network);
}

.ptoken-first-goal {
  background: color-mix(in srgb, var(--network) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--network) 32%, var(--line));
  display: grid;
  gap: 16px;
}

.ptoken-first-goal > header {
  display: grid;
  gap: 4px;
}

.ptoken-owned-backing,
.ptoken-completion-options {
  display: grid;
  gap: 13px;
}

.ptoken-owned-backing > header,
.ptoken-completion-options > header {
  align-items: end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.ptoken-owned-backing > header > div,
.ptoken-completion-options > header > div {
  display: grid;
  gap: 3px;
}

.ptoken-owned-backing > header span,
.ptoken-completion-options > header span {
  color: var(--network);
  font-size: max(var(--desktop-font-size-floor, 0px), 10px);
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ptoken-owned-backing h5,
.ptoken-completion-options h5 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0;
}

.ptoken-owned-backing > header p,
.ptoken-completion-options > p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.ptoken-owned-backing > header p {
  max-width: 470px;
  text-align: right;
}

.ptoken-owned-backing-grid,
.ptoken-completion-option-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ptoken-owned-backing-item > header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.ptoken-owned-backing-item > header strong {
  color: var(--ink-strong);
  font-size: 13px;
}

.ptoken-owned-backing-item small,
.ptoken-owned-backing-item p {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
}

.ptoken-owned-backing,
.ptoken-completion-options {
  border-top: 1px solid color-mix(in srgb, var(--network) 22%, var(--line));
  padding-top: 14px;
}

.ptoken-owned-backing-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
}

.ptoken-owned-backing-item.is-ready {
  border-color: color-mix(in srgb, var(--success) 38%, var(--line));
}

.ptoken-owned-backing-item.is-partial {
  border-color: color-mix(in srgb, var(--warning) 44%, var(--line));
}

.ptoken-owned-backing-item > header span {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 9px);
  font-weight: 750;
}

.ptoken-owned-backing-item > b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 15px;
}

.ptoken-owned-backing-item p {
  line-height: 1.4;
  margin: 0;
}

.ptoken-owned-backing-item.is-ready p {
  color: var(--success);
  font-weight: 750;
}

.ptoken-owned-backing-item.is-partial p {
  color: var(--warning);
  font-weight: 750;
}

.ptoken-completion-options > header > strong {
  color: var(--warning);
  font-family: var(--font-display);
  font-size: 17px;
  white-space: nowrap;
}

.ptoken-completion-option-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.ptoken-backing-price-note {
  background: color-mix(in srgb, var(--network) 7%, var(--surface));
  border-left: 3px solid var(--network);
  border-radius: 0 9px 9px 0;
  color: var(--muted-strong);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  line-height: 1.45;
  padding: 9px 10px;
}

.ptoken-level-roadmap {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 13px;
  padding-top: 18px;
}

.ptoken-level-roadmap > header {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.ptoken-level-roadmap > header > div {
  display: grid;
  gap: 3px;
}

.ptoken-level-roadmap h5 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 21px;
  margin: 0;
}

.ptoken-level-roadmap > header p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
  max-width: 430px;
  text-align: right;
}

.ptoken-level-cards {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ptoken-level-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  display: grid;
  gap: 7px;
  min-width: 0;
  outline: none;
  padding: 13px;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.ptoken-level-card:hover {
  border-color: color-mix(in srgb, var(--network) 45%, var(--line));
  transform: translateY(-2px);
}

.ptoken-level-card:focus-visible {
  border-color: var(--network);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--network) 20%, transparent);
}

.ptoken-level-card.is-current {
  background: color-mix(in srgb, var(--success) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 48%, var(--line));
  box-shadow: 0 9px 22px color-mix(in srgb, var(--success) 10%, transparent);
}

.ptoken-level-card.is-ready:not(.is-current) {
  border-color: color-mix(in srgb, var(--network) 30%, var(--line));
}

.ptoken-level-card.is-locked {
  filter: saturate(0.55);
  opacity: 0.7;
}

.ptoken-level-card.is-locked.is-progressing {
  background: color-mix(in srgb, var(--success) var(--ptoken-progress-tint, 3%), var(--surface-2));
  border-color: color-mix(in srgb, var(--success) var(--ptoken-progress-border, 24%), var(--line));
  filter: saturate(0.88);
  opacity: 0.9;
}

.ptoken-level-card.is-locked:hover,
.ptoken-level-card.is-locked:focus-visible {
  opacity: 0.88;
}

.ptoken-level-card.is-inspected,
.ptoken-level-card.is-locked.is-inspected {
  background: color-mix(in srgb, var(--network) 8%, var(--surface));
  border-color: var(--network);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--network) 14%, transparent);
  filter: none;
  opacity: 1;
}

.ptoken-level-card > header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.ptoken-level-card > header strong {
  color: var(--ink-strong);
  font-size: 14px;
}

.ptoken-level-card > header span {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-strong);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  font-weight: 800;
  padding: 4px 7px;
}

.ptoken-level-card.is-current > header span {
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 34%, var(--line));
  color: var(--success);
}

.ptoken-level-card > small,
.ptoken-level-card > p,
.ptoken-level-card-terms span {
  color: var(--muted);
  font-size: 12px;
}

.ptoken-level-card > b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 16px;
}

.ptoken-level-card-progress {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.ptoken-level-card-progress > span {
  height: 8px;
}

.ptoken-level-card.is-locked .ptoken-level-card-progress > span i {
  background: var(--muted);
}

.ptoken-level-card.is-locked.is-progressing .ptoken-level-card-progress > span i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--success) 68%, var(--network)), var(--success));
}

.ptoken-level-card-progress em {
  color: var(--muted-strong);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  font-style: normal;
  font-weight: 800;
}

.ptoken-level-card > p {
  line-height: 1.4;
  margin: 0;
  min-height: 34px;
}

.ptoken-level-card-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ptoken-level-card-terms span {
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 7px;
}

.ptoken-level-card-terms span.is-yield {
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success);
  font-weight: 800;
}

.ptoken-level-card-action {
  align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--network) 18%, var(--line));
  color: var(--network);
  display: flex;
  font-size: 12px;
  font-weight: 800;
  gap: 8px;
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 9px;
}

.ptoken-level-card-action b {
  font-size: 16px;
  transition: transform 180ms ease;
}

.ptoken-level-card:hover .ptoken-level-card-action b,
.ptoken-level-card:focus-visible .ptoken-level-card-action b {
  transform: translateX(3px);
}

.ptoken-level-inspector {
  background: color-mix(in srgb, var(--network) 4%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--network) 42%, var(--line));
  border-radius: 18px;
  display: grid;
  gap: 15px;
  outline: none;
  padding: 17px;
}

.ptoken-level-inspector:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--network) 16%, transparent);
}

.ptoken-level-inspector.is-ready {
  background: color-mix(in srgb, var(--success) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 46%, var(--line));
}

.ptoken-level-inspector > header,
.ptoken-level-purchase-options > header,
.ptoken-level-ready-composition {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.ptoken-level-inspector > header > div,
.ptoken-level-purchase-options > header > div,
.ptoken-level-ready-composition > div {
  display: grid;
  gap: 3px;
}

.ptoken-level-inspector > header span,
.ptoken-level-purchase-options > header span,
.ptoken-level-ready-composition > div > span {
  color: var(--network);
  font-size: max(var(--desktop-font-size-floor, 0px), 10px);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ptoken-level-inspector.is-ready > header span {
  color: var(--success);
}

.ptoken-level-inspector > header h5,
.ptoken-level-purchase-options > header h6 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  margin: 0;
}

.ptoken-level-inspector > header h5 {
  font-size: 20px;
}

.ptoken-level-inspector > header p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
  max-width: 680px;
}

.ptoken-level-inspector > header button {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted-strong);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  font-weight: 800;
  min-height: 34px;
  padding: 7px 11px;
}

.ptoken-level-inspector > header button:hover,
.ptoken-level-inspector > header button:focus-visible {
  border-color: var(--network);
  color: var(--network);
}

.ptoken-level-inspector-gaps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ptoken-level-inspector-gaps span {
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--line));
  border-radius: 999px;
  color: var(--muted-strong);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  padding: 6px 9px;
}

.ptoken-level-inspector-gaps b {
  color: var(--warning);
}

.ptoken-level-compact-summary {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ptoken-level-compact-summary > section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px;
}

.ptoken-level-compact-summary > section > small {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 10px);
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ptoken-level-portfolio-assets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ptoken-level-portfolio-assets > span {
  background: color-mix(in srgb, var(--success) 7%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--success) 28%, var(--line));
  border-radius: 999px;
  color: var(--muted-strong);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  padding: 6px 9px;
}

.ptoken-level-portfolio-assets b {
  color: var(--ink-strong);
  margin-right: 5px;
}

.ptoken-level-purchase-options {
  border-top: 1px solid color-mix(in srgb, var(--network) 22%, var(--line));
  display: grid;
  gap: 12px;
  padding-top: 14px;
}

.ptoken-level-purchase-options > header h6 {
  font-size: 16px;
}

.ptoken-level-purchase-options > header > small {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  line-height: 1.4;
  max-width: 390px;
  text-align: right;
}

.ptoken-level-recommendation-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ptoken-level-recommendation {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 11px;
}

.ptoken-level-recommendation > div:first-child {
  display: grid;
  gap: 2px;
}

.ptoken-level-recommendation > div:first-child > span {
  color: var(--network);
  font-size: max(var(--desktop-font-size-floor, 0px), 9px);
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ptoken-level-recommendation > div:first-child > strong {
  color: var(--ink-strong);
  font-size: 14px;
}

.ptoken-level-recommendation > div:first-child > small,
.ptoken-level-recommendation-values small {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 10px);
}

.ptoken-level-recommendation-values {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ptoken-level-recommendation-values > span {
  display: grid;
  gap: 2px;
}

.ptoken-level-recommendation-values b {
  color: var(--ink-strong);
  font-size: 12px;
}

.ptoken-level-recommendation .button {
  margin-top: auto;
  min-height: 34px;
  padding: 7px 9px;
  width: 100%;
}

.ptoken-level-ready-composition {
  border-top: 1px solid color-mix(in srgb, var(--success) 28%, var(--line));
  padding-top: 14px;
}

.ptoken-level-ready-composition p {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  margin: 0;
}

@media (max-width: 1100px) {
  .ptoken-opportunity-options {
    grid-template-columns: 1fr;
  }

  .ptoken-level-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.basket-opportunity-status {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1.15fr) minmax(180px, 0.58fr) minmax(260px, 0.82fr);
  padding: 18px;
}

.basket-eligible-value,
.basket-user-level-card {
  display: grid;
  gap: 3px;
}

.basket-user-level-card {
  background: color-mix(in srgb, var(--network) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--network) 30%, var(--line));
  border-radius: 14px;
  padding: 13px 15px;
}

.basket-user-level-card strong {
  color: var(--network);
  font-size: 24px;
}

.basket-opportunity-status small,
.basket-opportunity-status span,
.basket-value-grid span,
.basket-value-grid small {
  color: var(--muted);
  font-size: var(--font-size-minimum);
}

.basket-opportunity-status strong {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 27px;
}

.basket-opportunity-progress {
  display: grid;
  gap: 8px;
}

.basket-opportunity-progress > div {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.basket-opportunity-progress > div span {
  color: var(--muted-strong);
  font-size: var(--font-size-minimum);
  font-weight: 750;
}

.basket-opportunity-progress > div strong {
  color: var(--network);
  font-family: var(--font-display);
  font-size: 14px;
}

.basket-opportunity-progress > span {
  background: var(--surface-3);
  border-radius: 999px;
  display: block;
  height: 9px;
  overflow: hidden;
}

.basket-opportunity-progress b {
  background: linear-gradient(90deg, var(--network), var(--success));
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 240ms ease;
  width: 0;
}

.basket-value-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.basket-value-grid article {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 16px;
}

.basket-value-grid strong {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 21px;
}

.basket-value-grid .is-level strong {
  color: var(--network);
}

.basket-value-grid .is-selected strong {
  color: var(--success);
}

.basket-value-grid .is-creator strong {
  color: color-mix(in srgb, var(--network) 70%, var(--warning));
}

.ptoken-level-simulator-head h4 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 19px;
  margin: 0;
}

.ptoken-level-simulator-head p,
.ptoken-level-simulation-note,
.ptoken-volume-simulator p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.basket-opportunity-scenario {
  background: color-mix(in srgb, var(--success-soft) 70%, var(--surface));
  border-left: 3px solid var(--success);
  border-radius: 0 12px 12px 0;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  padding: 14px 16px;
}

.ptoken-level-simulator {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--network) 8%, transparent), transparent 48%),
    var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--network) 24%, var(--line));
  border-radius: 18px;
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 24px);
}

.ptoken-level-simulator > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  list-style: none;
}

.ptoken-level-simulator > summary::-webkit-details-marker {
  display: none;
}

.ptoken-level-simulator:not([open]) > :not(summary) {
  display: none;
}

.ptoken-level-simulator > summary > span {
  display: grid;
  gap: 3px;
}

.ptoken-level-simulator > summary b {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 16px;
}

.ptoken-level-simulator > summary small {
  color: var(--muted);
  font-size: var(--font-size-minimum);
}

.ptoken-level-simulator[open] > summary {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.ptoken-level-simulator-head {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.ptoken-level-simulator-head > div {
  display: grid;
  gap: 5px;
  max-width: 720px;
}

.ptoken-current-level,
#basketSimulatorCurrentBadge {
  background: color-mix(in srgb, var(--network) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--network) 34%, var(--line));
  border-radius: 999px;
  color: var(--network);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
  padding: 8px 12px;
}

.ptoken-level-range {
  display: grid;
  gap: 10px;
}

#basketLevelSimulator,
#basketCreatorVolumeSimulator {
  accent-color: var(--network);
  cursor: pointer;
  margin: 0;
  width: 100%;
}

#basketLevelSimulator {
  height: 22px;
}

.ptoken-level-ticks {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(var(--ptoken-level-count, 7), minmax(0, 1fr));
}

.ptoken-level-ticks button {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  display: grid;
  font-size: max(var(--desktop-font-size-floor, 0px), 10px);
  gap: 2px;
  min-width: 0;
  padding: 7px 4px;
  text-align: center;
}

.ptoken-level-ticks button strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.ptoken-level-ticks button.is-reached {
  border-color: color-mix(in srgb, var(--success) 35%, var(--line));
}

.ptoken-level-ticks button.is-current {
  box-shadow: inset 0 0 0 1px var(--success);
  color: var(--success);
}

.ptoken-level-ticks button.is-simulated {
  background: color-mix(in srgb, var(--network) 11%, var(--surface));
  border-color: var(--network);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--network) 13%, transparent);
}

.ptoken-level-simulation-title {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.ptoken-level-simulation-title > span,
.ptoken-level-simulation-title > small {
  color: var(--muted);
  font-size: 12px;
}

.ptoken-level-simulation-title strong {
  color: var(--network);
  font-family: var(--font-display);
  font-size: 20px;
}

.ptoken-level-simulation-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ptoken-level-simulation-grid article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  display: grid;
  gap: 4px;
  padding: 14px;
}

.ptoken-level-simulation-grid span,
.ptoken-level-simulation-grid small,
.ptoken-volume-simulator label {
  color: var(--muted);
  font-size: var(--font-size-minimum);
}

.ptoken-level-simulation-grid strong {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 18px;
}

.ptoken-level-simulation-grid article:first-child strong {
  color: var(--success);
}

.ptoken-volume-simulator {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  padding: 15px;
}

.ptoken-volume-simulator > div {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.ptoken-volume-simulator label {
  font-weight: 750;
}

.ptoken-volume-simulator strong {
  color: var(--network);
  font-family: var(--font-display);
  font-size: 16px;
}

.ptoken-volume-simulator p {
  color: var(--muted-strong);
}

.ptoken-level-simulation-note {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.basket-composition-editor {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  padding-top: 20px;
}

.basket-composition-editor[hidden] {
  display: none;
}

#basketProgressBox[hidden] {
  display: none !important;
}

.basket-composition-editor-head {
  background: color-mix(in srgb, var(--network) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--network) 22%, var(--line));
  border-radius: 14px;
  padding: 15px 17px;
}

.basket-composition-editor-head > div,
.basket-compact-section-head {
  display: grid;
  gap: 4px;
}

.basket-composition-editor-head h3,
.basket-compact-section-head h4 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  margin: 0;
}

.basket-composition-editor-head h3 {
  font-size: 20px;
}

.basket-composition-editor-head p,
.basket-compact-section-head p {
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

#basketAssetsBox {
  scroll-margin-top: 18px;
}

.basket-issuance-panel,
.basket-review-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 13px;
  padding: clamp(15px, 2.5vw, 20px);
}

.basket-review-panel {
  border-color: color-mix(in srgb, var(--network) 30%, var(--line));
}

.basket-review-panel .form-actions {
  justify-content: flex-end;
}

.basket-review-panel .form-actions .button {
  min-width: min(100%, 260px);
}

.ptoken-guided-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  gap: 15px;
  padding: clamp(16px, 2.5vw, 22px);
}

.ptoken-guided-step.is-review {
  border-color: color-mix(in srgb, var(--network) 30%, var(--line));
}

.ptoken-guided-step-head {
  align-items: flex-start;
  display: grid;
  gap: 12px;
  grid-template-columns: 38px minmax(0, 1fr);
}

.ptoken-step-number {
  align-items: center;
  background: color-mix(in srgb, var(--network) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--network) 32%, var(--line));
  border-radius: 11px;
  color: var(--network);
  display: inline-flex;
  font-size: 14px;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.ptoken-guided-step-head > div {
  display: grid;
  gap: 3px;
}

.ptoken-guided-step-head small {
  color: var(--network);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ptoken-guided-step-head h4 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0;
}

.ptoken-guided-step-head p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.basket-step-status {
  display: grid;
  gap: 5px;
}

.basket-step-status strong {
  color: var(--ink-strong);
  font-size: 14px;
}

.basket-step-status span {
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.5;
}

.basket-selected-source-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.basket-selected-source-summary > div {
  background: color-mix(in srgb, var(--surface) 86%, var(--network));
  border: 1px solid color-mix(in srgb, var(--network) 20%, var(--line));
  border-radius: 10px;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
}

.basket-selected-source-summary small {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  font-weight: 700;
}

.basket-selected-source-summary b {
  color: var(--ink-strong);
  font-size: 14px;
}

.basket-assets-selection-guide {
  background: color-mix(in srgb, var(--network) 6%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--network) 18%, var(--line));
  border-radius: 10px;
  display: grid;
  gap: 3px;
  padding: 11px 13px;
}

.basket-assets-selection-guide strong {
  color: var(--ink-strong);
  font-size: 12px;
}

.basket-assets-selection-guide span {
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.45;
}

.basket-asset-source > .basket-asset-use-label {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.basket-asset-source > .basket-asset-selection-message {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  font-weight: 600;
  line-height: 1.4;
}

.basket-asset-source.is-preserved > .basket-asset-selection-message {
  color: var(--success, #21845b);
}

.basket-asset-source.is-invalid > .basket-asset-selection-message {
  color: var(--danger, #c84646);
}

.basket-asset-source.has-selection {
  background: color-mix(in srgb, var(--network) 5%, transparent);
  border-radius: 10px;
  padding: 8px;
}

.ptoken-backing-target {
  background: color-mix(in srgb, var(--network) 7%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--network) 23%, var(--line));
  border-radius: 14px;
  display: grid;
  gap: 12px;
  padding: 15px;
}

.ptoken-backing-target-control {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.ptoken-backing-target-control label {
  color: var(--muted-strong);
  display: grid;
  font-size: var(--font-size-minimum);
  font-weight: 750;
  gap: 6px;
}

.ptoken-backing-target-control input {
  background: var(--surface);
  border-color: var(--line-strong);
}

.ptoken-backing-target-control .button {
  min-height: 44px;
  white-space: nowrap;
}

.ptoken-backing-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ptoken-backing-presets button {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-strong);
  cursor: pointer;
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  font-weight: 800;
  padding: 7px 10px;
}

.ptoken-backing-presets button:hover,
.ptoken-backing-presets button.is-active {
  background: color-mix(in srgb, var(--network) 12%, var(--surface));
  border-color: var(--network);
  color: var(--network);
}

.ptoken-backing-presets button.is-recommended::before {
  content: "✓ ";
}

.ptoken-backing-target > small {
  color: var(--muted);
  font-size: var(--font-size-minimum);
  line-height: 1.5;
}

.ptoken-purchase-guide {
  background: linear-gradient(145deg, color-mix(in srgb, var(--network) 8%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--network) 28%, var(--line));
  border-radius: 16px;
  display: grid;
  gap: 14px;
  padding: clamp(15px, 2.5vw, 21px);
}

.ptoken-purchase-guide.is-empty {
  color: var(--muted-strong);
  gap: 4px;
}

.ptoken-purchase-guide.is-empty > strong {
  color: var(--ink-strong);
  font-size: 14px;
}

.ptoken-purchase-guide.is-empty > span {
  font-size: 12px;
  line-height: 1.5;
}

.basket-purchase-guide-head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.basket-purchase-guide-head > div {
  display: grid;
  gap: 4px;
}

.basket-purchase-guide-head span,
.basket-purchase-source-head span {
  color: var(--network);
  font-size: max(var(--desktop-font-size-floor, 0px), 10px);
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.basket-purchase-guide-head h5,
.basket-purchase-source-head h6,
.basket-purchase-option h6 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  margin: 0;
}

.basket-purchase-guide-head h5 {
  font-size: 18px;
}

.basket-purchase-guide-head p,
.basket-purchase-option p {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  line-height: 1.45;
  margin: 0;
}

.basket-purchase-guide-head > strong {
  background: color-mix(in srgb, var(--warning) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--line));
  border-radius: 999px;
  color: var(--warning);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  padding: 7px 10px;
  white-space: nowrap;
}

.ptoken-purchase-guide.is-ready .basket-purchase-guide-head > strong {
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 28%, var(--line));
  color: var(--success);
}

.basket-purchase-guide-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.basket-purchase-guide-metrics article {
  background: color-mix(in srgb, var(--surface-2) 88%, var(--network));
  border: 1px solid var(--line);
  border-radius: 11px;
  display: grid;
  gap: 3px;
  padding: 11px;
}

.basket-purchase-guide-metrics small,
.basket-purchase-option-values small {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 10px);
  font-weight: 700;
}

.basket-purchase-guide-metrics b,
.basket-purchase-option-values b {
  color: var(--ink-strong);
  font-size: 12px;
}

.basket-purchase-guide-metrics span {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 10px);
  line-height: 1.35;
}

.basket-purchase-completion,
.basket-purchase-alternative,
.basket-purchase-disclaimer {
  border-radius: 11px;
  color: var(--muted-strong);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  padding: 11px 13px;
}

.basket-purchase-completion {
  border: 1px solid var(--line);
}

.basket-purchase-alternative {
  background: var(--surface-2);
  padding: 9px 12px;
}

.basket-purchase-sources {
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.basket-purchase-sources > section {
  border: 1px solid var(--line);
  border-radius: 13px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.basket-purchase-source-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.basket-purchase-source-head > div {
  display: grid;
  gap: 2px;
}

.basket-purchase-source-head h6 {
  font-size: 13px;
}

.basket-purchase-source-head > strong {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 10px);
  white-space: nowrap;
}

.basket-purchase-options {
  display: grid;
  gap: 8px;
}

.basket-purchase-option {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  display: grid;
  gap: 8px;
  padding: 11px;
}

.basket-purchase-option.is-ptoken {
  background: color-mix(in srgb, var(--ptoken) 6%, var(--surface-2));
  border-color: color-mix(in srgb, var(--ptoken) 38%, var(--line));
}

.basket-purchase-option.is-ptoken > header span {
  color: var(--ptoken);
}

.basket-purchase-option > header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.basket-purchase-option > header span {
  color: var(--network);
  font-size: max(var(--desktop-font-size-floor, 0px), 9px);
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.basket-purchase-option > header strong {
  color: var(--ink-strong);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
}

.basket-purchase-option h6 {
  font-size: 13px;
}

.basket-purchase-option-values {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.basket-purchase-option-values > div {
  display: grid;
  gap: 2px;
}

.basket-purchase-owned-note {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 10px);
  line-height: 1.4;
}

.basket-purchase-option .button {
  justify-self: start;
  min-height: 34px;
  padding: 7px 11px;
}

.basket-purchase-empty {
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: 11px;
  display: grid;
  gap: 3px;
  padding: 12px;
}

.basket-purchase-empty strong {
  color: var(--ink-strong);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
}

.basket-purchase-empty span {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 10px);
  line-height: 1.45;
}

.basket-purchase-disclaimer {
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 0 0;
}

.basket-composition-rule {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.basket-composition-rule article {
  background: color-mix(in srgb, var(--network) 7%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--network) 22%, var(--line));
  border-radius: 12px;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
}

.basket-composition-rule article small {
  color: var(--muted);
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  font-weight: 700;
}

.basket-composition-rule article strong {
  color: var(--ink-strong);
  font-size: 14px;
}

.basket-composition-status {
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted-strong);
  font-size: 12px;
  grid-column: 1 / -1;
  line-height: 1.5;
  margin: 0;
  padding: 11px 13px;
}

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

.ptoken-supply-guide > label,
.ptoken-supply-guide > div {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 13px;
  display: grid;
  gap: 6px;
  padding: 14px;
}

.ptoken-supply-guide > label {
  color: var(--muted-strong);
  font-size: var(--font-size-minimum);
  font-weight: 750;
}

.ptoken-supply-guide input {
  background: var(--surface);
  border-color: var(--line-strong);
}

.ptoken-symbol-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.ptoken-symbol-control input {
  border-radius: 11px 0 0 11px;
  font-family: var(--font-display);
  font-weight: 850;
  letter-spacing: 0.12em;
  min-width: 0;
  text-transform: uppercase;
}

.ptoken-symbol-control button {
  background: color-mix(in srgb, var(--network) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--network) 28%, var(--line));
  border-left: 0;
  border-radius: 0 11px 11px 0;
  color: var(--network);
  cursor: pointer;
  font-size: max(var(--desktop-font-size-floor, 0px), 11px);
  font-weight: 850;
  padding: 0 10px;
}

.ptoken-supply-example {
  color: var(--muted);
  font-size: var(--font-size-minimum);
  line-height: 1.55;
  margin: 0;
}

.ptoken-supply-guide small,
.ptoken-supply-guide span {
  color: var(--muted);
  font-size: var(--font-size-minimum);
}

.ptoken-supply-guide strong {
  color: var(--network);
  font-family: var(--font-display);
  font-size: 18px;
}

.basket-next-step {
  background: color-mix(in srgb, var(--network) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--network) 24%, var(--line));
  border-radius: 12px;
  color: var(--muted-strong) !important;
  padding: 12px 14px;
}

.basket-next-step b {
  color: var(--network);
}

.ptoken-guided-step.is-review .form-actions {
  justify-content: flex-end;
}

.ptoken-guided-step.is-review .form-actions .button {
  min-width: min(100%, 260px);
}

.income-withdrawal-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 95%, var(--warning)), var(--surface));
  border-color: color-mix(in srgb, var(--warning) 28%, var(--line));
  display: grid;
  gap: 18px;
  margin: 18px 0;
  padding: clamp(22px, 3vw, 32px);
}

.income-withdrawal-card .income-decision-number {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--warning) 36%, transparent);
  color: var(--warning);
}

.income-withdrawal-values {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.income-withdrawal-window {
  background: color-mix(in srgb, var(--warning) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--line));
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  padding: 12px 14px;
}

.income-withdrawal-minimum {
  background: color-mix(in srgb, var(--network) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--network) 26%, var(--line));
  border-radius: 12px;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
  padding: 11px 14px;
}

.income-withdrawal-values article {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 5px;
  padding: 15px;
}

.income-withdrawal-values span {
  color: var(--muted);
  font-size: var(--font-size-minimum);
}

.income-withdrawal-values strong {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.income-withdrawal-values .income-withdrawal-fee strong {
  color: var(--warning);
}

.income-withdrawal-values .income-withdrawal-net strong {
  color: var(--success);
}

.income-withdrawal-summary,
#claimNetPreview {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.income-withdrawal-card .claim-inline-control {
  align-items: end;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 0;
  padding: 14px;
}

.income-withdrawal-card .claim-inline-control .button {
  border-color: color-mix(in srgb, var(--warning) 40%, var(--line));
}

.income-withdrawal-card .claim-breakdown {
  margin-top: 0;
}

.income-chart-card {
  margin-top: 28px;
}

#incomeOperationalBridge[hidden] {
  display: none !important;
}

@media (max-width: 980px) {
  .admin-ptoken-composition-form,
  .admin-ptoken-limit-rule {
    grid-template-columns: 1fr 1fr;
  }

  .admin-ptoken-composition-form .button,
  .admin-ptoken-limit-rule > div,
  .admin-ptoken-limit-rule .button {
    grid-column: 1 / -1;
  }

  .income-hero-card {
    gap: 26px;
    grid-template-columns: 1fr;
  }

  .income-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .income-hero-metrics article {
    border-bottom: 1px solid var(--line);
    padding: 15px;
  }

  .income-hero-metrics article:first-child {
    padding-left: 15px;
  }

  .income-hero-metrics article:nth-child(2) {
    border-right: 0;
  }

  .income-hero-metrics article:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .income-position-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .income-position-property {
    grid-column: 1 / -1;
  }

  .income-decision-head {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .income-recommended-badge {
    grid-column: 2;
    justify-self: start;
  }

  .smart-reinvest-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smart-reinvest-row > div:first-child {
    grid-column: 1 / -1;
  }

  .basket-opportunity-status {
    grid-template-columns: 1fr;
  }

  .basket-value-grid,
  .ptoken-level-simulation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .basket-purchase-guide-metrics,
  .basket-purchase-sources,
  .ptoken-level-compact-summary,
  .ptoken-level-recommendation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .basket-purchase-sources > section {
    grid-column: 1 / -1;
  }

  .ptoken-supply-guide {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .basket-composition-editor small {
    font-size: 12px !important;
  }

  .basket-composition-editor .ptoken-yield-indicator,
  .basket-composition-editor .ptoken-yield-indicator b,
  .basket-composition-editor .ptoken-yield-indicator small {
    font-size: 12px !important;
  }

  .basket-composition-editor .basket-asset-use-label,
  .basket-composition-editor .basket-asset-selection-message,
  .basket-composition-editor .basket-asset-token-summary > b,
  .basket-composition-editor .ptoken-symbol-control button {
    font-size: 12px;
  }

  .ptoken-quick-benefits {
    grid-template-columns: 1fr;
  }

  .ptoken-decision-head .ptoken-quick-definition {
    font-size: 14px;
  }

  .ptoken-opportunity-map {
    gap: 15px;
    padding-top: 18px;
  }

  .ptoken-opportunity-heading h4 {
    font-size: 20px;
  }

  .ptoken-create-now,
  .ptoken-first-goal,
  .ptoken-expansion-option {
    padding: 16px;
  }

  .ptoken-create-now > header,
  .ptoken-target-completion > header,
  .ptoken-level-roadmap > header,
  .ptoken-level-inspector > header,
  .ptoken-level-purchase-options > header,
  .ptoken-level-ready-composition,
  .ptoken-owned-backing > header,
  .ptoken-completion-options > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ptoken-create-now > header > strong {
    font-size: 25px;
  }

  .ptoken-create-metrics,
  .ptoken-level-cards,
  .ptoken-level-compact-summary,
  .ptoken-level-recommendation-grid {
    grid-template-columns: 1fr;
  }

  .ptoken-level-inspector,
  .ptoken-level-purchase-options .basket-purchase-sources > section {
    min-width: 0;
  }

  .ptoken-level-ready-composition .button {
    width: 100%;
  }

  .ptoken-expansion-comparison {
    grid-template-columns: 1fr;
  }

  .ptoken-expansion-comparison > i {
    justify-self: center;
    transform: rotate(90deg);
  }

  .ptoken-current-progress > small {
    grid-template-columns: 1fr 1fr;
  }

  .ptoken-current-progress > small em {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: left;
  }

  .ptoken-current-progress > small b:last-child {
    text-align: right;
  }

  .ptoken-level-roadmap > header p,
  .ptoken-target-completion > header p,
  .ptoken-level-purchase-options > header > small,
  .ptoken-owned-backing > header p {
    text-align: left;
  }

  #basketOpportunityMap .ptoken-yield-indicator,
  #basketOpportunityMap .ptoken-target-completion > header span,
  #basketOpportunityMap .ptoken-target-completion > header p,
  #basketOpportunityMap .ptoken-target-purchase-card > header span,
  #basketOpportunityMap .ptoken-target-purchase-card > p,
  #basketOpportunityMap .ptoken-target-purchase-card > div small {
    font-size: 12px !important;
  }

  .ptoken-level-card > header span,
  .ptoken-level-card-progress em {
    font-size: 12px;
  }

  .admin-ptoken-composition-form,
  .admin-ptoken-limit-rule,
  .basket-composition-rule {
    grid-template-columns: 1fr;
  }

  .basket-composition-status {
    grid-column: 1;
  }

  .basket-selected-source-summary {
    grid-template-columns: 1fr;
  }

  .basket-purchase-guide-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .basket-purchase-guide-metrics,
  .basket-purchase-sources,
  .basket-purchase-option-values {
    grid-template-columns: 1fr;
  }

  .basket-purchase-sources > section {
    grid-column: auto;
  }

  [data-view="income"] .app-sidebar {
    display: none;
  }

  [data-view="income"] .app-layout {
    gap: 0;
    margin-top: 8px;
  }

  [data-view="income"] .app-content {
    padding-top: 16px;
  }

  .income-page-head .button {
    width: 100%;
  }

  .income-hero-card,
  .smart-reinvest-card,
  .basket-opportunity-card,
  .income-withdrawal-card {
    padding: 20px 16px;
  }

  .income-hero-main > #incomeLiveValue {
    font-size: clamp(32px, 8.8vw, 34px);
  }

  .income-origins-card > summary {
    align-items: flex-start;
    display: grid;
    padding: 18px;
  }

  .income-origins-action {
    justify-self: start;
  }

  .income-position-summary {
    grid-template-columns: minmax(0, 1fr) 24px;
  }

  .income-position-summary > .income-position-identity {
    grid-column: 1;
    grid-row: 1;
  }

  .income-yield-flow {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    margin: 2px 0;
    max-width: 136px;
    width: 136px;
  }

  .income-position-net {
    grid-column: 1;
    grid-row: 3;
    justify-items: start;
    text-align: left;
  }

  .income-position-value-line {
    justify-content: flex-start;
  }

  .income-position-chevron {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .income-decision-head {
    gap: 12px;
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .income-decision-heading h2 {
    font-size: 24px;
  }

  .income-decision-heading p {
    font-size: 15px;
  }

  .income-decision-number {
    border-radius: 12px;
    height: 40px;
    width: 40px;
  }

  .income-recommended-badge {
    grid-column: 1 / -1;
  }

  .smart-reinvest-head,
  .reinvest-threshold-card,
  .smart-reinvest-row,
  .basket-value-grid,
  .income-withdrawal-values,
  .claim-inline-control {
    grid-template-columns: 1fr;
  }

  .income-before-after {
    grid-template-columns: 1fr;
  }

  .income-before-after > span {
    transform: rotate(90deg);
  }

  .income-before-after > div:last-child {
    text-align: left;
  }

  .income-cycle-growth {
    justify-self: start;
  }

  .smart-reinvest-head > .income-growth-highlight {
    min-width: 0;
  }

  .smart-reinvest-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .basket-builder-disclosure > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .basket-builder-disclosure > summary small {
    text-align: left;
  }

  .ptoken-level-simulator-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ptoken-level-simulator > summary {
    align-items: flex-start;
  }

  .ptoken-supply-guide {
    grid-template-columns: 1fr;
  }

  .ptoken-backing-target-control {
    grid-template-columns: 1fr;
  }

  .ptoken-backing-target-control .button {
    width: 100%;
  }

  .ptoken-level-simulation-grid {
    grid-template-columns: 1fr;
  }

  .ptoken-level-ticks button span {
    display: none;
  }

  .ptoken-volume-simulator > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .income-withdrawal-card .claim-inline-control .button,
  .smart-reinvest-footer .button {
    width: 100%;
  }

  .claim-breakdown-row {
    grid-template-columns: 1fr;
  }

  .claim-breakdown-head {
    display: none;
  }
}

@media (max-width: 430px) {
  .income-hero-metrics,
  .income-position-details {
    grid-template-columns: 1fr;
  }

  .income-hero-metrics article,
  .income-hero-metrics article:first-child,
  .income-hero-metrics article:last-child {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    padding: 14px 0;
  }

  .income-hero-metrics article:last-child {
    border-bottom: 0;
  }

  .income-position-property {
    grid-column: auto;
  }
}