/**
 * PromXAI Credits UI — test144
 * Presentation-only credit surfaces + prepared top-up chooser.
 * No purchase, deduction, payment, or generation transaction logic.
 */
:root{
  --px-credit-cyan:#39d8ff;
  --px-credit-blue:#258df4;
  --px-credit-purple:#8a63ff;
  --px-credit-pink:#d95bd0;
  --px-credit-glow:rgb(78 151 255/.24);
}

/* One canonical visual language for every credit symbol. */
.px-credit-chip__icon,
.px-account-v3__credit-icon,
.px-account-phone-v4__credit-icon,
.px-credit-modal__hero-icon,
.px-credit-package__icon{
  position:relative;
  isolation:isolate;
  color:#fff;
  border:1px solid rgb(255 255 255/.16);
  background:
    radial-gradient(circle at 32% 25%,rgb(255 255 255/.22),transparent 30%),
    linear-gradient(135deg,var(--px-credit-cyan),var(--px-credit-blue) 34%,var(--px-credit-purple) 68%,var(--px-credit-pink));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.22),
    0 0 0 1px rgb(73 172 255/.08),
    0 8px 24px var(--px-credit-glow);
}
.px-credit-chip__icon::after,
.px-account-v3__credit-icon::after,
.px-account-phone-v4__credit-icon::after,
.px-credit-modal__hero-icon::after,
.px-credit-package__icon::after{
  content:"";
  position:absolute;
  inset:4px;
  z-index:-1;
  border:1px solid rgb(255 255 255/.18);
  border-radius:inherit;
  pointer-events:none;
}

/* Compact shared balance chip: Home + Studio. */
.px-credit-chip{
  min-height:34px;
  padding:4px 10px 4px 6px;
  border:1px solid rgb(112 171 255/.17);
  border-radius:13px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--px-text,#f7fbff);
  text-decoration:none;
  background:linear-gradient(145deg,rgb(25 73 128/.32),rgb(62 42 120/.24));
  box-shadow:inset 0 1px 0 rgb(255 255 255/.05),0 8px 24px rgb(0 12 40/.09);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.px-credit-chip:hover,
.px-credit-chip:focus-visible{
  transform:translateY(-1px);
  border-color:rgb(101 218 255/.30);
  box-shadow:0 9px 26px rgb(24 113 196/.13),inset 0 1px 0 rgb(255 255 255/.07);
}
.px-credit-chip__icon{
  width:26px;
  height:26px;
  border-radius:9px;
  display:grid;
  place-items:center;
}
.px-credit-chip__icon .px-icon{width:14px;height:14px}
.px-credit-chip__copy{display:grid;gap:0;line-height:1.05;text-align:start}
.px-credit-chip__copy small{color:var(--px-muted,#9eb0c6);font-size:6.5px;font-weight:800}
.px-credit-chip__copy strong{margin-top:2px;color:var(--px-text,#f7fbff);font-size:10px;font-weight:950;font-variant-numeric:tabular-nums}
html[data-theme="light"] .px-credit-chip{
  color:#173653;
  border-color:rgb(74 113 170/.18);
  background:linear-gradient(145deg,rgb(255 255 255/.88),rgb(238 244 255/.76));
  box-shadow:0 8px 24px rgb(50 83 126/.07),inset 0 1px 0 #fff;
}
html[data-theme="light"] .px-credit-chip__copy small{color:#67809a}
html[data-theme="light"] .px-credit-chip__copy strong{color:#173653}

/* Home: credit + result count share one centered owner so neither value crowds the other. */
body.home .px-home-content-topline{position:relative}
body.home .px-home-status-cluster{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  translate:-50% -50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  direction:rtl;
  white-space:nowrap;
}
body.home .px-credit-chip--home{
  position:static;
  translate:none;
  min-width:94px;
  min-height:34px;
  justify-content:center;
}
body.home .px-home-status-cluster .px-home-results-meta{
  min-height:34px;
  padding-inline:0;
  border-inline-start:0;
  line-height:1;
}
@media (max-width:1120px) and (min-width:821px){
  body.home .px-home-status-cluster{gap:16px}
  body.home .px-credit-chip--home{min-width:74px;padding-inline:6px}
  .px-credit-chip--home .px-credit-chip__copy small{display:none}
}
@media (max-width:820px){body.home .px-home-status-cluster{display:none}}

/* Studio: credit sits with the guide, leaving prompt/language/ratio untouched. */
body.promxai-create-page .px-create-v5__head-tools{
  grid-area:guide;
  justify-self:start;
  align-self:center;
  display:flex;
  align-items:center;
  gap:7px;
  direction:ltr;
}
body.promxai-create-page .px-create-v5__head-tools .px-create-v5__guide{
  grid-area:auto!important;
  justify-self:auto!important;
  align-self:center!important;
}
body.promxai-create-page .px-credit-chip--studio{min-height:32px;padding:3px 8px 3px 5px;border-radius:11px}
body.promxai-create-page .px-credit-chip--studio .px-credit-chip__icon{width:24px;height:24px;border-radius:8px}
body.promxai-create-page .px-credit-chip--studio .px-credit-chip__copy small{font-size:5.5px}
body.promxai-create-page .px-credit-chip--studio .px-credit-chip__copy strong{font-size:8px}
@media (max-width:1040px) and (min-width:821px){body.promxai-create-page .px-credit-chip--studio .px-credit-chip__copy small{display:none}}
@media (max-width:820px){body.promxai-create-page .px-credit-chip--studio{display:none}}

/* Account credit strip: preserve approved account geometry. */
body.promxai-account-page .px-account-v3__credit-strip,
body.page-account .px-account-v3__credit-strip,
body.page-template-page-account .px-account-v3__credit-strip{
  min-height:68px;
  margin-top:12px;
  padding:10px 13px;
  border:1px solid var(--px-account-line);
  border-radius:18px;
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--px-account-surface-2) 92%,transparent),color-mix(in srgb,var(--px-accent-purple) 5%,var(--px-account-surface-2)));
  box-shadow:inset 0 1px 0 rgb(255 255 255/.04);
}
.px-account-v3__credit-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
}
.px-account-v3__credit-icon .px-icon{width:19px;height:19px}
.px-account-v3__credit-copy{min-width:0;display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;row-gap:2px}
.px-account-v3__credit-copy small{grid-column:1;color:var(--px-account-muted-2);font-size:8px;font-weight:850}
.px-account-v3__credit-copy strong{grid-column:1;color:var(--px-account-strong);font-size:18px;line-height:1;font-weight:950;white-space:nowrap}
.px-account-v3__credit-copy>span{grid-column:2;grid-row:1/3;align-self:center;color:var(--px-account-muted);font-size:8px;line-height:1.55}
.px-account-v3__credit-status{
  appearance:none;
  font:inherit;
  cursor:pointer;
  min-height:30px;
  padding:0 11px;
  border:1px solid color-mix(in srgb,var(--px-accent-purple) 22%,transparent);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--px-accent-purple);
  background:var(--px-account-gradient-soft);
  font-size:7.5px;
  font-weight:900;
  white-space:nowrap;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.px-account-v3__credit-status:hover,
.px-account-v3__credit-status:focus-visible{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--px-accent-purple) 38%,transparent);
  box-shadow:0 8px 18px rgb(75 78 190/.10);
}
@media (max-width:1100px) and (min-width:821px){
  .px-account-v3__credit-copy>span{display:none}
  .px-account-v3__credit-copy{grid-template-columns:1fr}
  .px-account-v3__credit-status{font-size:7px}
}

@media (max-width:820px){
  .px-account-phone-v4__credit{display:grid!important;grid-template-columns:45px minmax(0,1fr);align-items:center;gap:11px}
  .px-account-phone-v4__credit-icon{width:45px;height:45px;border-radius:15px;display:grid;place-items:center}
  .px-account-phone-v4__credit-icon .px-icon{width:20px;height:20px}
  .px-account-phone-v4__credit-copy{min-width:0;display:grid;gap:4px}
  .px-account-phone-v4__credit-copy small{color:var(--px-mobile-app-muted);font-size:8px}
  .px-account-phone-v4__credit-copy strong{color:var(--px-mobile-app-text);font-size:15px;font-weight:950}
  .px-account-phone-v4__credit-copy p{margin:0;color:var(--px-mobile-app-muted);font-size:8.5px;line-height:1.5}
  .px-account-phone-v4__credit-soon{
    appearance:none;
    font:inherit;
    cursor:pointer;
    grid-column:1/-1;
    min-height:36px;
    border:1px solid var(--px-mobile-app-line);
    border-radius:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--px-accent-purple);
    background:var(--px-mobile-app-accent-soft);
    font-size:9px;
    font-weight:900;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  }
  .px-account-phone-v4__credit-soon:hover,
  .px-account-phone-v4__credit-soon:focus-visible{transform:translateY(-1px);box-shadow:0 8px 18px rgb(75 78 190/.10)}
}

/* Account top-up chooser: UI is complete; commerce remains intentionally inactive. */
.px-credit-modal{
  width:min(720px,calc(100vw - 28px));
  max-width:720px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--px-text,#f7fbff);
  overflow:visible;
}
.px-credit-modal::backdrop{
  background:rgb(2 8 24/.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.px-credit-modal[open]{animation:px-credit-modal-in .22s cubic-bezier(.2,.8,.2,1)}
@keyframes px-credit-modal-in{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:none}
}
.px-credit-modal__panel{
  position:relative;
  padding:24px;
  border:1px solid rgb(109 172 255/.20);
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 0%,rgb(51 160 255/.13),transparent 34%),
    radial-gradient(circle at 85% 0%,rgb(155 92 255/.12),transparent 32%),
    linear-gradient(155deg,#0b1b36 0%,#0b1730 52%,#10172e 100%);
  box-shadow:0 30px 90px rgb(0 8 28/.48),inset 0 1px 0 rgb(255 255 255/.055);
}
.px-credit-modal__panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 12%,rgb(93 222 255/.04) 48%,transparent 72%);
}
.px-credit-modal__close{
  appearance:none;
  position:absolute;
  top:16px;
  inset-inline-end:16px;
  width:36px;
  height:36px;
  border:1px solid rgb(255 255 255/.10);
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#dcecff;
  background:rgb(255 255 255/.04);
  cursor:pointer;
  z-index:2;
}
.px-credit-modal__close .px-icon{width:16px;height:16px}
.px-credit-modal__head{display:grid;grid-template-columns:58px minmax(0,1fr);gap:16px;align-items:center;padding-inline-end:38px}
.px-credit-modal__hero-icon{width:58px;height:58px;border-radius:19px;display:grid;place-items:center}
.px-credit-modal__hero-icon .px-icon{width:27px;height:27px}
.px-credit-modal__head small{display:block;color:#68dfff;font-size:8px;font-weight:900;letter-spacing:.08em}
.px-credit-modal__head h2{margin:3px 0 4px;font-size:25px;line-height:1.15;font-weight:950;color:#fff}
.px-credit-modal__head p{margin:0;max-width:540px;color:#9eb2ca;font-size:10px;line-height:1.75}
.px-credit-modal__balance{
  margin-top:18px;
  padding:11px 14px;
  border:1px solid rgb(106 170 255/.13);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:rgb(255 255 255/.025);
}
.px-credit-modal__balance>span{color:#94aac3;font-size:9px;font-weight:800}
.px-credit-modal__balance strong{color:#f7fbff;font-size:16px;font-weight:950;font-variant-numeric:tabular-nums}
.px-credit-modal__packages{margin-top:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.px-credit-package{
  appearance:none;
  font:inherit;
  min-width:0;
  min-height:154px;
  padding:15px 11px;
  border:1px solid rgb(110 174 255/.15);
  border-radius:19px;
  display:grid;
  justify-items:center;
  align-content:center;
  gap:4px;
  color:#f6fbff;
  background:linear-gradient(155deg,rgb(25 57 102/.52),rgb(21 35 70/.66));
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.px-credit-package:hover,
.px-credit-package:focus-visible{transform:translateY(-2px);border-color:rgb(78 210 255/.33);box-shadow:0 14px 34px rgb(12 82 154/.16)}
.px-credit-package.is-selected{
  border-color:rgb(98 219 255/.50);
  background:linear-gradient(155deg,rgb(23 103 164/.48),rgb(70 45 139/.58));
  box-shadow:0 0 0 1px rgb(125 101 255/.13),0 15px 38px rgb(31 93 180/.18);
}
.px-credit-package__icon{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;margin-bottom:5px}
.px-credit-package__icon .px-icon{width:18px;height:18px}
.px-credit-package strong{font-size:24px;line-height:1;font-weight:950;font-variant-numeric:tabular-nums}
.px-credit-package small{color:#b3c4d8;font-size:8px}
.px-credit-package em{
  margin-top:8px;
  min-width:64px;
  padding:5px 9px;
  border:1px solid rgb(167 117 255/.20);
  border-radius:999px;
  color:#d9c9ff;
  background:rgb(137 91 255/.08);
  font-size:8px;
  font-weight:900;
  font-style:normal;
}
.px-credit-modal__foot{margin-top:16px;padding-top:14px;border-top:1px solid rgb(255 255 255/.07);color:#859bb5;font-size:8.5px}
.px-credit-modal__foot>span{display:flex;align-items:center;gap:7px}
.px-credit-modal__foot .px-icon{width:15px;height:15px;color:#4bdab9;flex:0 0 auto}

html[data-theme="light"] .px-credit-modal{color:#173653}
html[data-theme="light"] .px-credit-modal::backdrop{background:rgb(24 38 61/.34)}
html[data-theme="light"] .px-credit-modal__panel{
  border-color:rgb(69 109 163/.18);
  background:
    radial-gradient(circle at 18% 0%,rgb(65 174 255/.10),transparent 34%),
    radial-gradient(circle at 85% 0%,rgb(145 93 255/.09),transparent 32%),
    linear-gradient(155deg,#fbfdff,#f1f6ff);
  box-shadow:0 30px 90px rgb(45 69 104/.20),inset 0 1px 0 #fff;
}
html[data-theme="light"] .px-credit-modal__head h2,
html[data-theme="light"] .px-credit-modal__balance strong,
html[data-theme="light"] .px-credit-package{color:#173653}
html[data-theme="light"] .px-credit-modal__head p,
html[data-theme="light"] .px-credit-modal__balance>span{color:#667f9a}
html[data-theme="light"] .px-credit-modal__balance{border-color:rgb(70 111 165/.13);background:rgb(239 245 255/.72)}
html[data-theme="light"] .px-credit-package{border-color:rgb(72 114 171/.15);background:linear-gradient(155deg,#fff,#f0f5ff)}
html[data-theme="light"] .px-credit-package.is-selected{border-color:rgb(80 151 223/.42);background:linear-gradient(155deg,#f1fbff,#f3efff)}
html[data-theme="light"] .px-credit-package small{color:#6d829b}
html[data-theme="light"] .px-credit-modal__close{color:#294965;border-color:rgb(58 94 140/.14);background:#f4f8ff}
html[data-theme="light"] .px-credit-modal__foot{border-color:rgb(75 106 145/.10);color:#70859d}

@media(max-width:640px){
  .px-credit-modal__panel{padding:20px 15px 16px;border-radius:24px}
  .px-credit-modal__head{grid-template-columns:48px minmax(0,1fr);gap:12px}
  .px-credit-modal__hero-icon{width:48px;height:48px;border-radius:16px}
  .px-credit-modal__head h2{font-size:20px}
  .px-credit-modal__packages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .px-credit-package{min-height:128px}
  .px-credit-modal__balance{align-items:flex-start;flex-direction:column;gap:4px}
}