html { scrollbar-gutter: stable; }

:root{ --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace; }

body.nlapp{
  background:var(--navy-900); color:var(--white); font-family:var(--font-body);
  min-height:100svh; display:flex; flex-direction:column; overflow-x:hidden; }

.pay9-wrap{ position:relative; width:100%; max-width:1000px; margin:0 auto; flex:1;
  padding:clamp(24px,calc(24px + 24 * (100vw - 375px) / 1065),52px) 20px 90px; }

.pay9-footer{ margin-top:auto; }

.pay9-back{ display:inline-flex; align-items:center; gap:8px; padding-block:10px;
  font-size:15px; font-weight:500; color:var(--periwinkle);
  transition:color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.pay9-back svg{ width:16px; height:16px; flex:none; }
.pay9-back:hover{ color:var(--white); transform:translateX(-3px); }

.pay9-head{ margin:14px 0 clamp(26px,calc(26px + 12 * (100vw - 375px) / 1065),38px); }
.pay9-eyebrow{ display:block; margin-bottom:12px; font-size:13px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--periwinkle); }
.pay9-title{ margin:0; width:fit-content; max-width:100%;
  font-family:var(--font-display); font-weight:500; line-height:1.095;
  letter-spacing:var(--track-display);
  font-size:clamp(28px,calc(28px + 16 * (100vw - 375px) / 1065),44px);
  background-image:var(--grad-title); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pay9-sub{ margin:16px 0 0; max-width:62ch; font-size:17px; line-height:1.55; color:var(--periwinkle); }

.pay9-fault{ margin-top:20px; max-width:66ch; padding:18px 20px;
  border-radius:0 var(--radius-card) 0 var(--radius-card);
  background:radial-gradient(140% 190% at 0% 50%, rgba(255,107,107,.16), transparent 62%), var(--navy-800);
  box-shadow:inset 0 0 0 1px rgba(255,107,107,.34); }
.pay9-fault__cap{ display:block; margin-bottom:10px; font-size:13px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:#FF9E9E; }
.pay9-fault__line{ margin:0; font-family:var(--font-display); font-weight:400; line-height:1.42;
  letter-spacing:var(--track-display); color:var(--white);
  font-size:clamp(18px,calc(18px + 6 * (100vw - 375px) / 1065),24px); }

.pay9-order.payg{ flex-direction:row; align-items:center; justify-content:space-between;
  gap:28px; padding:26px 28px; }
.pay9-order__body{ align-items:flex-start; gap:10px; }
.pay9-order__name{ font-family:var(--font-display); font-weight:500; line-height:1;
  letter-spacing:var(--track-display); width:fit-content;
  font-size:clamp(24px,calc(24px + 6 * (100vw - 375px) / 1065),30px);
  background-image:var(--grad-plan); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pay9-order__note{ margin:0; font-size:16px; line-height:1.4; color:var(--periwinkle); }
.pay9-order__note b{ font-weight:500; color:var(--white); }
.pay9-order__price{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none; }
.pay9-order__now{ font-family:var(--font-display); font-weight:500; line-height:1;
  letter-spacing:var(--track-display); color:var(--white);
  font-size:clamp(30px,calc(30px + 14 * (100vw - 375px) / 1065),44px); }
.pay9-was{ display:flex; align-items:center; flex-wrap:nowrap; gap:10px;
  font-size:15px; color:var(--periwinkle); }
.pay9-was s{ flex:none; text-decoration:line-through; text-decoration-color:var(--muted); }
.pay9-save{ flex:none; white-space:nowrap; padding:4px 10px; border-radius:8px;
  background:rgba(0,81,255,.20); box-shadow:inset 0 0 0 1px rgba(0,81,255,.34);
  color:#9DBEFF; font-weight:500; font-size:13.5px; }

.pay9-board{ margin-top:24px; padding:clamp(18px,calc(18px + 10 * (100vw - 375px) / 1065),28px);
  border-radius:0 var(--radius-card) 0 var(--radius-card);
  background:radial-gradient(140% 190% at 0% 50%, rgba(0,81,255,.20), transparent 62%), var(--navy-800);
  box-shadow:inset 0 0 0 1px var(--navy-600); }
.pay9-board__cap{ margin:0 0 6px; font-family:var(--font-display); font-weight:500;
  font-size:20px; line-height:1.2; letter-spacing:var(--track-display); color:var(--white); }

.pay9-keys{ display:grid; grid-auto-rows:1fr; gap:10px; }

.pay9-keys__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:10px 20px 6px;
  font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--periwinkle); }

.pay9-key{ position:relative; display:block; height:100%; cursor:pointer; }
.pay9-key__input{ position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; margin:0;
  pointer-events:none; }
.pay9-key__body{ display:grid; align-items:center; height:100%; gap:6px 16px;
  grid-template-columns:var(--pay9-cols); padding:18px 20px; border-radius:14px;
  background:var(--navy-900); box-shadow:inset 0 0 0 1px var(--navy-600);
  transition:box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.pay9-key:hover .pay9-key__body{ box-shadow:inset 0 0 0 1px var(--navy-500); }
.pay9-key__input:checked + .pay9-key__body{
  background:radial-gradient(120% 220% at 6% 50%, rgba(0,81,255,.26), transparent 64%), var(--navy-900);
  box-shadow:inset 0 0 0 1px var(--blue); }
.pay9-key__input:focus-visible + .pay9-key__body{
  box-shadow:inset 0 0 0 1px var(--blue-light), 0 0 0 3px rgba(66,126,255,.35); }

.pay9-key__no{ font-family:var(--font-display); font-weight:500; font-size:19px; line-height:1;
  letter-spacing:.02em; color:var(--muted); font-variant-numeric:tabular-nums;
  transition:color var(--dur) var(--ease-out); }

.pay9-key__pair{ display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 9px; min-width:0; }
.pay9-key__tick{ font-family:var(--font-display); font-weight:500; line-height:1.05;
  letter-spacing:var(--track-display); color:var(--white);
  font-size:clamp(22px,calc(22px + 6 * (100vw - 375px) / 1065),28px); }
.pay9-key__sep{ font-family:var(--font-display); font-weight:400; font-size:20px; color:var(--muted); }
.pay9-key__chain{ font-family:var(--font-display); font-weight:500; line-height:1.05;
  letter-spacing:var(--track-display); color:var(--periwinkle);
  font-size:clamp(18px,calc(18px + 4 * (100vw - 375px) / 1065),22px);
  transition:color var(--dur) var(--ease-out); }

.pay9-key__std{ grid-column:2; display:inline-flex; align-items:center; gap:8px;
  font-size:15px; line-height:1.3; color:var(--periwinkle); }
.pay9-key__mark{ display:inline-flex; width:17px; height:17px; flex:none; border-radius:50%;
  overflow:hidden; }
.pay9-key__mark svg{ display:block; width:100%; height:100%; }

.pay9-key__pay{ grid-row:1 / span 2; grid-column:3; display:flex; flex-direction:column;
  align-items:flex-end; gap:4px; flex:none; text-align:right; }
.pay9-key__amt{ font-family:var(--font-display); font-weight:500; line-height:1;
  letter-spacing:var(--track-display); color:var(--white); font-variant-numeric:tabular-nums;
  font-size:clamp(22px,calc(22px + 5 * (100vw - 375px) / 1065),27px); white-space:nowrap; }
.pay9-key__unit{ font-size:15px; color:var(--periwinkle); }

.pay9-key__input:checked + .pay9-key__body .pay9-key__no{ color:var(--white); }
.pay9-key__input:checked + .pay9-key__body .pay9-key__chain{ color:var(--white); }

.pay9-key__unavail{ display:none; grid-column:2 / -1; font-size:15px; color:var(--periwinkle); }
.pay9-key.is-disabled{ pointer-events:none; }
.pay9-key.is-disabled .pay9-key__body{ box-shadow:inset 0 0 0 1px var(--navy-700); }
.pay9-key.is-disabled .pay9-key__tick,
.pay9-key.is-disabled .pay9-key__chain{ color:var(--muted); }
.pay9-key.is-disabled .pay9-key__mark{ filter:grayscale(1); opacity:.5; }
.pay9-key.is-disabled .pay9-key__std,
.pay9-key.is-disabled .pay9-key__pay{ display:none; }
.pay9-key.is-disabled .pay9-key__unavail{ display:block; }

.pay9-go{ margin-top:22px; width:100%; }
.pay9-foot{ display:flex; align-items:flex-start; justify-content:center; gap:10px;
  margin:24px auto 0; max-width:62ch; font-size:16px; line-height:1.5;
  color:var(--periwinkle); }
.pay9-foot svg{ width:17px; height:17px; flex:none; margin-top:3px; color:var(--periwinkle); }

.pay9-inv{ display:flex; flex-direction:column; gap:20px; margin-top:24px; }

.pay9-card{ display:flex; flex-direction:column; gap:26px;
  padding:clamp(22px,calc(22px + 8 * (100vw - 375px) / 1065),30px);
  border-radius:var(--radius-card);
  background:var(--navy-700); box-shadow:inset 0 0 0 1px var(--navy-600); }

.pay9-send{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:30px; align-items:start; }

.pay9-scan{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.pay9-plate{ position:relative; padding:16px; border-radius:18px; background:var(--white);
  box-shadow:0 18px 40px rgba(0,24,72,.45); }
#payQr{ width:194px; height:194px; background:#fff; overflow-wrap:anywhere; word-break:break-all;
  font-size:13px; line-height:1.5; letter-spacing:.2px; color:#07132D; }
#payQr svg, #payQr canvas, #payQr img{ width:100%; height:100%; display:block; }
#payQr:has(svg){ overflow:hidden; }

.pay9-ident{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
.pay9-ident__pair{ display:flex; align-items:baseline; gap:8px; }
.pay9-ident__tick{ font-family:var(--font-display); font-weight:500; font-size:22px; line-height:1.05;
  letter-spacing:var(--track-display); color:var(--white); }
.pay9-ident__sep{ font-family:var(--font-display); font-size:17px; color:var(--muted); }
.pay9-ident__chain{ font-family:var(--font-display); font-weight:500; font-size:19px; line-height:1.05;
  letter-spacing:var(--track-display); color:var(--periwinkle); }
.pay9-ident__std{ display:inline-flex; align-items:center; gap:7px; font-size:15px; color:var(--periwinkle); }
.pay9-ident__mark{ display:inline-flex; width:17px; height:17px; flex:none; border-radius:50%; overflow:hidden; }
.pay9-ident__mark svg{ display:block; width:100%; height:100%; }

.pay9-desk{ display:flex; flex-direction:column; gap:26px; min-width:0; }
.pay9-cap{ display:block; margin-bottom:10px; font-size:16px; font-weight:500; line-height:1.25;
  color:var(--periwinkle); }
.pay9-amount{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; }
.pay9-amount__val{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.pay9-amount__num{ font-family:var(--font-display); font-weight:500; line-height:1;
  letter-spacing:var(--track-display); color:var(--white); font-variant-numeric:tabular-nums;
  font-size:clamp(30px,calc(30px + 12 * (100vw - 375px) / 1065),42px); overflow-wrap:anywhere; }
.pay9-amount__tick{ font-family:var(--font-display); font-weight:500; font-size:22px; color:var(--white); }

.pay9-warn{ display:flex; align-items:flex-start; gap:10px; margin:14px 0 0;
  font-size:16px; line-height:1.5; color:var(--periwinkle); }
.pay9-warn svg{ width:19px; height:19px; flex:none; margin-top:2px; color:var(--blue-light); }
.pay9-warn b{ font-weight:500; color:var(--white); }

.pay9-addr{ display:flex; align-items:center; gap:14px; padding:15px 16px; border-radius:12px;
  background:var(--navy-900); box-shadow:inset 0 0 0 1px var(--navy-600); }
.pay9-addr code{ flex:1 1 auto; min-width:0; font-family:var(--font-mono); font-size:15.5px;
  line-height:1.55; letter-spacing:.02em; color:var(--periwinkle);
  overflow-wrap:anywhere; word-break:break-all; }
.pay9-addr code b{ font-weight:500; color:var(--white); }
.pay9-addr__hint{ margin:12px 0 0; font-size:15px; line-height:1.5; color:var(--periwinkle); }
.pay9-addr__hint b{ font-weight:500; color:var(--white); }

.pay9-copy{ display:inline-flex; align-items:center; justify-content:center; gap:9px; flex:none;
  min-width:164px; min-height:44px; padding:11px 16px; border-radius:0 12px 0 12px;
  background:rgba(0,81,255,.18); box-shadow:inset 0 0 0 1px rgba(0,81,255,.36);
  color:#9DBEFF; font-family:var(--font-body); font-weight:500; font-size:15px;
  line-height:1.2; white-space:nowrap; cursor:pointer;
  transition:border-radius var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.pay9-copy:hover{ border-radius:12px 0 12px 0; background:rgba(0,81,255,.30); color:var(--white); }
.pay9-copy svg{ width:16px; height:16px; flex:none; }
.pay9-copy .ico-check{ display:none; }
.pay9-copy .t-done{ display:none; }
.pay9-copy.is-copied{ background:rgba(0,194,255,.18); box-shadow:inset 0 0 0 1px rgba(0,194,255,.46);
  color:#7FDCFF; }
.pay9-copy.is-copied .ico-copy{ display:none; }
.pay9-copy.is-copied .ico-check{ display:block; }
.pay9-copy.is-copied .t-copy{ display:none; }
.pay9-copy.is-copied .t-done{ display:inline; }

.pay9-ton{ align-self:flex-start; }
.pay9-ton svg{ width:18px; height:18px; flex:none; }

.pay9-under{ align-items:flex-start; gap:16px; padding:18px 20px;
  border-radius:0 16px 0 16px;
  background:rgba(0,194,255,.10); box-shadow:inset 0 0 0 1px rgba(0,194,255,.36); }
.pay9-under__body{ display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-width:0; }
.pay9-under__cap{ font-family:var(--font-display); font-weight:500; font-size:19px; line-height:1.2;
  letter-spacing:var(--track-display); color:#7FDCFF; }
.pay9-under__line{ font-size:16px; line-height:1.5; color:var(--periwinkle); }
.pay9-under__num{ font-weight:500; color:var(--white); font-variant-numeric:tabular-nums; }

.pay9-status{ gap:24px; }
.pay9-clock{ display:flex; flex-direction:column; gap:10px; }
.pay9-clock__cap{ font-size:16px; font-weight:500; line-height:1.25; color:var(--periwinkle); }
.pay9-clock__num{ font-family:var(--font-display); font-weight:500; line-height:1;
  letter-spacing:var(--track-display); color:var(--white); font-variant-numeric:tabular-nums;
  font-size:clamp(44px,calc(44px + 24 * (100vw - 375px) / 1065),68px); }
.pay9-clock__rail{ display:block; width:100%; height:6px; margin-top:4px; overflow:visible; }
.pay9-clock__bed{ stroke:var(--navy-900); stroke-width:6; }
#payTimerArc{ stroke:var(--blue-light); stroke-width:6;
  transition:stroke-dashoffset .98s linear; }

.pay9-steps{ display:flex; flex-direction:column; gap:2px; }
.inv-step{ display:flex; align-items:baseline; gap:18px; padding:13px 0;
  box-shadow:inset 0 1px 0 var(--navy-500); }
.inv-step:first-child{ box-shadow:none; }
.inv-step__state{ flex:none; width:126px; white-space:nowrap; font-size:13px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.inv-step__state i{ display:none; font-style:normal; }
.inv-step .s-wait{ display:inline; }
.inv-step__label{ flex:1 1 auto; min-width:0; font-size:17px; line-height:1.3; color:var(--periwinkle); }

.inv-step.is-current .s-wait{ display:none; }
.inv-step.is-current .s-now{ display:inline; }
.inv-step.is-current .inv-step__state{ color:#7FDCFF; animation:pay9-blink 2.2s var(--ease-in-out) infinite; }
.inv-step.is-current .inv-step__label{ color:var(--white); }

.inv-step.is-done .s-wait,
.inv-step.is-done .s-now{ display:none; }
.inv-step.is-done .s-done{ display:inline; }
.inv-step.is-done .inv-step__state{ color:#9DBEFF; animation:none; }
.inv-step.is-done .inv-step__label{ color:var(--periwinkle); }

@keyframes pay9-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

.pay9-cancel{ margin-top:20px; text-align:center; }
.pay9-cancel__btn{ display:inline-block; padding:14px 20px; font-size:15px; color:var(--muted);
  cursor:pointer; transition:color var(--dur) var(--ease-out); }
.pay9-cancel__btn:hover{ color:#FF9E9E; }

.pay9-done{ margin-top:14px; display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:18px; padding:clamp(32px,calc(32px + 20 * (100vw - 375px) / 1065),56px) 24px;
  border-radius:var(--radius-card);
  background:radial-gradient(120% 150% at 50% 0%, rgba(0,81,255,.22), transparent 62%), var(--navy-800);
  box-shadow:inset 0 0 0 1px var(--navy-600); }
.pay9-done__lamp{ display:inline-flex; align-items:center; justify-content:center;
  width:80px; height:80px; border-radius:50%;
  background:rgba(0,81,255,.18); box-shadow:inset 0 0 0 1px rgba(66,126,255,.46); }
.pay9-done__lamp svg{ width:40px; height:40px; color:#9DBEFF; }
.pay9-done__lamp--off{ background:rgba(116,138,185,.12); box-shadow:inset 0 0 0 1px var(--navy-600); }
.pay9-done__lamp--off svg{ color:var(--periwinkle); }
.pay9-done__title{ margin:0; font-family:var(--font-display); font-weight:500; line-height:1.1;
  letter-spacing:var(--track-display); color:var(--white);
  font-size:clamp(26px,calc(26px + 10 * (100vw - 375px) / 1065),36px); }
.pay9-done__sub{ margin:0; max-width:58ch; font-size:17px; line-height:1.55; color:var(--periwinkle); }
.pay9-done__sub a{ color:#9DBEFF; text-decoration:underline; text-underline-offset:3px; }
.pay9-done__sub a:hover{ color:var(--white); }
.pay9-done__sub b{ font-weight:500; color:var(--white); }
.pay9-done__addr{ padding:14px 18px; border-radius:12px; max-width:100%;
  background:var(--navy-900); box-shadow:inset 0 0 0 1px var(--navy-600);
  font-family:var(--font-mono); font-size:15.5px; line-height:1.55; letter-spacing:.02em;
  color:var(--white); overflow-wrap:anywhere; word-break:break-all; }
.pay9-done__cta{ margin-top:8px; }

.pay-state--paid, .pay-state--expired{ display:none; }
.pay-state--paid.is-visible, .pay-state--expired.is-visible{ display:block; }
.pay-state--active.is-hidden{ display:none; }

.pay9-under{ display:none; order:-1; }
.pay9-under.is-visible{ display:flex; }

.pay9-wrap a.pay9-ton.only-ton{ display:none; }
.pay9-wrap a.pay9-ton.only-ton.is-visible{ display:inline-flex; }

.pay-done--expired .exp-funded{ display:none; }
.pay-done--expired.has-funds .exp-nofunds{ display:none; }
.pay-done--expired.has-funds .exp-funded{ display:block; }

.pay9-keys{ --pay9-cols:auto minmax(0,1fr) auto; }

@media (max-width:860px){
  .pay9-send{ grid-template-columns:1fr; gap:26px; }
  .pay9-desk{ gap:24px; }
}

@media (max-width:720px){
  .pay9-order.payg{ flex-direction:column; align-items:stretch; gap:20px; }
  .pay9-order__body{ align-items:center; text-align:center; }
  .pay9-order__price{ align-items:center; }
  .pay9-keys{ --pay9-cols:auto minmax(0,1fr); }
  .pay9-key__pay{ grid-row:auto; grid-column:2; align-items:baseline; text-align:left;
    flex-direction:row; gap:8px; }
  .pay9-key__unit{ display:none; }
  .pay9-key__amt{ font-size:20px; }
  .pay9-keys__head span:last-child{ display:none; }
  .inv-step__state{ width:118px; }
}

@media (max-width:430px){
  .pay9-key__tick{ font-size:20px; }
  .pay9-key__chain{ font-size:17px; }
  .pay9-key__sep{ font-size:17px; }
  .pay9-key__body{ padding:16px; }
}

@media (max-width:560px){
  .pay9-under{ flex-direction:column; align-items:stretch; gap:14px; }
  .pay9-under .pay9-copy{ align-self:flex-start; }
  .pay9-plate{ padding:14px; }
  #payQr{ width:172px; height:172px; }
  .pay9-addr{ flex-direction:column; align-items:stretch; gap:14px; }
  .pay9-addr .pay9-copy{ align-self:flex-start; }
  .pay9-board{ border-radius:0 18px 0 18px; }
  .pay9-fault{ border-radius:0 18px 0 18px; }
  .pay9-done{ border-radius:18px; }
  .inv-step{ flex-direction:column; align-items:flex-start; gap:5px; }
  .inv-step__state{ width:auto; }
}