.amount { display:flex; align-items:center; gap:var(--s2);
          padding:var(--s2) var(--s3); background:var(--bg2);
          border:var(--bd) solid var(--line2); border-left:2px solid var(--acc);
          cursor:text; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.amount:focus-within { border-color:var(--acc); box-shadow:0 0 0 3px rgba(var(--acc-rgb),.12); }
.amount .cur { font:700 24px/1 var(--mono); color:var(--acc); }
.amount .unit { color:var(--faint); }

#buy .amount input[type=number] { flex:1; min-width:0; background:none; border:0; padding:0;
                       outline:none; font:700 28px/1.1 var(--mono); color:var(--text);
                       appearance:textfield; }
#buy .amount input[type=number]::-webkit-outer-spin-button,
#buy .amount input[type=number]::-webkit-inner-spin-button { appearance:none; margin:0; }
#buy .amount input[type=number]::placeholder { color:var(--faint); }
.fund-row { display:flex; gap:var(--s3); align-items:center; }
.fund-row .go { flex:1; }

.pay-list { display:flex; flex-direction:column; gap:var(--s2); }
.pay-opt { --rail:var(--acc); --rail-rgb:var(--acc-rgb);
           display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
           grid-template-areas:"glyph nm marks tick" "glyph sub sub tick";
           column-gap:var(--s3); row-gap:2px; width:100%; padding:var(--s3) var(--s4); border-radius:6px;
           text-align:left; background:var(--bg2); border:var(--bd) solid var(--line2);
           color:var(--muted); cursor:pointer;
           transition:border-color var(--t-fast), color var(--t-fast), box-shadow var(--t),
                      transform var(--t-fast) var(--ease-out); }
.pay-opt .glyph { grid-area:glyph; display:grid; place-items:center; width:40px; height:40px; border-radius:6px;
                  overflow:hidden; color:var(--rail); background:rgba(var(--rail-rgb),.12);
                  box-shadow:0 0 0 1px rgba(var(--rail-rgb),.35);
                  transition:box-shadow var(--t), transform var(--t) var(--ease-out); }
.pay-opt .glyph img { display:block; width:100%; height:100%; object-fit:cover; }
.pay-opt .glyph .logo { width:24px; height:24px; }
.pay-opt:hover .glyph, .pay-opt[aria-checked=true] .glyph {
  box-shadow:0 0 0 1px rgba(var(--rail-rgb),.7), 0 0 14px -2px rgba(var(--rail-rgb),.6); }
.pay-opt .nm { grid-area:nm; min-width:0; font:700 var(--fs-body) var(--ui); color:var(--text); text-transform:capitalize; }
.pay-opt .sub { grid-area:sub; font:500 var(--fs-micro) var(--mono); color:var(--faint); letter-spacing:.04em; }

.pay-opt .marks { grid-area:marks; justify-self:end; display:flex; gap:6px; opacity:.5; filter:saturate(.25);
                  transition:opacity var(--t-fast), filter var(--t-fast); }
.pay-opt .marks .logo { width:36px; height:24px; }

.pay-opt .marks[data-shape=coin] { gap:0; }
.pay-opt .marks[data-shape=coin] .logo { width:22px; height:22px; border-radius:50%;
  box-shadow:0 0 0 2px var(--pay-ground, var(--bg2));
  transition:margin var(--t) var(--ease-out), box-shadow var(--t-fast); }
.pay-opt .marks[data-shape=coin] .logo + .logo { margin-left:-7px; }
.pay-opt:hover .marks[data-shape=coin] .logo + .logo { margin-left:-5px; }
.pay-opt .tick { grid-area:tick; width:18px; height:18px; border-radius:50%; border:var(--bd) solid var(--line2);
                 transition:background var(--t-fast), border-color var(--t-fast); }

.pay-opt:hover:not([aria-checked=true]) { color:var(--text); transform:translateY(-1px);
  border-color:rgba(var(--rail-rgb),.6); box-shadow:0 0 18px -8px rgba(var(--rail-rgb),.6); }
.pay-opt:hover .marks, .pay-opt[aria-checked=true] .marks { opacity:1; filter:none; }
.pay-opt[aria-checked=true] { --pay-ground:var(--bg3);
  color:var(--text); border-color:var(--rail); background-color:var(--bg3);
  background-image:linear-gradient(100deg, transparent 18%, rgba(var(--rail-rgb),.13) 46%,
                                   transparent 74%);
  background-size:220% 100%; background-repeat:no-repeat;
  box-shadow:0 0 0 1px rgba(var(--rail-rgb),.35), 0 0 26px -6px rgba(var(--rail-rgb),.55);
  animation:flairSheen 3.4s linear infinite; }
.pay-opt[aria-checked=true] .tick { border-color:var(--rail); background:var(--rail);
                                    box-shadow:inset 0 0 0 3px var(--bg3); }

.pay-list[data-single] .pay-opt { cursor:default; }
.go { display:flex; justify-content:center; gap:var(--s2);
      background:var(--acc); border-color:var(--acc); color:var(--ink);
      font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.go:hover { background:var(--acc); border-color:var(--acc); filter:brightness(1.1); }

.checkout { min-height:52px; align-items:center; gap:var(--s3); border:0; color:var(--ink);
  background-image:var(--foil); background-size:300% 100%; animation:foil 5s linear infinite;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35), 0 0 22px -4px rgba(var(--acc-rgb),.55),
             0 0 40px -10px rgba(var(--violet-rgb),.55), var(--shadow); }
.checkout:hover, .checkout:active:not(:disabled) { background-image:var(--foil);
  background-size:300% 100%; filter:none; }
.checkout:hover { transform:translate(-2px,-2px);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5), 0 0 30px -2px rgba(var(--acc-rgb),.75),
             0 0 56px -8px rgba(var(--violet-rgb),.75), var(--shadow-lift); }
.checkout:active:not(:disabled) { transform:translate(3px,3px);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35), 0 0 16px -4px rgba(var(--acc-rgb),.5),
             var(--shadow-press); }
.checkout::after { background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.7) 50%,
                                              transparent 65%); transition-duration:.6s; }

.checkout .lbl { display:inline-block; transform:skewX(-11deg); font:700 20px/1 var(--ui);
                 letter-spacing:.1em; }

.bill-bal { display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap; }
.bill-bal .micro { margin-right:auto; }
.bill-bal .now { font:700 var(--fs-lg)/1 var(--mono); color:var(--text); }
.bill-bal .now[data-state=warn] { color:var(--yellow); }
.bill-bal .now[data-state=bad] { color:var(--red); }
.bill-bal .after { font:600 var(--fs-lg)/1 var(--mono); color:var(--green); }
.quick { display:flex; gap:var(--s2); flex-wrap:wrap; }
.quick .chip { flex:1; justify-content:center; }

.pay-box { display:flex; flex-direction:column; gap:var(--s2); padding:var(--s2);
           background:var(--bg0); border:1px solid var(--line); }
#fundsNote:empty { display:none; }   

.sub-modes { display:flex; gap:var(--s2); }
.sub-modes .chip[disabled] { opacity:.4; cursor:not-allowed; }

.overlay.buy .box { max-height:calc(100dvh - var(--s4)); display:flex; flex-direction:column; }
.buy-body { display:flex; flex-direction:column; gap:var(--s2); padding:var(--s3);
            overflow-y:auto; min-height:0; }
.buy-status { display:flex; flex-direction:column; gap:var(--s2); padding-bottom:var(--s2);
              border-bottom:1px solid var(--line); }

.buy-seg { border:var(--bd) solid var(--line2); background:var(--bg1);
           transition:border-color var(--t); }
.buy-seg[data-open="true"] { border-color:rgba(var(--acc-rgb),.5); }
.seg-toggle { display:flex; align-items:center; gap:var(--s2); width:100%;
              padding:var(--s2) var(--s3); background:none; border:0; cursor:pointer;
              color:var(--muted); text-align:left; }
.seg-toggle:hover .micro, .buy-seg[data-open="true"] .seg-toggle .micro { color:var(--text); }

.seg-caret { width:7px; height:7px; flex:none; margin:0 3px 0 1px; transform:rotate(-45deg);
             border:solid var(--faint); border-width:0 2px 2px 0;
             transition:transform var(--t) var(--ease-out), border-color var(--t-fast); }
.buy-seg[data-open="true"] .seg-caret { transform:rotate(45deg); border-color:var(--acc); }

.buy-seg-wrap { display:grid; grid-template-rows:0fr;
                transition:grid-template-rows var(--t) var(--ease-out); }
.buy-seg[data-open="true"] .buy-seg-wrap { grid-template-rows:1fr; }
.buy-seg-clip { overflow:hidden; }
.buy-seg-b { display:flex; flex-direction:column; gap:var(--s2); padding:var(--s2); }
.sub-info { align-self:flex-start; font:600 var(--fs-micro)/1 var(--mono); letter-spacing:.04em;
            color:var(--muted); padding-top:var(--s1); }
.sub-info:hover { color:var(--acc); }
.plan-list { display:flex; flex-direction:column; gap:var(--s2); }
.plan-opt { position:relative; display:grid; grid-template-columns:auto 1fr auto;
            align-items:center; gap:var(--s1) var(--s3); width:100%; padding:var(--s2) var(--s3);
            text-align:left; background:var(--bg2); border:var(--bd) solid var(--line2);
            color:var(--text); cursor:pointer; transition:border-color var(--t-fast), box-shadow var(--t); }

.plan-opt[data-top][aria-checked=true]::after { content:""; position:absolute; inset:0;
  pointer-events:none; background-repeat:no-repeat; background-size:300% 100%;
  background-image:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.3) 46%,
    rgba(var(--tone-rgb, var(--acc-rgb)),.7) 50%, rgba(255,255,255,.3) 54%, transparent 62%);
  animation:woosh 3.5s linear infinite; }

@keyframes woosh { 0% { background-position:100% 0; } 40%, 100% { background-position:0% 0; } }
.plan-opt:hover:not(:disabled) { border-color:rgba(var(--tone-rgb, var(--acc-rgb)),.6); }
.plan-opt .tick { width:16px; height:16px; border-radius:50%; border:var(--bd) solid var(--line2); }
.plan-opt .nm { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1) var(--s2);
                font:600 var(--fs-ui) var(--ui); letter-spacing:.04em; text-transform:uppercase; }

.plan-plus { padding:2px 5px; font:800 var(--fs-micro)/1 var(--mono); letter-spacing:.08em;
             text-transform:uppercase; color:var(--text); border:1px solid var(--orange); background:rgba(var(--orange-rgb),.16);
             box-shadow:0 0 10px -3px rgba(var(--orange-rgb),.8); }
.sub-cover { margin:0; padding:var(--s1) var(--s2); border-left:var(--bd) solid var(--orange);
             background:rgba(var(--orange-rgb),.08); font:700 var(--fs-micro)/1.4 var(--mono);
             letter-spacing:.06em; text-transform:uppercase; color:var(--text); }

.plan-opt .nm .flag-in { display:inline-block; position:relative; overflow:hidden;
  padding:3px 6px; font:800 var(--fs-micro)/1 var(--mono); letter-spacing:.08em;
  text-transform:uppercase; background:var(--acc); color:var(--ink);
  box-shadow:0 0 0 1px rgba(var(--acc-rgb),.6), 0 0 14px rgba(var(--acc-rgb),.75);
  animation:bestPulse 2.4s ease-in-out infinite; }
.plan-opt .nm .flag-in::after { content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%);
  animation:bestSheen 3.2s ease-in-out infinite; }
@keyframes bestPulse { 50% { box-shadow:0 0 0 1px rgba(var(--acc-rgb),.9),
                                        0 0 22px 2px rgba(var(--acc-rgb),.9); } }
@keyframes bestSheen { 0%, 55% { transform:translateX(-120%); } 85%, 100% { transform:translateX(120%); } }
.plan-opt .price { font:700 var(--fs-body)/1 var(--mono); text-align:right; }
.plan-opt .per { font:400 var(--fs-micro) var(--mono); color:var(--faint); }
.plan-opt .held { grid-column:2 / -1; font:600 var(--fs-micro) var(--mono); color:var(--acc); }
.plan-opt[aria-checked=true] { border-color:var(--tone, var(--acc)); background-color:var(--bg3);
  box-shadow:0 0 0 1px rgba(var(--tone-rgb, var(--acc-rgb)),.35),
             0 0 22px -8px rgba(var(--tone-rgb, var(--acc-rgb)),.6); }
.plan-opt[aria-checked=true] .tick { border-color:var(--tone, var(--acc));
  background:var(--tone, var(--acc)); box-shadow:inset 0 0 0 3px var(--bg3); }

.plan-chip { display:inline-block; padding:3px 6px; font:800 var(--fs-micro)/1 var(--mono);
             letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
             background:var(--tone, var(--acc));
             box-shadow:0 0 10px -2px rgba(var(--tone-rgb, var(--acc-rgb)),.8); }
.plan-chip[data-flair="foil"] { background-image:var(--foil); background-size:300% 100%;
                                animation:foil 5s linear infinite; }

#buyPlans { border-color:transparent; background-repeat:no-repeat;
  background-image:linear-gradient(var(--bg1), var(--bg1)),
    linear-gradient(110deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%),
    var(--foil);
  background-origin:padding-box, border-box, border-box;
  background-clip:padding-box, border-box, border-box;
  background-size:100% 100%, 250% 100%, 100% 100%;
  animation:segGlint 3.75s ease-in-out infinite; }
@keyframes segGlint { 0% { background-position:0 0, 160% 0, 0 0; }
                      32%, 100% { background-position:0 0, -60% 0, 0 0; } }
.plan-opt:disabled { opacity:.45; cursor:not-allowed; }
.pay-opt[aria-disabled=true] { opacity:.45; cursor:not-allowed; }
@media (max-width:720px) {
  
  .overlay.buy { padding:0; }
  .overlay.buy .box { --box-w:100%; max-height:100dvh; }
}