/* =============================================================================
   合流 MergePad · MergepadPay (#/pay) — presentation for js/ui/page-pay.js. Prefix .mpp-. Loaded last.
   Material = the home page's night ocean: a full-bleed caustic hero with a living water orb, glass panels with a
   hairline + glow, 得意黑 display type for titles / big numbers, teal & ice for state and progress (MergepadPay is the
   "新币" side of the flywheel), amber only for the one primary action per step, the verification code and 份 figures.
   Markup follow-ups (things CSS cannot express) live in artifacts/redesign/pay-markup-plan.md.
   ============================================================================= */
.mpp {
  --mpp-ink: #F2FAFC; --mpp-ink2: #D4E6EC; --mpp-soft: #BFD3DC; --mpp-dim: #8FA7B5; --mpp-dim2: #6F8896;
  --mpp-ice: #9FDBFF; --mpp-teal: #46E0D2; --mpp-amber: #FFC766; --mpp-red: #FF8595; --mpp-mint: #5BE6A6;
  --mpp-line: rgb(159 219 255 / .12); --mpp-line2: rgb(159 219 255 / .24); --mpp-well: rgb(3 12 19 / .5);
  --mpp-glass: linear-gradient(180deg, rgb(16 40 54 / .66), rgb(7 20 30 / .72));
  --mpp-ease: cubic-bezier(.16, 1, .3, 1);
  /* water: a seamless 200-unit sine (fill / back fill / crest line), stretched with preserveAspectRatio=none */
  --mpp-wave-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236FF0E4' stop-opacity='.9'/%3E%3Cstop offset='.22' stop-color='%232BB8B8' stop-opacity='.62'/%3E%3Cstop offset='1' stop-color='%2306313F' stop-opacity='.96'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 10C25 0 75 0 100 10S175 20 200 10V100H0Z' fill='url(%23g)'/%3E%3C/svg%3E");
  --mpp-wave-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 10C25 0 75 0 100 10S175 20 200 10V100H0Z' fill='%239FDBFF' fill-opacity='.2'/%3E%3C/svg%3E");
  --mpp-wave-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 10C25 0 75 0 100 10S175 20 200 10' fill='none' stroke='white' stroke-opacity='.75' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  position: relative; padding-bottom: 40px;
}
.mpp .num, .mpp .mpp-cd, .mpp .mpp-code-t { font-variant-numeric: tabular-nums; }

/* ═══ hero ═════════════════════════════════════════════════════════════════════ */
.mpp-hero { --orb: 272px; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: clamp(32px, 5vw, 88px);
  align-items: center; padding: clamp(40px, 5vw, 72px) 0 clamp(44px, 4.6vw, 64px); }
/* full-bleed ocean: caustic glow + rays behind the wrap */
.mpp-hero::before { content: ""; position: absolute; z-index: -3; top: 0; bottom: -140px; left: 50%; width: 100vw; margin-left: -50vw; pointer-events: none;
  background: radial-gradient(32% 60% at 78% 36%, rgb(70 224 210 / .16), transparent 72%), radial-gradient(30% 52% at 6% 0%, rgb(159 219 255 / .08), transparent 70%),
    radial-gradient(60% 50% at 50% 0%, rgb(20 62 80 / .55), transparent 80%), linear-gradient(180deg, #08212D 0%, rgb(8 30 41 / .5) 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent); mask-image: linear-gradient(180deg, #000 58%, transparent); }
.mpp-hero::after { content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; pointer-events: none; opacity: .6;
  background: repeating-linear-gradient(104deg, transparent 0 64px, rgb(159 219 255 / .035) 64px 96px, transparent 96px 184px);
  -webkit-mask-image: radial-gradient(44% 80% at 76% 0%, #000, transparent 76%); mask-image: radial-gradient(44% 80% at 76% 0%, #000, transparent 76%);
  animation: mpp-rays 16s ease-in-out infinite alternate; }
@keyframes mpp-rays { to { transform: translateX(-48px); opacity: .32; } }
/* a slow crest line along the bottom of the hero */
.mpp-hero-l::after { content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; margin-left: -50vw; bottom: 6px; height: 22px; pointer-events: none; opacity: .22;
  background: var(--mpp-wave-l) repeat-x 0 100% / 420px 22px; animation: mpp-crest 40s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
@keyframes mpp-crest { to { background-position: -420px 100%; } }

.mpp-hero-l { grid-column: 1; grid-row: 1; display: grid; gap: 16px; justify-items: start; min-width: 0; }
.mpp-crumb { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font: 500 12px/18px var(--font-mono); letter-spacing: .06em; color: #C9DCE4; }
.mpp-crumb .num { color: var(--mpp-amber); font-weight: 600; }
.mpp-crumb .sl { color: var(--mpp-dim2); }
.mpp .mpp-h1.display { font-size: clamp(52px, 6.8vw, 104px); line-height: 1.02; letter-spacing: -.01em; margin: 2px 0 4px; }
.lang-en .mpp .mpp-h1.display { font-size: clamp(44px, 5.8vw, 86px); line-height: .98; letter-spacing: -.03em; }
.mpp-h1 > span { display: block; width: fit-content; }
@media (min-width: 761px) { :lang(zh-CN) .mpp-h1 > span { display: inline; } }
.mpp-h1 > span:first-child { color: #EAF6FA; text-shadow: 0 0 30px rgb(120 205 255 / .25); }
.mpp .mpp-lede { max-width: 36em; font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.7; color: #A9BDCB; text-wrap: pretty; }

/* the water orb (MergepadPay's pool): waves are background layers clipped by each layer's own border-radius */
.mpp-hero-bg { grid-column: 2; grid-row: 1; align-self: start; justify-self: center; position: relative; z-index: -1; width: var(--orb); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 28%, #133D4D 0%, #0A2230 48%, #051119 80%);
  box-shadow: inset 0 0 0 1px rgb(159 219 255 / .26), inset 0 -30px 70px rgb(70 224 210 / .2), 0 0 0 22px rgb(70 224 210 / .025), 0 0 100px -4px rgb(70 224 210 / .36), 0 50px 90px -40px rgb(0 0 0 / .9);
  outline: 1px solid rgb(70 224 210 / 0); animation: mpp-orb-ripple 5.2s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes mpp-orb-ripple { 0% { outline-offset: 2px; outline-color: rgb(70 224 210 / .55); } 100% { outline-offset: 64px; outline-color: rgb(70 224 210 / 0); } }
.mpp-hero-bg i { position: absolute; inset: 0; border-radius: 50%; background-repeat: repeat-x; }
.mpp-hero-bg .r1 { background-image: var(--mpp-wave-b); background-size: 236px 63%; background-position: -60px 100%; animation: mpp-wave-r1 12s linear infinite; }
.mpp-hero-bg .r2 { background-image: var(--mpp-wave-l), var(--mpp-wave-f); background-size: 200px 57%, 200px 57%; background-position: 0 100%, 0 100%; animation: mpp-wave-r2 7s linear infinite; }
@keyframes mpp-wave-r1 { to { background-position: 176px 100%; } }
@keyframes mpp-wave-r2 { to { background-position: -200px 100%, -200px 100%; } }
/* slowly turning rim: teal → ice → amber */
.mpp-hero-bg::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 210deg, rgb(70 224 210 / .95), rgb(159 219 255 / .75) 22%, rgb(255 255 255 / .08) 42%, rgb(255 199 102 / .85) 62%, rgb(70 224 210 / .1) 80%, rgb(70 224 210 / .95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: mpp-spin 26s linear infinite; }
.mpp-hero-bg::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(46% 30% at 34% 17%, rgb(255 255 255 / .17), transparent 72%), radial-gradient(closest-side, transparent 86%, rgb(159 219 255 / .12) 97%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14); }
@keyframes mpp-spin { to { transform: rotate(360deg); } }

.mpp-hero-r { position: relative; grid-column: 2; grid-row: 1; align-self: start; margin-top: calc(var(--orb) - 34px); z-index: 1; min-width: 0; }
/* two bubbles drifting up off the orb */
.mpp-hero-r::before, .mpp-hero-r::after { content: ""; position: absolute; z-index: -1; bottom: 100%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .9), rgb(159 219 255 / .35) 45%, rgb(70 224 210 / .08) 70%); box-shadow: inset 0 0 0 1px rgb(221 244 255 / .45), 0 0 12px rgb(70 224 210 / .45);
  animation: mpp-bubble 7s ease-in infinite; }
.mpp-hero-r::before { left: 18%; width: 12px; height: 12px; }
.mpp-hero-r::after { right: 22%; width: 7px; height: 7px; animation-duration: 5.5s; animation-delay: 2.4s; }
@keyframes mpp-bubble { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .9; } 70% { opacity: .7; } 100% { transform: translate(10px, calc(var(--orb) * -.8)) scale(1); opacity: 0; } }
.mpp-note3 { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 20px;
  background: linear-gradient(180deg, rgb(14 38 50 / .7), rgb(6 18 27 / .84)); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgb(70 224 210 / .28), inset 0 1px 0 rgb(221 244 255 / .08), 0 24px 50px -24px rgb(0 0 0 / .9), 0 0 44px -18px rgb(70 224 210 / .6); }
.mpp-note3-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 14px; color: #03251F;
  background: linear-gradient(180deg, #8FF3E8, var(--mpp-teal)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 0 22px -4px rgb(70 224 210 / .8); }
.mpp-note3-ic .i { width: 18px; height: 18px; stroke-width: 2.2; }
.mpp-note3 > div { display: grid; gap: 2px; min-width: 0; }
.mpp-note3 b { font-family: var(--ff-display); font-weight: 800; font-size: 16px; line-height: 21px; letter-spacing: .02em; color: #F2FAFC; }
.lang-en .mpp-note3 b { letter-spacing: 0; }
.mpp-note3 span { font-size: 12.5px; line-height: 18px; color: var(--mpp-dim); }

/* ═══ banners ═════════════════════════════════════════════════════════════════ */
.mpp-banners { display: grid; gap: 10px; margin-bottom: 20px; }
.mpp-banners:empty { display: none; }
.mpp-banner { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px 10px 10px; border-radius: 16px; font-size: 13px; line-height: 20px; color: #C9DCE4;
  background: linear-gradient(100deg, rgb(159 219 255 / .07), rgb(159 219 255 / .02)); box-shadow: inset 0 0 0 1px var(--mpp-line); }
.mpp-banner > .i { box-sizing: content-box; flex: none; width: 14px; height: 14px; padding: 7px; border-radius: 10px; color: var(--mpp-ice); background: rgb(159 219 255 / .1); }
.mpp-banner > span { flex: 1 1 260px; min-width: 0; }
.mpp-banner.is-warn { color: #FFE3B0; background: linear-gradient(100deg, rgb(245 165 36 / .14), rgb(245 165 36 / .03)); box-shadow: inset 0 0 0 1px rgb(255 199 102 / .32), 0 0 40px -24px rgb(245 165 36 / .8); }
.mpp-banner.is-warn > .i { color: #1B1002; background: linear-gradient(180deg, #FFDA8A, #F5A524); box-shadow: 0 0 16px -4px rgb(245 165 36 / .8); }

/* ═══ layout ══════════════════════════════════════════════════════════════════ */
.mpp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; grid-template-areas: "flow side" "rules side"; gap: 24px 28px; align-items: start; }
.mpp-flow { grid-area: flow; }
.mpp-side { grid-area: side; }
.mpp-rules { grid-area: rules; }

/* ═══ the 3-step card ═════════════════════════════════════════════════════════ */
.mpp .mpp-flow { padding: 0; overflow: clip; isolation: isolate; border-radius: 28px; border-color: rgb(159 219 255 / .16);
  background: linear-gradient(180deg, rgb(15 38 51 / .82), rgb(6 16 24 / .9));
  box-shadow: inset 0 1px 0 rgb(221 244 255 / .08), 0 40px 90px -50px rgb(0 0 0 / .95), 0 0 70px -40px rgb(70 224 210 / .45); }
.mpp .mpp-flow::after { content: ""; position: absolute; z-index: -1; width: 620px; aspect-ratio: 1; left: -260px; top: -380px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(70 224 210 / .1), transparent); }

/* stepper: three stations on one water pipe — done = full, now = filling (a droplet rides the front), todo = empty */
.mpp-flow-h { position: relative; padding: 22px 28px 0; background: linear-gradient(180deg, rgb(159 219 255 / .035), transparent); }
.mpp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0 0 22px; list-style: none; border-bottom: 1px solid rgb(159 219 255 / .08); }
.mpp-step { display: grid; gap: 16px; min-width: 0; }
.mpp-step-b { display: flex; align-items: center; gap: 12px; min-width: 0; margin: -6px 8px 0 -6px; padding: 6px 10px 6px 6px; border-radius: 16px; text-align: left; color: inherit; cursor: pointer;
  transition: background-color .25s; }
.mpp-step-b:disabled { cursor: default; }
.mpp-step-b:not(:disabled):hover { background: rgb(159 219 255 / .06); }
.mpp-step-b:not(:disabled):hover .mpp-step-t b { color: #fff; }
.mpp-step-b:focus-visible { outline: 2px solid var(--mpp-ice); outline-offset: 0; }
.mpp-step-n { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; font: 600 13px/1 "Geist Mono", var(--font-mono); color: var(--mpp-dim2);
  background: rgb(3 12 19 / .6); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .18); transition: color .4s, background .4s, box-shadow .4s; }
.mpp-step-n .i { width: 17px; height: 17px; stroke-width: 2.6; }
.mpp-step-t { display: grid; gap: 2px; min-width: 0; }
.mpp-step-t b { font-family: var(--ff-display); font-weight: 800; font-size: 17px; line-height: 22px; letter-spacing: .02em; color: var(--mpp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.lang-en .mpp-step-t b { letter-spacing: 0; }
.mpp-step-t small { font-size: 12px; line-height: 17px; color: var(--mpp-dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpp-step-line { position: relative; display: block; height: 8px; border-radius: 3px; background: rgb(3 12 19 / .75); box-shadow: inset 0 1px 2px rgb(0 0 0 / .65), inset 0 0 0 1px rgb(159 219 255 / .08); }
.mpp-step:first-child .mpp-step-line { border-radius: 8px 3px 3px 8px; }
.mpp-step:last-child .mpp-step-line { border-radius: 3px 8px 8px 3px; }
.mpp-step-line::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .75), transparent) no-repeat -100% 0 / 56px 100%, linear-gradient(90deg, #1A9FA4, var(--mpp-teal) 55%, #C8F7F2);
  box-shadow: 0 0 14px rgb(70 224 210 / .7), inset 0 1px 0 rgb(255 255 255 / .35); transition: width 1.2s var(--mpp-ease); }
.mpp-step-line::after { content: ""; position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 40% 35%, #fff, #9FF5EC 45%, var(--mpp-teal)); box-shadow: 0 0 0 4px rgb(70 224 210 / .16), 0 0 16px 2px rgb(70 224 210 / .9); transition: left 1.2s var(--mpp-ease), opacity .4s; }
.mpp-step[data-state="done"] .mpp-step-line::before { width: 100%; }
.mpp-step[data-state="now"] .mpp-step-line::before { width: 44%; border-radius: 8px 12px 12px 8px; animation: mpp-flowline 2.6s linear infinite; }
.mpp-step[data-state="now"] .mpp-step-line::after { left: 44%; opacity: 1; animation: mpp-drop 2.2s ease-in-out infinite; }
@keyframes mpp-flowline { from { background-position: -100% 0, 0 0; } to { background-position: 220% 0, 0 0; } }
@keyframes mpp-drop { 50% { box-shadow: 0 0 0 7px rgb(70 224 210 / .06), 0 0 22px 4px rgb(70 224 210 / .7); } }
.mpp-step[data-state="now"] .mpp-step-n { color: #03251F; background: radial-gradient(circle at 40% 30%, #E6FFFC, #7EEFE4 45%, var(--mpp-teal));
  box-shadow: 0 0 0 5px rgb(70 224 210 / .14), 0 0 28px -2px rgb(70 224 210 / .85), inset 0 1px 0 rgb(255 255 255 / .6); font-weight: 700; }
.mpp-step[data-state="now"] .mpp-step-n::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgb(70 224 210 / .6); animation: gl-halo 2.6s ease-out infinite; }
.mpp-step[data-state="now"] .mpp-step-t b { color: #F5FBFD; text-shadow: 0 0 16px rgb(70 224 210 / .4); }
.mpp-step[data-state="now"] .mpp-step-t small { color: #BFD3DC; }
.mpp-step[data-state="done"] .mpp-step-n { color: var(--mpp-teal); background: rgb(70 224 210 / .1); box-shadow: inset 0 0 0 1.5px rgb(70 224 210 / .55), 0 0 18px -6px rgb(70 224 210 / .7); }
.mpp-step[data-state="done"] .mpp-step-t b { color: #DDEFF6; }
.mpp-flow-b { position: relative; padding: 32px 32px 36px; min-height: 380px; }

/* step heading */
.mpp-qh { display: grid; gap: 10px; justify-items: start; margin-bottom: 26px; }
.mpp-q { margin: 0; outline: none; font-family: var(--ff-display); font-weight: 800; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.16; letter-spacing: .01em; color: #F2FAFC;
  background: linear-gradient(100deg, #FFFFFF 0%, #E6F7FF 50%, #A9E2FF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-block: .04em; }
.lang-en .mpp-q { letter-spacing: -.012em; }
.mpp-qp { margin: 0; max-width: 42em; font-size: 14.5px; line-height: 1.7; color: var(--mpp-dim); }

/* fields */
.mpp-form { display: grid; gap: 20px; }
.mpp-fld { min-width: 0; }
.mpp-fld .field-label { margin-bottom: 9px; font-size: 13px; line-height: 18px; font-weight: 550; color: #C9DCE4; }
.mpp .mpp-field { --h: 54px; gap: 12px; padding: 0 8px 0 16px; border-radius: 16px; }
.mpp .mpp-field > .i { width: 18px; height: 18px; }
.mpp-field input { font-size: 15px; color: #F2FAFC; }
.mpp-field.is-mono input { font-family: "Geist Mono", var(--font-mono); font-size: 14.5px; letter-spacing: -.005em; }
.mpp-field.is-mono input::placeholder { font-family: var(--font-sans); letter-spacing: 0; }
.mpp .mpp-field.is-err { animation: mpp-shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes mpp-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(4px); } }
.mpp .mpp-paste { --h: 38px; flex: none; padding: 0 12px; border-radius: 11px; gap: 6px; font-size: 13px; color: var(--mpp-ice); background: rgb(159 219 255 / .08); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .16); }
.mpp .mpp-paste:hover:not(:disabled) { color: #fff; background: rgb(159 219 255 / .14); }
.mpp-fld .field-err { margin-top: 9px; font-size: 12.5px; line-height: 18px; color: #FF9BA8; }
.mpp-fld .field-err .i { margin-top: 3px; }
.mpp-ferr { display: grid; gap: 2px; min-width: 0; }
.mpp-ferr .s { font-size: 12px; line-height: 18px; color: #D9B6BC; }
.mpp-ferr .s:empty { display: none; }
.mpp-hint { display: flex; align-items: flex-start; gap: 7px; margin: 9px 0 0; font-size: 12px; line-height: 18px; color: var(--mpp-dim2); }
.mpp-hint .i { flex: none; width: 12px; height: 12px; margin-top: 3px; }

/* "只填地址，就够了。" */
.mpp-call { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 14px 18px 14px 14px; border-radius: 18px;
  background: linear-gradient(105deg, rgb(70 224 210 / .1), rgb(70 224 210 / .02) 70%); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .24); }
.mpp-call-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; color: var(--mpp-teal); background: rgb(70 224 210 / .1); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .3), 0 0 18px -6px rgb(70 224 210 / .7); }
.mpp-call > div { display: grid; gap: 2px; min-width: 0; }
.mpp-call b { font-family: var(--ff-display); font-weight: 800; font-size: 16px; line-height: 22px; letter-spacing: .02em; color: #F2FAFC; }
.lang-en .mpp-call b { letter-spacing: 0; }
.mpp-call span { font-size: 13px; line-height: 20px; color: #AFC4CF; }

/* actions */
.mpp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 26px; }
.mpp-acts.is-center { justify-content: center; }
.mpp-acts:empty { display: none; }
.mpp .mpp-cta { --h: 56px; min-width: 220px; padding: 0 26px; gap: 10px; border-radius: 18px; font-family: var(--ff-display); font-weight: 800; font-size: 19px; letter-spacing: .05em; }
.lang-en .mpp .mpp-cta { font-size: 18px; letter-spacing: .005em; }
.mpp .mpp-cta.btn-ghost { font-family: var(--font-sans); font-weight: 650; font-size: 15px; letter-spacing: 0; }
.mpp .mpp-cta .i { width: 18px; height: 18px; }
.mpp .mpp-cta:not(:disabled):hover > .i:last-child:not(:first-child) { transform: translateX(3px); }
.mpp .mpp-cta > .i { transition: transform .3s var(--mpp-ease); }
.mpp .mpp-cta.btn-accent:disabled:not([aria-busy="true"]) { filter: none; opacity: 1; color: #6F8896; background: rgb(159 219 255 / .05); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .14); }
.mpp .btn[aria-busy="true"]:disabled { opacity: 1; cursor: progress; }
.mpp .btn-accent[aria-busy="true"]:disabled { filter: saturate(.8) brightness(.92); }
.mpp .btn-accent[aria-busy="true"]::after { animation: mpp-busy 1.5s ease-in-out infinite; }
@keyframes mpp-busy { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.mpp .btn-ghost[aria-busy="true"]:disabled { color: #DDEFF6; }
.mpp .mpp-alt { --h: 44px; font-size: 13.5px; }

/* errors */
.mpp .mpp-err.callout { margin-top: 20px; padding: 12px 16px 12px 12px; gap: 12px; align-items: flex-start; border-radius: 16px;
  background: linear-gradient(100deg, rgb(240 73 94 / .13), rgb(240 73 94 / .04)); border: 1px solid rgb(255 133 149 / .3); box-shadow: 0 0 44px -26px rgb(240 73 94 / .9); }
.mpp .mpp-err.callout > .i { box-sizing: content-box; flex: none; width: 14px; height: 14px; margin: 0; padding: 7px; border-radius: 10px; color: var(--mpp-red); background: rgb(240 73 94 / .15); }
.mpp-err > div { display: grid; gap: 3px; min-width: 0; padding-top: 4px; }
.mpp-err b { font-size: 14px; line-height: 20px; font-weight: 650; color: #FFD6DB; }
.mpp-err p { margin: 0; font-size: 12.5px; line-height: 19px; color: #D9B6BC; }
.mpp .mpp-retry { justify-self: start; gap: 6px; margin-top: 4px; font-size: 12.5px; color: #F2FAFC; }
.mpp-errcode { margin: -6px 0 0; text-align: center; font: 500 11.5px/18px var(--font-mono); letter-spacing: .02em; color: var(--mpp-dim2); }

/* avatars: letter in display type inside a teal ring */
.mpp .mpp-av { color: #EAF8FF; font-family: var(--ff-display); font-weight: 800; font-size: calc(var(--sz) * .46); text-transform: none;
  background: radial-gradient(circle at 35% 28%, #1E5D6E, #0C2230 74%); box-shadow: 0 0 0 2px #0A1C27, 0 0 0 3.5px rgb(70 224 210 / .7), 0 0 18px -2px rgb(70 224 210 / .55); }

/* step 1 · the code */
.mpp-prof { display: grid; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 18px; background: var(--mpp-well); box-shadow: inset 0 0 0 1px var(--mpp-line); }
.mpp-prof-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mpp-prof-who { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.mpp-prof-who b { font-size: 16px; line-height: 22px; font-weight: 650; color: #F2FAFC; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpp-prof-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; line-height: 18px; color: var(--mpp-dim); }
.mpp-prof-meta > span:first-child { margin-right: 4px; }
.mpp-prof-meta > span:not(:first-child) { padding: 1px 8px; border-radius: 999px; color: #C9DCE4; background: rgb(159 219 255 / .07); font-variant-numeric: tabular-nums; }
.mpp-prof-top > .iconbtn { width: 36px; height: 36px; border-radius: 11px; color: var(--mpp-ice); background: rgb(159 219 255 / .06); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .14); }
.mpp-warn { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mpp-warn li { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; line-height: 18px; color: #FFE3B0; background: rgb(245 165 36 / .08); box-shadow: inset 0 0 0 1px rgb(255 199 102 / .26); }
.mpp-warn .i { flex: none; margin-top: 3px; color: var(--mpp-amber); }

.mpp-code { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 14px; margin-top: 16px; padding: 20px 22px 22px; border-radius: 24px;
  background: radial-gradient(90% 130% at 50% -10%, rgb(245 165 36 / .17), transparent 62%), linear-gradient(180deg, rgb(22 40 50 / .85), rgb(6 16 24 / .9));
  box-shadow: inset 0 0 0 1px rgb(255 199 102 / .4), inset 0 1px 0 rgb(255 240 210 / .1), 0 0 0 5px rgb(245 165 36 / .05), 0 30px 70px -36px rgb(245 165 36 / .6); }
.mpp-code::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgb(255 231 188 / .1) 48%, transparent 60%);
  transform: translateX(-100%); animation: mpp-plate 7s ease-in-out 1.2s infinite; }
@keyframes mpp-plate { 0%, 68% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.mpp-code::after { content: ""; position: absolute; z-index: -1; left: 22px; right: 22px; top: 62px; border-top: 1px dashed rgb(255 199 102 / .18); pointer-events: none; }
.mpp-code-l { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 34px; }
.mpp-code-l > span:first-child { font: 500 11.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: #FFD591; }
:lang(zh-CN) .mpp-code-l > span:first-child { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: .08em; font-weight: 600; }
/* countdown: a live sweep ring around the clock */
.mpp-code-cd { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; height: 34px; padding: 0 14px 0 6px; border-radius: 999px; color: #D4E6EC;
  background: rgb(3 12 19 / .6); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .16); transition: box-shadow .4s; }
.mpp-code-cd > .i { box-sizing: content-box; flex: none; width: 12px; height: 12px; padding: 5px; border-radius: 50%; color: var(--mpp-teal); }
.mpp-code-cd::before, .mpp-code-cd::after { content: ""; position: absolute; left: 6px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; pointer-events: none; }
.mpp-code-cd::after { box-shadow: inset 0 0 0 2px rgb(159 219 255 / .12); }
.mpp-code-cd::before { background: conic-gradient(from 0deg, transparent 0 45%, rgb(70 224 210 / .95));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.8px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.8px));
  animation: mpp-spin 3s linear infinite; }
.mpp .mpp-cd { font: 600 13px/1 "Geist Mono", var(--font-mono); letter-spacing: .01em; }
.mpp .mpp-cd.is-soon { color: var(--mpp-amber); }
.mpp-code-cd:has(.is-soon) { box-shadow: inset 0 0 0 1px rgb(255 199 102 / .5), 0 0 22px -6px rgb(245 165 36 / .8); }
.mpp-code-cd:has(.is-soon) > .i { color: var(--mpp-amber); }
.mpp-code-cd:has(.is-soon)::before { background: conic-gradient(from 0deg, transparent 0 45%, #FFC766); animation-duration: 1.1s; }
.mpp-code-v { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; min-width: 0; }
.mpp .mpp-code-t { min-width: 0; font: 700 clamp(28px, 3.7vw, 50px)/1.12 "Geist Mono", var(--font-mono); letter-spacing: .08em; user-select: all; overflow-wrap: anywhere;
  background: linear-gradient(180deg, #FFFFFF 12%, #FFE7BC 55%, #F5A524 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFE3B0;
  filter: drop-shadow(0 0 22px rgb(245 165 36 / .35)); padding-block: .04em; }
.mpp .mpp-code-copy { --h: 44px; flex: none; padding: 0 16px; gap: 8px; border-radius: 14px; font-size: 14px; font-weight: 650; color: #FFE7BC;
  background: rgb(245 165 36 / .1); border: 1px solid rgb(255 199 102 / .42); box-shadow: none; }
.mpp .mpp-code-copy:hover:not(:disabled) { color: #fff; background: rgb(245 165 36 / .18); border-color: rgb(255 199 102 / .75); box-shadow: 0 0 26px -8px rgb(245 165 36 / .85); }
.mpp-step1c:has(.mpp-cta[aria-busy="true"]) .mpp-code::before { animation: mpp-plate-fast 1.4s ease-in-out infinite; }
@keyframes mpp-plate-fast { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.mpp-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 24px; padding: 0; list-style: none; }
.mpp-how li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 14px 16px 16px; border-radius: 16px; font-size: 13px; line-height: 20px; color: #BFD3DC;
  background: rgb(159 219 255 / .03); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .09); }
.mpp-how li + li::before { content: ""; position: absolute; left: -10px; top: 26px; width: 10px; height: 1px; background: linear-gradient(90deg, rgb(70 224 210 / .1), rgb(70 224 210 / .6)); }
.mpp-how .n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font: 700 12px/1 "Geist Mono", var(--font-mono); color: var(--mpp-teal);
  background: rgb(70 224 210 / .1); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .35); }
.mpp-bind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 18px; font-size: 12px; color: var(--mpp-dim2); }
.mpp-bind::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mpp-teal); box-shadow: 0 0 8px var(--mpp-teal); }
.mpp .mpp-bind-w { padding: 3px 8px; border-radius: 8px; font: 500 12px/1.3 "Geist Mono", var(--font-mono); color: #DDEFF6; background: rgb(159 219 255 / .06); }

/* expired / done states */
.mpp-state { display: grid; justify-items: center; gap: 12px; padding: 16px 0 4px; text-align: center; }
.mpp-state .mpp-q { font-size: clamp(26px, 2.6vw, 34px); }
.mpp-state p { margin: 0; max-width: 34em; font-size: 14.5px; line-height: 1.7; color: var(--mpp-dim); }
.mpp-state-ic { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; margin-bottom: 8px; }
.mpp-state-ic .i { width: 32px; height: 32px; stroke-width: 1.8; }
.mpp-state-ic::before, .mpp-state-ic::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; animation: mpp-ring 3.2s cubic-bezier(.2, .6, .3, 1) infinite; }
.mpp-state-ic::after { animation-delay: 1.6s; }
@keyframes mpp-ring { from { transform: scale(1); opacity: .6; } to { transform: scale(1.9); opacity: 0; } }
.mpp-state-ic.is-ok { color: var(--mpp-teal); background: radial-gradient(circle at 40% 32%, rgb(111 240 228 / .45), rgb(10 44 58 / .95) 70%);
  box-shadow: inset 0 0 0 1.5px rgb(70 224 210 / .6), 0 0 0 10px rgb(70 224 210 / .06), 0 0 60px -4px rgb(70 224 210 / .6); }
.mpp-state-ic.is-warn { color: var(--mpp-amber); background: radial-gradient(circle at 40% 32%, rgb(245 165 36 / .38), rgb(40 24 6 / .92) 72%);
  box-shadow: inset 0 0 0 1.5px rgb(255 199 102 / .55), 0 0 0 10px rgb(245 165 36 / .05), 0 0 60px -8px rgb(245 165 36 / .55); }
.mpp-done .mpp-sum { max-width: 480px; margin: 26px auto 0; }
.mpp-done .mpp-state .mpp-q { background-image: linear-gradient(100deg, #9FDBFF, #FFFFFF 48%, #FFE7BC); }

/* verified identity strip */
.mpp-me { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; padding: 10px 10px 10px 14px; border-radius: 18px; min-width: 0;
  background: linear-gradient(100deg, rgb(70 224 210 / .09), rgb(3 12 19 / .45) 60%); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .22); }
.mpp-me-who { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.mpp-me-who .t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mpp-me-who .t b { font-size: 14.5px; line-height: 20px; font-weight: 650; color: #F2FAFC; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpp-me-who .s { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; font-size: 12px; line-height: 18px; color: var(--mpp-dim); }
.mpp-me-who .s .num { font: 500 12px/18px "Geist Mono", var(--font-mono); color: #DDEFF6; }
.mpp-ok { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 22px; padding: 0 8px 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: #7FEDE2;
  background: rgb(70 224 210 / .1); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .35), 0 0 14px -4px rgb(70 224 210 / .6); }
.mpp-ok .i { width: 12px; height: 12px; }
.mpp .mpp-logout { flex: none; --h: 34px; padding: 0 12px; }

/* step 2 · coin picker */
.mpp-lbl { margin-bottom: 10px; font-size: 13px; line-height: 18px; font-weight: 550; color: #C9DCE4; }
.mpp-coins { display: flex; flex-wrap: wrap; gap: 10px; }
.mpp-coin { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px 0 9px; border-radius: 16px; font-size: 14px; color: #DDEFF6; cursor: pointer;
  background: linear-gradient(180deg, rgb(159 219 255 / .07), rgb(159 219 255 / .02)); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .18);
  transition: box-shadow .3s, background-color .2s, transform .25s var(--mpp-ease); }
.mpp-coin:hover { box-shadow: inset 0 0 0 1px rgb(159 219 255 / .4), 0 0 22px -10px rgb(70 224 210 / .6); transform: translateY(-1px); }
.mpp-coin:active { transform: translateY(0); }
.mpp-coin:focus-visible { outline: 2px solid var(--mpp-ice); outline-offset: 2px; }
.mpp-coin .cav { --sz: 30px; border-radius: 10px; font-family: var(--ff-display); font-weight: 800; }
.mpp-coin[aria-checked="true"] { color: #fff; background: linear-gradient(180deg, rgb(70 224 210 / .16), rgb(70 224 210 / .05));
  box-shadow: inset 0 0 0 1.5px rgb(70 224 210 / .75), 0 0 0 4px rgb(70 224 210 / .1), 0 0 28px -8px rgb(70 224 210 / .8); }
.mpp-coin[aria-checked="true"]::after { content: ""; position: absolute; right: -4px; top: -4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--mpp-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303251F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
  box-shadow: 0 0 0 2px #0A1C27, 0 0 10px rgb(70 224 210 / .8); }
.mpp-coin .mpp-tk { font: 700 15px/1 "Geist Mono", var(--font-mono); letter-spacing: -.01em; }
.mpp-coin-st { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #F3D29B; background: rgb(245 165 36 / .1); box-shadow: inset 0 0 0 1px rgb(255 199 102 / .25); }

/* "帖子里要写" copy plate */
.mpp-needs { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; margin-top: 16px; padding: 10px 10px 10px 16px; border-radius: 16px; min-width: 0;
  background: linear-gradient(100deg, rgb(245 165 36 / .09), rgb(3 12 19 / .5) 55%); box-shadow: inset 0 0 0 1px rgb(255 199 102 / .24); }
.mpp-needs-l { font-size: 12.5px; color: #C9A76C; white-space: nowrap; }
.mpp-needs-v { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mpp-needs-v code { padding: 7px 9px; border-radius: 9px; font: 600 13px/1 "Geist Mono", var(--font-mono); white-space: nowrap; background: rgb(3 12 19 / .55); color: #F2FAFC; box-shadow: inset 0 0 0 1px rgb(255 199 102 / .14); }
.mpp-needs-v .mpp-tk { flex: none; color: var(--mpp-amber); }
.mpp-needs-v .mpp-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: #E8D9BC; }
.mpp .mpp-needs .btn { --h: 36px; color: #FFE7BC; background: rgb(245 165 36 / .1); border-color: rgb(255 199 102 / .4); }
.mpp .mpp-needs .btn:hover:not(:disabled) { color: #fff; background: rgb(245 165 36 / .18); border-color: rgb(255 199 102 / .7); box-shadow: 0 0 22px -8px rgb(245 165 36 / .8); }
.mpp .mpp-applied, .mpp .mpp-existing, .mpp .mpp-paused { margin-top: 14px; padding: 11px 14px; gap: 10px; border-radius: 14px; font-size: 13px; line-height: 20px; color: #FFE3B0; align-items: flex-start; }
.mpp-applied .link, .mpp-existing .link { font-size: 13px; color: #fff; }
.mpp .mpp-res > .mpp-existing { margin: -4px 0 16px; }
.mpp .mpp-paused { margin: 0 0 22px; }
.mpp-req { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 18px 0 22px; padding: 14px 16px; list-style: none; border-radius: 16px;
  background: rgb(159 219 255 / .025); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .08); }
.mpp-req li { display: flex; align-items: flex-start; gap: 9px; min-width: 0; font-size: 12.5px; line-height: 19px; color: #BFD3DC; }
.mpp-req .i { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--mpp-teal); }
.mpp-checkbtn, .mpp-subbtn { display: contents; }

/* preview result */
.mpp-res-wrap:empty { display: none; }
.mpp-res { position: relative; margin-top: 24px; padding: 20px; border-radius: 22px; background: linear-gradient(180deg, rgb(3 12 19 / .6), rgb(3 12 19 / .38)); box-shadow: inset 0 0 0 1px var(--mpp-line);
  animation: mpp-rise .55s var(--mpp-ease) both; }
@keyframes mpp-rise { from { opacity: 0; transform: translateY(10px); } }
.mpp-res.is-ok { box-shadow: inset 0 0 0 1px rgb(70 224 210 / .38), 0 0 60px -34px rgb(70 224 210 / .9); }
.mpp-res.is-bad { box-shadow: inset 0 0 0 1px rgb(240 73 94 / .3), 0 0 60px -36px rgb(240 73 94 / .8); }
.mpp-res.is-load { display: flex; align-items: center; gap: 12px; padding: 16px 20px; overflow: hidden; font-size: 13.5px; color: #C9DCE4; box-shadow: inset 0 0 0 1px rgb(70 224 210 / .22); }
.mpp-res.is-load::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--mpp-teal), transparent) no-repeat; background-size: 40% 100%; animation: gl-run 1.4s linear infinite; }
.mpp-res.is-load .i { color: var(--mpp-teal); }
.mpp .mpp-res > .mpp-err.callout { margin: 0 0 16px; }
.mpp-res-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 18px; }
.mpp-verdict { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; font-size: 14.5px; font-weight: 650; }
.mpp-verdict .i { width: 18px; height: 18px; }
.mpp-verdict.is-ok { color: #7FEDE2; background: rgb(70 224 210 / .1); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .35), 0 0 22px -8px rgb(70 224 210 / .7); }
.mpp-verdict.is-bad { color: #FF9BA8; background: rgb(240 73 94 / .1); box-shadow: inset 0 0 0 1px rgb(240 73 94 / .32); }
/* 「预计 N 份」: the reward figure is the amber moment of step 2 */
.mpp-est { display: inline-flex; align-items: center; gap: 12px; padding: 6px 16px 6px 14px; border-radius: 16px; font-size: 12.5px; color: #E6C98F;
  background: radial-gradient(120% 140% at 100% 0%, rgb(245 165 36 / .2), rgb(245 165 36 / .04) 70%); box-shadow: inset 0 0 0 1px rgb(255 199 102 / .38), 0 0 34px -12px rgb(245 165 36 / .8); }
.mpp .mpp-est b { font-family: var(--ff-display); font-weight: 800; font-size: 32px; line-height: 1.1; letter-spacing: .01em;
  background: linear-gradient(180deg, #FFF6E6 10%, #FFD591 55%, #F5A524); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFD591;
  filter: drop-shadow(0 0 14px rgb(245 165 36 / .45)); padding-block: .04em; }
.mpp-res-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mpp-res-g > .mpp-post { position: sticky; top: calc(var(--topbar-h) + 20px); }
/* the post, as a quoted card */
.mpp-post { position: relative; display: grid; gap: 12px; padding: 16px 16px 14px 18px; border-radius: 18px; min-width: 0; overflow: hidden;
  background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .02)); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .16), inset 0 1px 0 rgb(255 255 255 / .06); }
.mpp-post::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--mpp-teal), var(--mpp-ice) 55%, #FFC766); box-shadow: 0 0 12px rgb(70 224 210 / .7); }
.mpp-post-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mpp-post-h .aav { --sz: 30px; color: #EAF8FF; font-family: var(--ff-display); font-weight: 800; font-size: 14px; text-transform: none; background: radial-gradient(circle at 35% 28%, #1E5D6E, #0C2230 74%); box-shadow: 0 0 0 1.5px rgb(159 219 255 / .35); }
.mpp-post-who { display: grid; min-width: 0; }
.mpp-post-who b { font-size: 13.5px; line-height: 19px; font-weight: 650; color: #F2FAFC; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpp-post-who span { font-size: 12px; line-height: 17px; color: var(--mpp-dim2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpp-post-t { margin: 0; font-size: 13.5px; line-height: 1.72; color: #E1EEF3; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.mpp-post-f { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding-top: 10px; border-top: 1px solid rgb(159 219 255 / .08); font-size: 12px; color: var(--mpp-dim); }
.mpp-cnt { display: inline-flex; align-items: center; gap: 5px; }
.mpp-cnt .num { font-size: 12px; color: #C9DCE4; }
.mpp-post-f .link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--mpp-ice); }
/* ✓ / ✗ checklist — failed checks float to the top */
.mpp-checks { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px; list-style: none; border-radius: 18px; background: rgb(3 12 19 / .42); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .08); }
.mpp-checks li { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 5px 10px 5px 6px; border-radius: 11px; font-size: 13px; line-height: 19px; color: #C9DCE4;
  animation: mpp-tick .45s var(--mpp-ease) both; }
.mpp-checks li:nth-child(2) { animation-delay: .03s; } .mpp-checks li:nth-child(3) { animation-delay: .06s; } .mpp-checks li:nth-child(4) { animation-delay: .09s; }
.mpp-checks li:nth-child(5) { animation-delay: .12s; } .mpp-checks li:nth-child(6) { animation-delay: .15s; } .mpp-checks li:nth-child(7) { animation-delay: .18s; }
.mpp-checks li:nth-child(8) { animation-delay: .21s; } .mpp-checks li:nth-child(9) { animation-delay: .24s; } .mpp-checks li:nth-child(10) { animation-delay: .27s; }
.mpp-checks li:nth-child(n+11) { animation-delay: .3s; }
@keyframes mpp-tick { from { opacity: 0; transform: translateX(-6px); } }
.mpp-checks li > .i { box-sizing: content-box; flex: none; width: 11px; height: 11px; padding: 4px; border-radius: 50%; stroke-width: 3; }
.mpp-checks li.is-ok > .i { color: var(--mpp-teal); background: rgb(70 224 210 / .13); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .3); }
.mpp-checks li.is-bad { order: -1; color: #FFD6DB; background: rgb(240 73 94 / .09); box-shadow: inset 0 0 0 1px rgb(240 73 94 / .22); }
.mpp-checks li.is-bad > .i { color: #fff; background: linear-gradient(180deg, #FF8A98, #E23C52); box-shadow: 0 0 10px -2px rgb(240 73 94 / .8); }
.mpp-checks .l { flex: 1 1 auto; min-width: 0; }
.mpp-checks .v { flex: none; font: 500 11.5px/1 "Geist Mono", var(--font-mono); color: var(--mpp-dim); }
.mpp-checks li.is-bad .v { color: #FF9BA8; }
.mpp-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; font-size: 12px; color: var(--mpp-dim); }
.mpp .mpp-flags .chip { height: 24px; font-family: var(--font-sans); font-size: 11.5px; color: #FFE3B0; background: rgb(245 165 36 / .08); border-color: rgb(255 199 102 / .28); }
.mpp-failhint { display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 0; font-size: 12.5px; line-height: 19px; color: var(--mpp-dim); }
.mpp-failhint .i { flex: none; margin-top: 3px; }
/* the "next" action docks to the bottom of the screen while the long checklist scrolls by (.is-dock = opt-in for other steps) */
.mpp-res > .mpp-acts, .mpp-acts.is-dock { position: sticky; z-index: 3; bottom: 14px; margin: 20px -10px -10px; padding: 10px; border-radius: 22px;
  background: rgb(6 18 27 / .72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgb(159 219 255 / .1), 0 -12px 34px -16px rgb(0 0 0 / .9); }
/* what the docked "next" bar is for: coin + 预计 N 份, pushed to the right (desktop / tablet only) */
.mpp-dock-s { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; padding-right: 10px; font-size: 12.5px; line-height: 18px; color: var(--mpp-dim); white-space: nowrap; }
.mpp-dock-s .cav { --sz: 22px; border-radius: 7px; font-family: var(--ff-display); font-weight: 800; }
.mpp-dock-s .mpp-dock-tk { font: 700 13px/1 "Geist Mono", var(--font-mono); color: #F2FAFC; }
.mpp-dock-s .dotsep { color: var(--mpp-dim2); }
.mpp .mpp-dock-s .mpp-dock-u { font-family: var(--ff-display); font-weight: 800; font-size: 20px; line-height: 1.1; letter-spacing: .02em; color: #FFD591; text-shadow: 0 0 14px rgb(245 165 36 / .45); }

/* step 3 */
.mpp .mpp-sum { border-radius: 18px; background: rgb(3 12 19 / .45); border-color: rgb(159 219 255 / .1); }
.mpp-sum .kv { min-height: 50px; font-size: 13.5px; }
.mpp-sum .kv > :first-child { color: var(--mpp-dim); }
.mpp-sum-coin { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.mpp-sum-coin .cav { border-radius: 7px; }
.mpp-sum-coin b { font: 700 14px/1 "Geist Mono", var(--font-mono); color: #F2FAFC; }
.mpp-sum-coin .fg3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpp-sum .link { font-family: "Geist Mono", var(--font-mono); color: var(--mpp-ice); }
.mpp .mpp-sum .kv b.num { font-family: var(--ff-display); font-weight: 800; font-size: 20px; letter-spacing: .02em; color: #FFD591; text-shadow: 0 0 14px rgb(245 165 36 / .45); }
.mpp-addr { position: relative; display: grid; gap: 12px; margin-top: 16px; padding: 18px 20px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(70% 140% at 0% 0%, rgb(70 224 210 / .14), transparent 70%), linear-gradient(180deg, rgb(12 34 45 / .8), rgb(4 14 21 / .8));
  box-shadow: inset 0 0 0 1px rgb(70 224 210 / .32), 0 0 0 4px rgb(70 224 210 / .04), 0 24px 60px -36px rgb(70 224 210 / .7); }
.mpp-addr-l { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #C9DCE4; }
.mpp-addr-l .i { color: var(--mpp-teal); }
.mpp-addr-v { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mpp-addr-v .addr { display: flex; flex-wrap: wrap; gap: 2px 9px; min-width: 0; font: 600 19px/28px "Geist Mono", var(--font-mono); color: #F2FAFC; letter-spacing: .02em; }
.mpp-addr-v .addr .g { white-space: nowrap; }
.mpp-addr-v .addr .hl { color: #8FF3E8; text-shadow: 0 0 14px rgb(70 224 210 / .6); }
.mpp-addr-v .iconbtn { flex: none; width: 36px; height: 36px; border-radius: 11px; color: var(--mpp-ice); background: rgb(159 219 255 / .07); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .16); }
.mpp-addr-n { margin: 0; font-size: 12px; line-height: 18px; color: var(--mpp-dim); }
.mpp-confirm { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 15px 16px; border-radius: 16px; cursor: pointer;
  background: rgb(159 219 255 / .03); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .14); transition: box-shadow .25s, background-color .25s; }
.mpp-confirm:hover { box-shadow: inset 0 0 0 1px rgb(159 219 255 / .32); }
.mpp-confirm input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; left: 16px; top: 15px; cursor: pointer; }
.mpp-confirm .box { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; color: transparent; background: rgb(3 12 19 / .6); box-shadow: inset 0 0 0 1.5px rgb(159 219 255 / .38);
  transition: background .2s, box-shadow .25s, transform .25s var(--mpp-ease); }
.mpp-confirm .box .i { width: 13px; height: 13px; stroke-width: 3.2; }
.mpp-confirm input:checked + .box { color: #03251F; background: linear-gradient(180deg, #8FF3E8, var(--mpp-teal)); box-shadow: 0 0 16px -2px rgb(70 224 210 / .85); transform: scale(1.06); }
.mpp-confirm input:focus-visible + .box { outline: 2px solid var(--mpp-ice); outline-offset: 2px; }
.mpp-confirm:has(input:checked) { background: rgb(70 224 210 / .06); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .42); }
.mpp-confirm .t { font-size: 13.5px; line-height: 22px; color: #DDEFF6; }
.mpp .mpp-back { --h: 56px; padding: 0 20px; border-radius: 18px; }
.mpp-fine { display: flex; align-items: flex-start; gap: 7px; margin: 18px 0 0; font-size: 12px; line-height: 18px; color: var(--mpp-dim2); }
.mpp-fine .i { flex: none; margin-top: 3px; }

/* loading · backend down */
.mpp-skel { display: grid; gap: 16px; }
.mpp-skel .skel + .skel { margin-top: 0; }
.mpp-skel .skel { border-radius: 10px; }
.mpp-skel > .skel:first-child { height: 30px !important; border-radius: 12px; }
.mpp-skel-f { display: grid; gap: 9px; }
.mpp-skel-f .skel:last-child { height: 54px !important; border-radius: 16px; }
.mpp-skel > .skel:last-child { height: 56px !important; border-radius: 18px; }
.mpp-boot-err { display: grid; gap: 14px; padding: 10px 0; }
.mpp-boot-err .empty .ic { color: #FFD6DB; background: radial-gradient(circle at 40% 35%, rgb(240 73 94 / .32), rgb(40 12 20 / .9) 70%); border-color: rgb(255 133 149 / .4); box-shadow: 0 0 30px rgb(240 73 94 / .25); }
.mpp-boot-err .empty .ic::after { border-color: rgb(255 133 149 / .4); }

/* ═══ right column: campaigns ═════════════════════════════════════════════════ */
.mpp-side { display: grid; gap: 14px; min-width: 0; align-content: start; }
.mpp-side-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; padding: 0 4px; }
.mpp .mpp-count { height: 24px; min-width: 24px; justify-content: center; padding: 0 8px; border-radius: 999px; font: 600 11.5px/1 "Geist Mono", var(--font-mono); color: #7FEDE2; background: rgb(70 224 210 / .1); border-color: rgb(70 224 210 / .32); }
.mpp-camps { display: grid; gap: 16px; }
.mpp-camp { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 14px; padding: 18px; border-radius: 24px; min-width: 0;
  background: radial-gradient(120% 60% at 100% 0%, rgb(70 224 210 / .11), transparent 62%), var(--mpp-glass);
  box-shadow: inset 0 0 0 1px var(--mpp-line), inset 0 1px 0 rgb(221 244 255 / .07), 0 30px 70px -44px rgb(0 0 0 / .95);
  transition: box-shadow .35s, transform .35s var(--mpp-ease); }
.mpp-camp::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgb(159 219 255 / .55), transparent); }
.mpp-camp:not(.is-msg):not(.is-skel):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--mpp-line2), inset 0 1px 0 rgb(221 244 255 / .08), 0 34px 70px -40px rgb(0 0 0 / .95), 0 0 44px -22px rgb(70 224 210 / .6); }
.mpp-camp.is-on { box-shadow: inset 0 0 0 1.5px rgb(70 224 210 / .6), 0 0 0 4px rgb(70 224 210 / .07), 0 0 56px -22px rgb(70 224 210 / .8), 0 30px 70px -44px rgb(0 0 0 / .95); }
.mpp-camp.is-on:hover { box-shadow: inset 0 0 0 1.5px rgb(70 224 210 / .75), 0 0 0 4px rgb(70 224 210 / .09), 0 0 60px -20px rgb(70 224 210 / .9), 0 34px 70px -40px rgb(0 0 0 / .95); }
.mpp-camp.is-msg { padding: 8px 16px 20px; }
.mpp-camp.is-msg .empty { padding-bottom: 6px; }
.mpp-camp.is-msg .errrow-block { padding: 26px 0; }
.mpp-camp-p { margin: 0; text-align: center; font-size: 13px; line-height: 21px; color: var(--mpp-dim); }
.mpp-camp.is-msg .mpp-acts { margin-top: 14px; }
.mpp-camp.is-skel { gap: 18px; }
.mpp-camp-h { display: flex; align-items: center; gap: 13px; min-width: 0; }
.mpp-camp-h .cav { --sz: 50px; border-radius: 16px; font-family: var(--ff-display); font-weight: 800; font-size: 24px; box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 12px 26px -12px rgb(0 0 0 / .9); }
.mpp-camp-h .cav::after { border-radius: inherit; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 0 0 1px rgb(255 255 255 / .08); }
.mpp-camp-n { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
.mpp-camp-n b { font-family: var(--ff-display); font-weight: 800; font-size: 21px; line-height: 1.12; letter-spacing: .01em; color: #F5FBFD; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpp-camp-n .num { font: 600 13px/1 "Geist Mono", var(--font-mono); letter-spacing: .02em; color: var(--mpp-amber); }
.mpp .mpp-live { flex: none; align-self: flex-start; height: 26px; gap: 6px; font-size: 12px; font-weight: 600; }
.mpp .mpp-live .dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--mpp-teal); box-shadow: 0 0 8px var(--mpp-teal); }
.mpp .mpp-live .dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--mpp-teal); animation: mpp-ring 2.4s ease-out infinite; }
/* contract copy plate */
.mpp-ca { display: flex; align-items: center; gap: 2px; min-width: 0; padding: 5px 5px 5px 14px; border-radius: 14px;
  background: linear-gradient(100deg, rgb(245 165 36 / .09), rgb(3 12 19 / .5) 62%); box-shadow: inset 0 0 0 1px rgb(255 199 102 / .22); }
.mpp-ca .k { margin-right: auto; font-size: 12px; color: #C9A76C; white-space: nowrap; }
.mpp-ca .v { margin-right: 6px; font: 500 13px/1 "Geist Mono", var(--font-mono); letter-spacing: .02em; color: #FFE7BC; white-space: nowrap; }
.mpp .mpp-ca .iconbtn { width: 32px; height: 32px; border-radius: 10px; color: #E8CB94; }
.mpp .mpp-ca .iconbtn:hover { color: #fff; background: rgb(245 165 36 / .14); }
/* reward tiles: 基础 · 最高 · 逐笔审核 · 链上发放, then the reservoir (可发放) and the clock */
.mpp-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.mpp-row { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; min-width: 0; padding: 11px 13px 12px; border-radius: 15px;
  background: rgb(3 12 19 / .42); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .08); }
.mpp-row .k { font-size: 11.5px; line-height: 16px; color: var(--mpp-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mpp-row .v { display: flex; align-items: center; max-width: 100%; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: #EAF6FA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mpp-row .v b { font-family: var(--ff-display); font-weight: 800; font-size: 24px; line-height: 1.1; letter-spacing: .01em; padding-block: .04em;
  background: linear-gradient(180deg, #FFFFFF 10%, #DDF4FF 50%, #9FDBFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #DDF4FF; }
.mpp-row:nth-child(2) .v b { background-image: linear-gradient(180deg, #FFF6E6 10%, #FFD591 55%, #F5A524); filter: drop-shadow(0 0 12px rgb(245 165 36 / .35)); }
.mpp-row:nth-child(3) .v, .mpp-row:nth-child(4) .v { align-items: flex-start; white-space: normal; }
.mpp-row:nth-child(3) .v::before, .mpp-row:nth-child(4) .v::before { content: ""; flex: none; width: 6px; height: 6px; margin: 7px 8px 0 0; border-radius: 50%; background: var(--mpp-teal); box-shadow: 0 0 8px var(--mpp-teal); }
.mpp-row[data-testid="pay-camp-held"] { position: relative; isolation: isolate; overflow: hidden; grid-column: 1 / -1; min-height: 94px; padding: 12px 14px 14px; justify-content: flex-start;
  background: linear-gradient(180deg, rgb(8 30 41 / .75), rgb(3 12 19 / .7)); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .24); }
.mpp-row[data-testid="pay-camp-held"]::before, .mpp-row[data-testid="pay-camp-held"]::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-repeat: repeat-x; }
.mpp-row[data-testid="pay-camp-held"] { --lvl: calc((.08 + var(--fill, .65) * .3) * 100%); }
.mpp-row[data-testid="pay-camp-held"]::before { background-image: var(--mpp-wave-b); background-size: 170px calc(var(--lvl) + 6%); background-position: -40px 100%; animation: mpp-held-b 10s linear infinite; }
.mpp-row[data-testid="pay-camp-held"]::after { background-image: var(--mpp-wave-l), var(--mpp-wave-f); background-size: 140px var(--lvl), 140px var(--lvl); background-position: 0 100%, 0 100%; opacity: .8; animation: mpp-held-f 6s linear infinite; }
@keyframes mpp-held-b { to { background-position: 130px 100%; } }
@keyframes mpp-held-f { to { background-position: -140px 100%, -140px 100%; } }
.mpp-row[data-testid="pay-camp-held"] .k { color: #A6DCD6; }
.mpp-row[data-testid="pay-camp-held"] .v .num { font-family: "Geist", var(--font-sans); font-weight: 700; font-size: 19px; line-height: 24px; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 10px rgb(0 0 0 / .7), 0 0 18px rgb(70 224 210 / .45); }
.mpp-row:has([data-mpp-until]) { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; min-height: 40px; padding: 8px 14px; background: transparent; box-shadow: inset 0 0 0 1px rgb(159 219 255 / .08); }
.mpp-row:has([data-mpp-until]) .v { font-size: 13px; font-weight: 600; color: #DDEFF6; }
.mpp-row:has([data-mpp-until]) .v .num { font-family: var(--font-sans); font-size: 13px; }
.mpp-camp-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mpp-camp-f > span:empty { display: none; }
.mpp-camp-f > .btn:last-child { margin-left: auto; }
.mpp-camp-f > span:empty + .mpp-camp-go { flex: 1 1 auto; }
.mpp .mpp-camp-go { --h: 44px; padding: 0 18px; gap: 8px; border-radius: 14px; font-family: var(--ff-display); font-weight: 800; font-size: 15px; letter-spacing: .04em; justify-content: center; }
.lang-en .mpp .mpp-camp-go { letter-spacing: .005em; }
/* amber stays with the flow's primary action: the campaign buttons are ice glass */
.mpp .mpp-camp-go.btn-accent { color: #EAFBFF; background: linear-gradient(180deg, rgb(70 224 210 / .2), rgb(70 224 210 / .07)); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .45), inset 0 1px 0 rgb(255 255 255 / .1); }
.mpp .mpp-camp-go.btn-accent::after { background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .22) 48%, transparent 62%); }
.mpp .mpp-camp-go.btn-accent:hover:not(:disabled) { color: #fff; background: linear-gradient(180deg, rgb(70 224 210 / .3), rgb(70 224 210 / .1)); filter: none; box-shadow: inset 0 0 0 1px rgb(70 224 210 / .75), 0 0 30px -8px rgb(70 224 210 / .8); }
.mpp .mpp-camp-go.btn-ghost { color: #7FEDE2; }
.mpp .mpp-camp-go .i { width: 16px; height: 16px; transition: transform .3s var(--mpp-ease); }
.mpp .mpp-camp-go:hover .i { transform: translateX(3px); }
.mpp-campnote { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 0; padding: 0 6px; font-size: 12px; line-height: 18px; color: var(--mpp-dim); }
.mpp-campnote .i { flex: none; margin-top: 2px; color: var(--mpp-amber); }
.mpp-trust { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px 12px 12px; border-radius: 16px; font-size: 13px; line-height: 20px; color: #DDEFF6;
  background: linear-gradient(100deg, rgb(70 224 210 / .08), rgb(70 224 210 / .02)); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .2); }
.mpp-trust-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; color: var(--mpp-teal); background: rgb(70 224 210 / .12); box-shadow: 0 0 16px -4px rgb(70 224 210 / .6); }

/* rules */
.mpp .mpp-rules { border-radius: 24px; }
.mpp .mpp-rules .panel-h { min-height: 54px; padding: 0 20px; }
.mpp .mpp-rules .panel-t { font-family: var(--ff-display); font-weight: 800; font-size: 17px; letter-spacing: .03em; }
.lang-en .mpp .mpp-rules .panel-t { letter-spacing: 0; }
.mpp .mpp-rules .panel-t .i { width: 16px; height: 16px; color: var(--mpp-teal); }
.mpp-rulelist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; margin: 0; padding: 14px 16px 18px; list-style: none; }
.mpp-rulelist li { display: flex; align-items: flex-start; gap: 11px; padding: 7px 6px; font-size: 13px; line-height: 20px; color: #C9DCE4; }
.mpp-rulelist .ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-top: -4px; border-radius: 9px; color: var(--mpp-teal); background: rgb(70 224 210 / .08); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .18); }
.mpp-rulelist .ic .i { width: 14px; height: 14px; }
.mpp-rulelist li:nth-child(6) .ic { color: var(--mpp-amber); background: rgb(245 165 36 / .08); box-shadow: inset 0 0 0 1px rgb(255 199 102 / .22); }

/* ═══ 我的申请 / 公开账目 ═════════════════════════════════════════════════════ */
.mpp-lists { margin-top: clamp(44px, 5.4vw, 72px); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.mpp-lists-h { border-bottom: 1px solid rgb(159 219 255 / .1); }
.mpp .mpp-lists-h .tabs { gap: 34px; height: 56px; }
.mpp .mpp-lists-h .tabs [role="tab"] { gap: 9px; font-family: var(--ff-display); font-weight: 800; font-size: 21px; letter-spacing: .03em; }
.lang-en .mpp .mpp-lists-h .tabs [role="tab"] { letter-spacing: 0; font-size: 20px; }
.mpp .mpp-lists-h .tabs .count { padding: 4px 7px; border-radius: 999px; font: 600 11px/1 "Geist Mono", var(--font-mono); color: #7FEDE2; background: rgb(70 224 210 / .1); }
.mpp .mpp-lists-h .tabs .count:empty { display: none; }
.mpp-tabp { padding-top: 22px; }
.mpp-tabp > .empty { border-radius: 24px; background: radial-gradient(60% 100% at 50% 0%, rgb(70 224 210 / .05), transparent 70%), rgb(159 219 255 / .015); border: 1px dashed rgb(159 219 255 / .16); }
.mpp .mpp-tabp > .mpp-err.callout { margin-top: 0; }
.mpp-apps { border-radius: 22px; overflow: hidden; background: var(--mpp-glass); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .12), 0 30px 70px -50px rgb(0 0 0 / .9); }
.mpp-app { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .6fr) minmax(0, 1.5fr); align-items: center; gap: 12px 20px; padding: 16px 22px; border-bottom: 1px solid rgb(159 219 255 / .07); font-size: 13px;
  transition: background-color .2s; }
.mpp-app:last-child { border-bottom: 0; }
.mpp-app:not(.is-head):not(.is-skel):hover { background: linear-gradient(90deg, rgb(159 219 255 / .05), transparent); }
.mpp-app.is-head { padding-block: 11px; font-size: 12px; color: var(--mpp-dim2); background: rgb(3 10 16 / .55); }
.mpp-app.is-skel { grid-template-columns: 32px minmax(0, 1fr) 80px 96px; }
.mpp-app-coin { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mpp-app-coin .cav { border-radius: 10px; font-family: var(--ff-display); font-weight: 800; }
.mpp-app-coin > div { display: grid; gap: 3px; min-width: 0; }
.mpp-app-coin b { font: 700 14px/19px "Geist Mono", var(--font-mono); color: #F2FAFC; }
.mpp-app-coin .fg3 { font-size: 12px; color: var(--mpp-dim2) !important; font-variant-numeric: tabular-nums; }
.mpp-app-post .link { font-family: "Geist Mono", var(--font-mono); font-size: 12.5px; color: var(--mpp-ice); }
.mpp-app-units .num { font-size: 13px; font-weight: 600; color: #FFD591; }
.mpp-app-units .num.is-none { color: var(--mpp-dim2); }
.mpp-app-st { display: grid; gap: 7px; justify-items: start; min-width: 0; }
.mpp-app-x { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; line-height: 18px; color: #C9DCE4; min-width: 0; }
.mpp-app-x .num { font-size: 12px; font-weight: 600; color: #F2FAFC; }
.mpp-app-x .link { font-size: 12px; color: var(--mpp-ice); }
.mpp-app-x.is-note { padding: 6px 10px; border-radius: 10px; color: #FFD6DB; background: rgb(240 73 94 / .07); overflow-wrap: anywhere; }

/* status pills — distinct but restrained: 审核中 sand · 已通过 ice · 发放中 teal · 已发放 mint · 未通过 rose */
.mpp .pill.mpp-st { height: 26px; gap: 7px; padding: 0 11px 0 9px; font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.mpp .pill.mpp-st .dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; }
.mpp .mpp-st[data-status="pending"] { color: #F1D39E; background: rgb(245 165 36 / .07); border-color: rgb(255 199 102 / .26); box-shadow: none; }
.mpp .mpp-st[data-status="pending"] .dot { background: #FFC766; box-shadow: 0 0 8px rgb(245 165 36 / .8); animation: mpp-blink 2s ease-in-out infinite; }
.mpp .mpp-st[data-status="approved"] { color: #BFE6FF; background: rgb(159 219 255 / .08); border-color: rgb(159 219 255 / .32); box-shadow: none; }
.mpp .mpp-st[data-status="approved"] .dot { background: #9FDBFF; box-shadow: 0 0 8px #9FDBFF; }
.mpp .mpp-st[data-status="processing"] { gap: 9px; color: #7FEDE2; background: rgb(70 224 210 / .08); border-color: rgb(70 224 210 / .34); box-shadow: none; }
.mpp .mpp-st[data-status="processing"] .dot { background: #46E0D2; box-shadow: 0 0 8px #46E0D2; }
.mpp .mpp-st[data-status="processing"] .dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid #46E0D2; animation: mpp-ring 1.8s ease-out infinite; }
.mpp .mpp-st[data-status="paid"] { color: #7CF0BE; background: rgb(34 196 127 / .1); border-color: rgb(52 214 143 / .36); box-shadow: 0 0 18px -8px rgb(52 214 143 / .7); }
.mpp .mpp-st[data-status="paid"] .dot { background: #5BE6A6; box-shadow: 0 0 8px #34D68F; }
.mpp .mpp-st[data-status="rejected"] { color: #FFA3AF; background: rgb(240 73 94 / .08); border-color: rgb(240 73 94 / .3); box-shadow: none; }
.mpp .mpp-st[data-status="rejected"] .dot { background: #FF8595; }
@keyframes mpp-blink { 50% { opacity: .35; } }

/* public ledger */
.mpp-led { display: grid; gap: 14px; }
.mpp-led > .mpp-banner { margin-bottom: 4px; }
.mpp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mpp-stat { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 10px; padding: 18px 20px 20px; border-radius: 20px; min-width: 0;
  background: var(--mpp-glass); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .12), inset 0 1px 0 rgb(221 244 255 / .06); }
.mpp-stat::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 30px; pointer-events: none; opacity: .22;
  background: var(--mpp-wave-l) repeat-x 0 100% / 180px 100%, var(--mpp-wave-f) repeat-x 0 100% / 180px 100%; }
.mpp-stat:first-child::after { opacity: .4; }
.mpp-stat:first-child { box-shadow: inset 0 0 0 1px rgb(70 224 210 / .26), inset 0 1px 0 rgb(221 244 255 / .06), 0 0 40px -24px rgb(70 224 210 / .7); }
.mpp-stat .l { font-size: 12.5px; color: var(--mpp-dim); }
.mpp-stat .v { font: 700 clamp(26px, 2.6vw, 36px)/1.05 "Geist", var(--font-sans); letter-spacing: -.035em; color: #F2FAFC; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: linear-gradient(180deg, #fff 10%, #DDF4FF 45%, #9FDBFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-block: .04em; }
.mpp-stat .v .u { margin-left: 6px; -webkit-text-fill-color: #8FA7B5; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.mpp-h3 { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; font-family: var(--ff-display); font-weight: 800; font-size: 17px; line-height: 22px; letter-spacing: .03em; color: #DDEFF6; }
.lang-en .mpp-h3 { letter-spacing: 0; }
.mpp-h3::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--mpp-teal)); box-shadow: 0 0 8px rgb(70 224 210 / .7); }
.mpp-ctab, .mpp-pays { border-radius: 20px; overflow: hidden; background: var(--mpp-glass); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .12); }
.mpp-crow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .6fr) minmax(0, 1.1fr); align-items: center; gap: 10px 16px; min-height: 56px; padding: 8px 20px;
  border-bottom: 1px solid rgb(159 219 255 / .07); font-size: 13px; color: #DDEFF6; transition: background-color .2s; }
.mpp-crow:last-child { border-bottom: 0; }
.mpp-crow:not(.is-head):hover { background: linear-gradient(90deg, rgb(159 219 255 / .05), transparent); }
.mpp-crow.is-head { min-height: 42px; font-size: 12px; color: var(--mpp-dim2); background: rgb(3 10 16 / .55); }
.mpp-crow .c { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mpp-crow .c .cav { border-radius: 8px; font-family: var(--ff-display); font-weight: 800; }
.mpp-crow .c b { font: 700 13.5px/1 "Geist Mono", var(--font-mono); color: #F2FAFC; }
.mpp-crow .num { font-size: 12.5px; }
.mpp .mpp-cst { height: 22px; padding: 0 8px; font-size: 11px; font-weight: 600; }
.mpp .mpp-cst:not(.st-up) { color: var(--mpp-dim); }
.mpp-pay { display: grid; grid-template-columns: 116px 92px minmax(0, 1.4fr) minmax(0, 1fr) 150px; align-items: center; gap: 8px 16px; min-height: 54px; padding: 8px 20px;
  border-bottom: 1px solid rgb(159 219 255 / .07); font-size: 13px; transition: background-color .2s; }
.mpp-pay:last-child { border-bottom: 0; }
.mpp-pay:hover { background: linear-gradient(90deg, rgb(159 219 255 / .05), transparent); }
.mpp-pay-t { font-size: 12px; color: var(--mpp-dim); }
.mpp-pay-c b { font: 700 13px/1 "Geist Mono", var(--font-mono); color: var(--mpp-amber); }
.mpp-pay-u { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mpp-pay-u .link { min-width: 0; overflow: hidden; color: var(--mpp-ice); }
.mpp-pay-u .link span { overflow: hidden; text-overflow: ellipsis; }
.mpp-pay-u .num { font-size: 11.5px; }
.mpp-pay-a { font-size: 13px; font-weight: 600; color: #7CF0BE; }
.mpp-pay-x { text-align: right; }
.mpp-pay-x .link { font: 500 12px/1 "Geist Mono", var(--font-mono); color: var(--mpp-ice); }
.mpp .mpp-more { justify-self: center; --h: 40px; padding: 0 18px; margin-top: 6px; border-radius: 999px; }
.mpp-led > .empty { border-radius: 20px; background: rgb(159 219 255 / .015); border: 1px dashed rgb(159 219 255 / .16); }
.mpp-led > .mpp-fine { justify-content: center; }
.mpp-led > .mpp-fine .i { color: var(--mpp-teal); }
.mpp-led > .skel-gap .skel { height: 54px; border-radius: 14px; }
.mpp-led .mpp-stat .skel { border-radius: 8px; }

/* amounts that mix digits with 万 / 笔 / 份 read better in Geist than in the mono face */
.mpp-crow > .num, .mpp-pay-a, .mpp-app-units .num, .mpp-app-x .num, .mpp-row .v .num { font-family: "Geist", var(--font-sans); }

/* ═══ hooks for artifacts/redesign/pay-markup-plan.md (inert until page-pay.js renders them) ════════════════ */
/* §1 hero figures under the lede */
.mpp-hero-stats { display: flex; flex-wrap: wrap; margin-top: 10px; padding-top: 18px; border-top: 1px solid rgb(159 219 255 / .1); }
.mpp-hs { display: grid; gap: 6px; min-width: 0; padding-right: 28px; margin-right: 28px; box-shadow: 1px 0 0 rgb(159 219 255 / .09); }
.mpp-hs:last-child { padding-right: 0; margin-right: 0; box-shadow: none; }
.mpp-hs b { font: 700 clamp(26px, 2.4vw, 34px)/1 "Geist", var(--font-sans); letter-spacing: -.035em; font-variant-numeric: tabular-nums; padding-block: .04em;
  background: linear-gradient(180deg, #fff 10%, #DDF4FF 45%, #9FDBFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mpp-hs b.is-warm { background-image: linear-gradient(180deg, #FFF6E6 10%, #FFD591 55%, #F5A524); }
.mpp-hs b .u { margin-left: 4px; font-size: .42em; font-weight: 600; letter-spacing: 0; -webkit-text-fill-color: #8FA7B5; }
.mpp-hs span { font-size: 12.5px; line-height: 17px; color: var(--mpp-dim); }
/* §1 figure inside the orb */
.mpp-orb-in { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; }
.mpp-orb-in b { font: 700 calc(var(--orb) * .2)/1 "Geist", var(--font-sans); letter-spacing: -.04em; color: #fff; text-shadow: 0 2px 16px rgb(0 0 0 / .6), 0 0 24px rgb(70 224 210 / .5); font-variant-numeric: tabular-nums; }
.mpp-orb-in span { font-size: 12px; letter-spacing: .08em; color: #D4E6EC; text-shadow: 0 1px 8px rgb(0 0 0 / .7); }
/* §2 real countdown ring: svg.mpp-ring > circle.trk + circle.arc (pathLength 100), --left (0..1) set on .mpp-code every tick */
.mpp-code-cd:has(.mpp-ring)::before, .mpp-code-cd:has(.mpp-ring)::after { display: none; }
.mpp-ring { flex: none; width: 22px; height: 22px; transform: rotate(-90deg); overflow: visible; }
.mpp-ring circle { fill: none; stroke-width: 2.4; }
.mpp-ring .trk { stroke: rgb(159 219 255 / .14); }
.mpp-ring .arc { stroke: var(--mpp-teal); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--left, 1) * 100); transition: stroke-dashoffset 1s linear, stroke .3s;
  filter: drop-shadow(0 0 3px rgb(70 224 210 / .8)); }
.mpp-code-cd:has(.is-soon) .mpp-ring .arc { stroke: var(--mpp-amber); filter: drop-shadow(0 0 3px rgb(245 165 36 / .8)); }
/* §3 the water rises inside the current step: data-fill="1" once the step's check passed (code issued · post checked OK · box ticked) */
.mpp-step[data-state="now"][data-fill="1"] .mpp-step-line::before { width: 82%; }
.mpp-step[data-state="now"][data-fill="1"] .mpp-step-line::after { left: 82%; }
/* §4 ended campaign */
.mpp-camp.is-ended { background: var(--mpp-glass); }
.mpp-camp.is-ended .cav { filter: saturate(.35) brightness(.8); }
.mpp .mpp-camp.is-ended .mpp-live { color: #9FB2BD; background: rgb(159 219 255 / .05); border-color: rgb(159 219 255 / .16); }
.mpp .mpp-camp.is-ended .mpp-live .dot { background: #6F8896; box-shadow: none; }
.mpp .mpp-camp.is-ended .mpp-live .dot::after { display: none; }
.mpp-camp.is-ended .mpp-row[data-testid="pay-camp-held"]::before, .mpp-camp.is-ended .mpp-row[data-testid="pay-camp-held"]::after { animation: none; filter: grayscale(1); opacity: .35; }
/* §6 progress rail in 我的申请: ol.mpp-tl > li×4 (.is-on reached · .is-bad rejected here), data-status on the ol */
.mpp-tl { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.mpp-tl li { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgb(159 219 255 / .16); }
.mpp-tl li + li { margin-left: 16px; }
.mpp-tl li + li::before { content: ""; position: absolute; right: calc(100% + 2px); top: 3px; width: 12px; height: 2px; border-radius: 2px; background: rgb(159 219 255 / .12); }
.mpp-tl li.is-on { background: var(--mpp-teal); box-shadow: 0 0 8px rgb(70 224 210 / .8); }
.mpp-tl li.is-on::before { background: rgb(70 224 210 / .6); }
.mpp-tl[data-status="paid"] li.is-on { background: var(--mpp-mint); box-shadow: 0 0 8px rgb(52 214 143 / .8); }
.mpp-tl[data-status="paid"] li.is-on::before { background: rgb(52 214 143 / .6); }
.mpp-tl li.is-bad { background: var(--mpp-red); box-shadow: 0 0 8px rgb(240 73 94 / .7); }
/* §5 passed checks folded behind a summary: details.mpp-okfold > summary + ul.mpp-checks */
.mpp-okfold > summary { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 12px; cursor: pointer; list-style: none; font-size: 13px; color: #7FEDE2;
  background: rgb(70 224 210 / .06); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .18); }
.mpp-okfold > summary::-webkit-details-marker { display: none; }
.mpp-okfold > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translateY(-2px); transition: transform .25s; }
.mpp-okfold[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.mpp-okfold > .mpp-checks { margin-top: 8px; }
.mpp-checkset { display: grid; gap: 8px; min-width: 0; align-content: start; }
.mpp-okfold > summary:hover { background: rgb(70 224 210 / .1); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .32); }
.mpp-okfold > summary:focus-visible { outline: 2px solid var(--mpp-ice); outline-offset: 2px; }
.mpp-okfold > summary .i { flex: none; }
.mpp-okfold > summary span { font-weight: 600; font-variant-numeric: tabular-nums; }
/* a pass-only list: the summary is the whole column, so give it the weight of a result */
.mpp-res.is-ok .mpp-checkset > .mpp-okfold:only-child > summary { min-height: 48px; padding: 0 16px; border-radius: 16px; font-size: 14px;
  background: linear-gradient(100deg, rgb(70 224 210 / .12), rgb(70 224 210 / .03)); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .3), 0 0 30px -16px rgb(70 224 210 / .8); }
.mpp-res.is-ok .mpp-checkset > .mpp-okfold:only-child > summary .i { width: 16px; height: 16px; }

/* why N 份: the tier ladder under a passing checklist (highest rung first, this post's rung lit in amber) */
.mpp-tiers { padding: 14px 12px 12px; border-radius: 18px; background: rgb(3 12 19 / .42); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .08); }
.mpp-tiers-h { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 13px; line-height: 18px; font-weight: 600; color: #C9DCE4; }
.mpp-tiers-h .i { flex: none; color: var(--mpp-amber); }
.mpp-ladder { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.mpp-ladder li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; padding: 5px 10px 5px 8px; border-radius: 12px;
  font-size: 12.5px; line-height: 18px; color: var(--mpp-dim); }
.mpp-ladder li + li::before { content: ""; position: absolute; left: 34px; top: -4px; width: 1px; height: 4px; background: rgb(159 219 255 / .14); }
.mpp-ladder .u { display: inline-flex; align-items: baseline; gap: 3px; }
.mpp-ladder .u b { font-family: var(--ff-display); font-weight: 800; font-size: 20px; line-height: 1.1; color: #8FA7B5; padding-block: .04em; }
.mpp-ladder .u small { font-size: 11px; color: var(--mpp-dim2); }
.mpp-ladder .c { min-width: 0; overflow-wrap: anywhere; }
.mpp-ladder li.is-here { color: #F2FAFC; background: radial-gradient(120% 160% at 0% 50%, rgb(245 165 36 / .16), rgb(245 165 36 / .03) 70%);
  box-shadow: inset 0 0 0 1px rgb(255 199 102 / .4), 0 0 26px -12px rgb(245 165 36 / .8); }
.mpp-ladder li.is-here .u b { background: linear-gradient(180deg, #FFF6E6 10%, #FFD591 55%, #F5A524); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFD591;
  filter: drop-shadow(0 0 10px rgb(245 165 36 / .45)); }
.mpp-ladder li.is-here .u small { color: #E6C98F; }
.mpp-ladder .here { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: 999px; font-size: 11px; font-weight: 650; white-space: nowrap;
  color: #7FEDE2; background: rgb(70 224 210 / .1); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .35); }
.mpp-ladder .here .i { width: 11px; height: 11px; stroke-width: 3; }
.mpp-tiers-f { margin: 10px 4px 0; font-size: 11.5px; line-height: 17px; color: var(--mpp-dim2); font-variant-numeric: tabular-nums; }

/* campaign states beyond 进行中 / 已结束: 名额已满 (full) · 暂停接收 (paused) */
.mpp .mpp-live.is-full { color: #D4E6EC; background: rgb(159 219 255 / .07); border-color: rgb(159 219 255 / .26); }
.mpp .mpp-live.is-full .dot { background: var(--mpp-ice); box-shadow: 0 0 6px rgb(159 219 255 / .6); }
.mpp .mpp-live.is-paused { color: #FFE3B0; background: rgb(245 165 36 / .08); border-color: rgb(255 199 102 / .32); }
.mpp .mpp-live.is-paused .dot { background: var(--mpp-amber); box-shadow: 0 0 6px rgb(245 165 36 / .7); }
.mpp .mpp-live.is-full .dot::after, .mpp .mpp-live.is-paused .dot::after, .mpp .mpp-live.is-ended .dot::after { display: none; }
.mpp-camp.is-full, .mpp-camp.is-paused { background: var(--mpp-glass); }
.mpp-camp.is-full .mpp-row[data-testid="pay-camp-held"]::before, .mpp-camp.is-full .mpp-row[data-testid="pay-camp-held"]::after,
.mpp-camp.is-paused .mpp-row[data-testid="pay-camp-held"]::before, .mpp-camp.is-paused .mpp-row[data-testid="pay-camp-held"]::after { animation-duration: 24s; }
.mpp .mpp-camp-go.is-closed, .mpp .mpp-camp-go.is-closed:disabled { opacity: 1; cursor: default; font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; letter-spacing: 0;
  color: #9FB2BD; background: rgb(159 219 255 / .03); border: 1px dashed rgb(159 219 255 / .2); box-shadow: none; }
.mpp .mpp-camp-go.is-closed[data-state="paused"] { color: #E6C98F; border-color: rgb(255 199 102 / .3); }
.mpp .mpp-camp-go.is-closed:hover .i { transform: none; }
.mpp .mpp-cst.is-full { color: #C9DCE4; }
/* coin chips: a closed coin reads quieter, its tag says why */
.mpp-coin[data-state="full"]:not([aria-checked="true"]), .mpp-coin[data-state="paused"]:not([aria-checked="true"]) { color: #9FB2BD; }
.mpp-coin[data-state="full"] .cav, .mpp-coin[data-state="paused"] .cav { filter: saturate(.5); }
.mpp-coin-st.is-full { color: #C9DCE4; background: rgb(159 219 255 / .08); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .24); }
.mpp-coin-st.is-paused { color: #F3D29B; }
.mpp .mpp-closed { margin-top: 14px; padding: 11px 14px; gap: 10px; border-radius: 14px; font-size: 13px; line-height: 20px; align-items: flex-start;
  color: #DDEFF6; background: linear-gradient(100deg, rgb(159 219 255 / .08), rgb(159 219 255 / .02)); border: 1px solid rgb(159 219 255 / .22); }
.mpp .mpp-closed > .i { flex: none; margin-top: 3px; color: var(--mpp-ice); }
.mpp .mpp-closed.is-paused { color: #FFE3B0; background: linear-gradient(100deg, rgb(245 165 36 / .1), rgb(245 165 36 / .02)); border-color: rgb(255 199 102 / .3); }
.mpp .mpp-closed.is-paused > .i { color: var(--mpp-amber); }
.mpp-closed .link { font-size: 13px; font-weight: 600; color: #fff; }

/* 我的申请: rail + pill on one line */
.mpp-app-sl { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.mpp-tl li[title] { cursor: help; }
.mpp-tl[data-status="processing"] li.is-on:nth-child(3) { animation: mpp-blink 2s ease-in-out infinite; }

/* done: the public-record link under the actions */
.mpp .mpp-done-f { justify-content: center; margin-top: 16px; }
.mpp-done-f .i { color: var(--mpp-teal); }
.mpp-done-f .link { font-size: 12.5px; color: var(--mpp-ice); }
.mpp-done-f .link:hover { color: #fff; }

/* ═══ responsive ═════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .mpp-hero { --orb: 236px; grid-template-columns: minmax(0, 1fr) 320px; }
  .mpp-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
  .mpp-rulelist { grid-template-columns: minmax(0, 1fr); }
  .mpp-res-g { grid-template-columns: minmax(0, 1fr); }
  .mpp-res-g > .mpp-post { position: relative; top: auto; }
  .mpp-req { grid-template-columns: minmax(0, 1fr); }
  .mpp-how { grid-template-columns: minmax(0, 1fr); }
  .mpp-how li { flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; }
  .mpp-how li + li::before { left: 26px; top: -10px; width: 1px; height: 10px; background: linear-gradient(180deg, rgb(70 224 210 / .1), rgb(70 224 210 / .6)); }
  .mpp-flow-b { padding: 28px 26px 32px; }
}
@media (max-width: 980px) {
  .mpp-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "flow" "side" "rules"; }
  .mpp-camps { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .mpp-rulelist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mpp-pay { grid-template-columns: 100px 80px minmax(0, 1.3fr) minmax(0, 1fr) 124px; }
}
@media (max-width: 760px) {
  .mpp { overflow-x: clip; padding-bottom: 24px; }
  .mpp-hero { --orb: 176px; grid-template-columns: minmax(0, 1fr); padding: 28px 0 32px; }
  .mpp-hero-bg { position: absolute; grid-area: auto; right: -62px; top: 8px; opacity: .6; }
  .mpp-hero-r::before, .mpp-hero-r::after { display: none; }
  .mpp-hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; max-width: 440px; }
  .mpp-hs { padding-right: 16px; margin-right: 16px; align-content: start; }
  .mpp-hs span { text-wrap: balance; }
  .mpp-orb-in { display: none; }
  .mpp-hero-l { grid-row: auto; gap: 14px; }
  .mpp-hero-r { grid-column: 1; grid-row: auto; margin-top: 22px; }
  /* the en kicker needs two lines on a phone: tighter tracking, balanced lines */
  .mpp-hero-l > .kicker { max-width: 100%; text-wrap: balance; }
  .lang-en .mpp-hero-l > .kicker { font-size: 11px; letter-spacing: .11em; }
  .mpp .mpp-h1.display { font-size: clamp(46px, 13.6vw, 60px); }
  .lang-en .mpp .mpp-h1.display { font-size: clamp(38px, 10.6vw, 48px); }
  .mpp .mpp-lede { font-size: 15px; line-height: 1.68; }
  .mpp-note3 { padding: 12px 14px 12px 12px; }
  .mpp-note3 b { font-size: 15px; }
  .mpp-banner { padding: 10px 12px 10px 10px; font-size: 12.5px; }
  .mpp .mpp-flow { border-radius: 24px; }
  .mpp-flow-h { padding: 16px 14px 0; }
  .mpp-steps { gap: 3px; padding-bottom: 16px; }
  .mpp-step { gap: 12px; }
  .mpp-step-b { flex-direction: column; align-items: flex-start; gap: 8px; margin: -4px 4px 0 -4px; padding: 4px; }
  .mpp-step-n { width: 32px; height: 32px; font-size: 11.5px; }
  .mpp-step-n .i { width: 15px; height: 15px; }
  .mpp-step-t b { font-size: 14.5px; line-height: 19px; white-space: normal; }
  .mpp-step-t small { display: none; }
  .mpp-step-line { height: 6px; }
  .mpp-step-line::after { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
  .mpp-flow-b { padding: 24px 16px 26px; min-height: 0; }
  .mpp-qh { margin-bottom: 20px; }
  .mpp-qp { font-size: 13.5px; line-height: 1.65; }
  .mpp-field input, .mpp-field.is-mono input { font-size: 16px; } /* no iOS zoom */
  .mpp .mpp-field { --h: 52px; padding-left: 14px; }
  .mpp .mpp-paste { padding: 0 10px; }
  .mpp-call { margin-top: 20px; }
  .mpp-acts { margin-top: 22px; }
  .mpp-acts > .btn, .mpp-acts > .mpp-checkbtn > .btn, .mpp-acts > .mpp-subbtn > .btn { flex: 1 1 100%; min-width: 0; }
  .mpp-acts > .mpp-alt { order: 2; }
  .mpp .mpp-cta { font-size: 18px; min-width: 0; }
  /* step 3: back + submit share one row */
  .mpp-step3 .mpp-acts { flex-wrap: nowrap; }
  .mpp-step3 .mpp-acts > .mpp-back { flex: 0 0 auto; order: 0; padding: 0 16px; }
  .mpp-step3 .mpp-acts > .mpp-subbtn > .btn { flex: 1 1 auto; }
  .mpp-code { padding: 16px 16px 18px; border-radius: 20px; }
  .mpp-code::after { left: 16px; right: 16px; top: 57px; }
  .mpp .mpp-code-t { font-size: clamp(22px, 6.9vw, 34px); letter-spacing: .06em; }
  .mpp-code-v { gap: 12px; }
  .mpp .mpp-code-copy { width: 100%; justify-content: center; }
  .mpp-how { margin: 14px 0 20px; }
  .mpp-me { flex-wrap: nowrap; padding: 10px 8px 10px 12px; }
  .mpp .mpp-logout { width: 36px; padding: 0; justify-content: center; }
  .mpp .mpp-logout > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mpp-res > .mpp-acts, .mpp-acts.is-dock { bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px); margin: 18px -6px -6px; padding: 8px; border-radius: 20px; }
  .mpp-dock-s { display: none; }
  .mpp-coins { gap: 8px; }
  .mpp-coin { height: 46px; padding: 0 14px 0 8px; }
  .mpp-needs { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 10px; }
  .mpp .mpp-needs .btn { width: 100%; justify-content: center; }
  .mpp-req { padding: 12px 14px; }
  .mpp-res { padding: 14px; border-radius: 20px; }
  .mpp-ladder li { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; }
  .mpp-ladder li + li::before { left: 28px; }
  .mpp-ladder .here { width: 22px; padding: 0; justify-content: center; }
  .mpp-ladder .here > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mpp-res-h { margin-bottom: 14px; }
  .mpp-est { flex: 1 1 auto; justify-content: space-between; }
  .mpp-addr { padding: 16px 14px; }
  .mpp-addr-v .addr { font-size: 16px; line-height: 25px; gap: 2px 7px; }
  /* the copy button moves up to the label row, so the address gets the full width (two lines, not three) */
  .mpp-addr-v .iconbtn { position: absolute; top: 10px; right: 10px; }
  .mpp-addr-l { min-height: 36px; padding-right: 44px; margin-block: -8px -4px; }
  .mpp-camps { grid-template-columns: minmax(0, 1fr); }
  .mpp-camp { padding: 16px; border-radius: 22px; }
  .mpp-rulelist { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 14px; }
  .mpp .mpp-lists-h .tabs { gap: 24px; height: 52px; }
  .mpp .mpp-lists-h .tabs [role="tab"] { font-size: 18px; }
  .lang-en .mpp .mpp-lists-h .tabs [role="tab"] { font-size: 16.5px; }
  .mpp-tabp { padding-top: 18px; }
  .mpp-apps { border-radius: 20px; }
  .mpp-app { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "coin units" "post post" "st st"; gap: 10px 12px; padding: 16px; }
  .mpp-app.is-head { display: none; }
  .mpp-app.is-skel { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: none; }
  .mpp-app-coin { grid-area: coin; }
  .mpp-app-units { grid-area: units; text-align: right; }
  .mpp-app-post { grid-area: post; }
  .mpp-app-st { grid-area: st; }
  .mpp-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .mpp-stats .mpp-stat:first-child { grid-column: 1 / -1; }
  .mpp-stat { padding: 16px; }
  .mpp-crow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 14px 16px; gap: 10px 12px; }
  .mpp-crow.is-head { display: none; }
  .mpp-crow .c { grid-column: 1 / -1; }
  .mpp-crow > .num { display: flex; flex-direction: column; gap: 3px; }
  .mpp-crow > .num::before { content: attr(data-l); font: 400 11px/15px var(--font-sans); color: var(--mpp-dim2); }
  .mpp-pay { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "c a" "u u" "t x"; gap: 6px 12px; padding: 13px 16px; }
  .mpp-pay-t { grid-area: t; }
  .mpp-pay-c { grid-area: c; }
  .mpp-pay-u { grid-area: u; }
  .mpp-pay-a { grid-area: a; text-align: right; }
  .mpp-pay-x { grid-area: x; }
}
@media (max-width: 420px) {
  .mpp-step3 .mpp-acts > .mpp-back { width: 56px; padding: 0; justify-content: center; }
  .mpp-step3 .mpp-acts > .mpp-back > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 400px) {
  .mpp-crumb { font-size: 11.5px; }
  .mpp-step-t b { font-size: 13.5px; }
  .mpp-stat .v { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .mpp-hero::after, .mpp-hero-l::after, .mpp-hero-bg, .mpp-hero-bg::before, .mpp-hero-bg i, .mpp-hero-r::before, .mpp-hero-r::after, .mpp-code::before, .mpp-code-cd::before,
  .mpp-step-line::before, .mpp-step-line::after, .mpp-step-n::after, .mpp-state-ic::before, .mpp-state-ic::after, .mpp-res, .mpp-res.is-load::after, .mpp-checks li,
  .mpp-row[data-testid="pay-camp-held"]::before, .mpp-row[data-testid="pay-camp-held"]::after, .mpp .mpp-live .dot::after, .mpp .pill.mpp-st .dot, .mpp .pill.mpp-st .dot::after,
  .mpp .mpp-field.is-err, .mpp .btn-accent[aria-busy="true"]::after, .mpp-tl li { animation: none !important; }
  .mpp-ring .arc, .mpp-okfold > summary::after { transition: none; }
  .mpp-step-line::before, .mpp-step-line::after, .mpp-coin, .mpp-camp, .mpp-confirm, .mpp-confirm .box, .mpp .mpp-cta > .i, .mpp .mpp-camp-go .i { transition: none; }
  .mpp-coin:hover, .mpp-camp:not(.is-msg):not(.is-skel):hover { transform: none; }
}

/* ── r3 polish ── */
/* hero: one eyebrow row instead of a breadcrumb stacked on a kicker */
.mpp-kickrow { font-family: var(--font-sans); letter-spacing: 0; gap: 10px; }
.mpp-kickrow .kicker { margin: 0; }
/* campaign cards: the four reward facts are ruled key/value lines, not four boxes in a box */
.mpp .mpp-rows { column-gap: 20px; row-gap: 0; }
.mpp .mpp-row:not([data-testid="pay-camp-held"]) { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 0; padding: 10px 2px;
  border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid rgb(159 219 255 / .08); }
.mpp .mpp-row:not([data-testid="pay-camp-held"]) .k { flex: 0 1 auto; }
.mpp .mpp-row:not([data-testid="pay-camp-held"]) .v { flex: none; justify-content: flex-end; }
.mpp .mpp-row .v b { font-size: 19px; }
.mpp .mpp-row:nth-child(3) .v, .mpp .mpp-row:nth-child(4) .v { align-items: center; white-space: nowrap; font-size: 13px; }
.mpp .mpp-row:nth-child(3) .v::before, .mpp .mpp-row:nth-child(4) .v::before { margin: 0 6px 0 0; width: 5px; height: 5px; }
.mpp .mpp-row + .mpp-row[data-testid="pay-camp-held"] { margin-top: 12px; }
.mpp .mpp-row:has([data-mpp-until]) { padding: 10px 2px; border-bottom: 0; }

/* ═══ not open yet · not reachable (MPPay.available false, or no answer from the backend) ══════════════════════
   The hero stays; one glass card says what MergepadPay is and how it will work (three stations on a still-empty pipe,
   the rules), then 公开账目 with its figures reading 开放后公布. No forms. */
.mpp-soonwrap[hidden] { display: none; }
.mpp .mpp-soon { position: relative; isolation: isolate; overflow: clip; display: grid; gap: 0; padding: clamp(26px, 3vw, 40px); border-radius: 28px; border-color: rgb(159 219 255 / .16);
  background: radial-gradient(56% 90% at 100% 0%, rgb(70 224 210 / .08), transparent 72%), linear-gradient(180deg, rgb(15 38 51 / .82), rgb(6 16 24 / .9));
  box-shadow: inset 0 1px 0 rgb(221 244 255 / .08), 0 40px 90px -50px rgb(0 0 0 / .95), 0 0 70px -40px rgb(70 224 210 / .45); }
.mpp .mpp-soon::after { content: ""; position: absolute; z-index: -1; width: 620px; aspect-ratio: 1; left: -260px; top: -380px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(70 224 210 / .1), transparent); }
.mpp-soon-h { display: grid; justify-items: start; gap: 12px; max-width: 780px; }
.mpp-soon-h .mpp-q { font-size: clamp(28px, 2.8vw, 38px); }
.mpp-soon-h .mpp-qp { font-size: 15px; line-height: 1.75; color: #A9BDCB; }
.mpp-soon-pill { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: #BFE6FF; background: rgb(159 219 255 / .08); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .3); }
.mpp-soon-pill .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mpp-ice); box-shadow: 0 0 8px var(--mpp-ice); animation: mpp-blink 2.4s ease-in-out infinite; }
.mpp-soon-pill.is-down { color: #FFE3B0; background: rgb(245 165 36 / .08); box-shadow: inset 0 0 0 1px rgb(255 199 102 / .34); }
.mpp-soon-pill.is-down .dot { background: var(--mpp-amber); box-shadow: 0 0 8px rgb(245 165 36 / .8); }
.mpp-soon-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.mpp .mpp-soon-retry { --h: 38px; padding: 0 16px; gap: 8px; border-radius: 12px; }
.mpp .mpp-soon-retry[aria-busy="true"]:disabled { opacity: 1; cursor: progress; }
.mpp-soon-why { font: 500 11.5px/18px var(--font-mono); letter-spacing: .02em; color: var(--mpp-dim2); }
.mpp-soon-sec { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgb(159 219 255 / .08); }
.mpp-soon-sec > .mpp-h3 { margin: 0 0 16px; }
/* how it will work: three stations joined by short connectors (the stepper's pipe, still empty) */
.mpp-soon-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.mpp-soon-steps li { position: relative; display: grid; align-content: start; gap: 8px; min-width: 0; padding: 18px 18px 20px; border-radius: 20px;
  background: linear-gradient(180deg, rgb(159 219 255 / .045), rgb(159 219 255 / .015)); box-shadow: inset 0 0 0 1px rgb(159 219 255 / .1); }
.mpp-soon-steps li + li::before { content: ""; position: absolute; left: -14px; top: 38px; width: 14px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgb(70 224 210 / .12), rgb(70 224 210 / .55)); }
.mpp-soon-sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mpp-soon-n { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; font: 600 13px/1 "Geist Mono", var(--font-mono); color: var(--mpp-teal);
  background: rgb(3 12 19 / .6); box-shadow: inset 0 0 0 1.5px rgb(70 224 210 / .45), 0 0 18px -6px rgb(70 224 210 / .6); }
.mpp-soon-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; color: var(--mpp-dim); background: rgb(159 219 255 / .05); }
.mpp-soon-steps b { font-family: var(--ff-display); font-weight: 800; font-size: 19px; line-height: 24px; letter-spacing: .02em; color: #F2FAFC; }
.lang-en .mpp-soon-steps b { letter-spacing: 0; }
.mpp-soon-steps p { margin: 0; font-size: 13.5px; line-height: 1.7; color: #A9BDCB; }
.mpp-soon .mpp-rulelist { padding: 0; gap: 6px 28px; }
.mpp-soon .mpp-rulelist li { padding: 8px 0; color: #D4E6EC; }
.mpp-soon .mpp-rulelist li:first-child .ic { color: var(--mpp-amber); background: rgb(245 165 36 / .08); box-shadow: inset 0 0 0 1px rgb(255 199 102 / .22); }
.mpp-soon > .mpp-trust { justify-self: start; max-width: 100%; margin-top: 26px; }
/* 公开账目 · 开放后公布 */
.mpp-soon-lt { display: flex; align-items: center; height: 56px; margin: 0; font-family: var(--ff-display); font-weight: 800; font-size: 21px; letter-spacing: .03em; color: #F2FAFC; }
.lang-en .mpp-soon-lt { letter-spacing: 0; font-size: 20px; }
.mpp-soon-led .mpp-stat .v.is-pre { font: 600 15px/1.5 var(--font-sans); letter-spacing: .02em; color: var(--mpp-dim); background: none; -webkit-text-fill-color: currentColor; white-space: normal; }
.mpp-soon-led .mpp-stat::after { opacity: .12; }
.mpp-soon-led .mpp-led > .mpp-fine { justify-content: center; }
.mpp-soon-led .mpp-led > .mpp-fine .i { color: var(--mpp-teal); }
@media (max-width: 980px) {
  .mpp-soon-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mpp-soon-steps li { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 16px; }
  .mpp-soon-steps li + li::before { left: 35px; top: -10px; width: 2px; height: 10px; background: linear-gradient(180deg, rgb(70 224 210 / .12), rgb(70 224 210 / .55)); }
  .mpp-soon-sh { grid-row: 1 / span 2; margin: 0; align-self: start; }
  .mpp-soon-ic { display: none; }
}
@media (max-width: 760px) {
  .mpp .mpp-soon { padding: 24px 16px 22px; border-radius: 24px; }
  .mpp-soon-h .mpp-qp { font-size: 14px; line-height: 1.7; }
  .mpp-soon-sec { margin-top: 24px; padding-top: 20px; }
  .mpp-soon-steps li { padding: 14px; column-gap: 12px; }
  .mpp-soon-n { width: 36px; height: 36px; font-size: 12px; }
  .mpp-soon-steps li + li::before { left: 31px; }
  .mpp-soon-steps b { font-size: 17px; line-height: 22px; }
  .mpp-soon-steps p { font-size: 13px; }
  .mpp-soon .mpp-rulelist { grid-template-columns: minmax(0, 1fr); }
  .mpp-soon-lt { height: 52px; font-size: 18px; }
  .mpp-soon-led .mpp-stat .v.is-pre { font-size: 13.5px; }
  .lang-en .mpp-soon-lt { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .mpp-soon-pill .dot { animation: none; } }

/* ═══ phases from /bootstrap: prelaunch (the card above) · waiting (no coin graduated yet) ═══════════════════════
   'waiting' is the same card: a teal pill (the backend is live and watching), the real fund in 公开账目. Both live
   phases say the page switches over by itself (.mpp-soon-auto, a slow sonar dot). */
.mpp-soon-pill.is-waiting { color: #BDF5EE; background: rgb(70 224 210 / .08); box-shadow: inset 0 0 0 1px rgb(70 224 210 / .34); }
.mpp-soon-pill.is-waiting .dot { background: var(--mpp-teal); box-shadow: 0 0 8px var(--mpp-teal); }
.mpp-soon-auto { display: inline-flex; align-items: flex-start; gap: 10px; margin: 2px 0 0; font-size: 12.5px; line-height: 18px; color: var(--mpp-dim); }
.mpp-soon-live { flex: none; width: 7px; height: 7px; margin-top: 5.5px; border-radius: 50%; background: var(--mpp-teal); animation: mpp-sonar 2.6s ease-out infinite; }
@keyframes mpp-sonar { 0% { box-shadow: 0 0 0 0 rgb(70 224 210 / .6); } 70%, 100% { box-shadow: 0 0 0 9px rgb(70 224 210 / 0); } }
.mpp-soon-led[data-state="waiting"] .mpp-stat .v { font-size: clamp(24px, 2.3vw, 32px); }

/* ═══ Binance Square (币安广场) — the platform people post on ═════════════════════════════════════════════════
   Binance yellow #F0B90B marks the platform only: its mark (assets/brand/binance-square-mark.svg) on the Square link
   fields, the hero chip and steps 1–2, the name as an underlined keyword. It always sits next to 「币安广场是第三方平台，
   MergePad 与 Binance 无关联」 (.mpp-bn-note / .mpp-bn-aside). It stands beside our amber (#F5A524, the one primary
   action per step) — warmer-lighter text, hairline rings and soft glows, never a filled yellow button. */
.mpp { --mpp-bn: #F0B90B; --mpp-bn-hi: #F7D46E; --mpp-bn-a: 240 185 11; }
.mpp-bn { display: block; flex: none; width: 16px; height: 16px; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.mpp-bn-kw { white-space: nowrap; color: var(--mpp-bn-hi); -webkit-text-fill-color: currentColor; font-weight: 600; text-decoration: underline; text-decoration-color: rgb(var(--mpp-bn-a) / .5);
  text-decoration-thickness: 1.5px; text-underline-offset: .3em; text-decoration-skip-ink: none; }
/* in a display heading: a yellow gradient, like the heading's own ice gradient */
.mpp-q .mpp-bn-kw { font-weight: inherit; text-decoration: none; background: linear-gradient(100deg, #FFEDB0 0%, #F7CF55 45%, #F0B90B 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mpp-lede .mpp-bn-kw { font-weight: 500; color: #F4D98E; text-decoration-color: rgb(var(--mpp-bn-a) / .38); }
/* hero: where people post, with the not-affiliated line beside it */
.mpp-bn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: 40em; }
.mpp-bn-chip { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 15px 0 5px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: #FBE4A2; white-space: nowrap; background: linear-gradient(180deg, rgb(var(--mpp-bn-a) / .13), rgb(var(--mpp-bn-a) / .04));
  box-shadow: inset 0 0 0 1px rgb(var(--mpp-bn-a) / .34), 0 0 26px -10px rgb(var(--mpp-bn-a) / .75); }
.mpp-bn-dot { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #2A230C, #0F0D06);
  box-shadow: inset 0 0 0 1px rgb(var(--mpp-bn-a) / .5); }
.mpp-bn-dot .mpp-bn { width: 13px; height: 13px; }
.mpp-bn-aside { font-size: 12px; line-height: 18px; color: var(--mpp-dim); }
/* the not-affiliated line under the steps / at the foot of the flow */
.mpp-bn-note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 12px; line-height: 18px; color: var(--mpp-dim); }
.mpp-bn-note .mpp-bn { width: 12px; height: 12px; }
/* the icon tile of a Binance Square step */
.mpp-bn-tile { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px;
  background: radial-gradient(120% 120% at 50% 0%, rgb(var(--mpp-bn-a) / .2), rgb(var(--mpp-bn-a) / .04) 72%);
  box-shadow: inset 0 0 0 1px rgb(var(--mpp-bn-a) / .36), 0 0 18px -6px rgb(var(--mpp-bn-a) / .7); }
.mpp-soon-steps .mpp-soon-ic.mpp-bn-tile { background: radial-gradient(120% 120% at 50% 0%, rgb(var(--mpp-bn-a) / .2), rgb(var(--mpp-bn-a) / .04) 72%); }
/* 「开放后怎么领」 steps 1–2: a warm hairline, the number ringed in yellow with a soft glow; the pipe turns teal into step 3 */
.mpp-soon-steps li.is-bn { background: linear-gradient(180deg, rgb(var(--mpp-bn-a) / .05), rgb(159 219 255 / .012) 62%); box-shadow: inset 0 0 0 1px rgb(var(--mpp-bn-a) / .14); }
.mpp-soon-steps li.is-bn .mpp-soon-n { color: var(--mpp-bn-hi); box-shadow: inset 0 0 0 1.5px rgb(var(--mpp-bn-a) / .55), 0 0 20px -5px rgb(var(--mpp-bn-a) / .7); }
.mpp-soon-steps li.is-bn + li.is-bn::before { background: linear-gradient(90deg, rgb(var(--mpp-bn-a) / .18), rgb(var(--mpp-bn-a) / .6)); }
.mpp-soon-steps li.is-bn + li:not(.is-bn)::before { background: linear-gradient(90deg, rgb(var(--mpp-bn-a) / .45), rgb(70 224 210 / .6)); }
.mpp-soon-sec > .mpp-bn-note { margin-top: 16px; }
/* the flow: Square link fields lead with the mark; the note sits at the foot of the card */
.mpp .mpp-field.is-bn > .mpp-bn { width: 18px; height: 18px; }
.mpp-flow-f { padding: 14px 32px 18px; border-top: 1px solid rgb(159 219 255 / .07); background: rgb(3 12 19 / .18); }
.mpp-flow-f .mpp-bn-note { margin: 0; }
@media (max-width: 1180px) { .mpp-flow-f { padding: 14px 26px 18px; } }
@media (max-width: 980px) {
  .mpp-soon-steps li.is-bn + li.is-bn::before { background: linear-gradient(180deg, rgb(var(--mpp-bn-a) / .18), rgb(var(--mpp-bn-a) / .6)); }
  .mpp-soon-steps li.is-bn + li:not(.is-bn)::before { background: linear-gradient(180deg, rgb(var(--mpp-bn-a) / .45), rgb(70 224 210 / .6)); }
  /* the icon column goes away here: the Square tile moves to the step's top-right corner */
  .mpp-soon-steps li.is-bn .mpp-soon-ic.mpp-bn-tile { display: grid; position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 9px; }
  .mpp-soon-steps li.is-bn > b { padding-right: 38px; }
}
@media (max-width: 760px) {
  .mpp-bn-row { gap: 8px 12px; }
  .mpp-bn-aside { flex-basis: 100%; font-size: 11.5px; }
  .mpp-flow-f { padding: 12px 16px 16px; }
  .mpp-bn-note { align-items: flex-start; font-size: 11.5px; }
  .mpp-bn-note .mpp-bn { margin-top: 3px; }
  .mpp-soon-steps li.is-bn .mpp-soon-ic.mpp-bn-tile { top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .mpp-soon-live { animation: none; box-shadow: 0 0 0 3px rgb(70 224 210 / .2); } }