/* ChausX credits, direct unlocks and membership storefront. */
.cx-credit-store{
  position:relative;
  margin:24px 0 44px;
  padding:clamp(20px,2.2vw,34px);
  overflow:hidden;
  border:1px solid rgba(62,220,255,.22);
  background:linear-gradient(135deg,rgba(5,27,41,.96),rgba(2,12,22,.94));
  box-shadow:0 24px 70px rgba(0,0,0,.36);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
}
.cx-credit-store::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background:linear-gradient(90deg,rgba(61,221,255,.08) 1px,transparent 1px) 0 0/76px 100%;
}
.cx-credit-store-header,.cx-credit-store-body,.cx-credit-section-heading,.cx-credit-offer,.cx-credit-transaction{display:flex;align-items:center}
.cx-credit-store-header{
  position:relative;
  justify-content:space-between;
  gap:28px;
  padding-bottom:22px;
  border-bottom:1px solid rgba(71,218,255,.2);
}
.cx-credit-store-header h3{margin:5px 0 6px;color:#f4fbff;font:900 clamp(24px,2.2vw,38px)/1 var(--title-font,Impact,sans-serif);letter-spacing:.08em}
.cx-credit-store-header p{max-width:680px;margin:0;color:#8ba5b8;font-size:12px}
.cx-credit-wallet{min-width:190px;padding:14px 20px;text-align:right;border-left:2px solid #3cdefd;background:rgba(6,39,57,.72)}
.cx-credit-wallet small,.cx-credit-section-heading small{display:block;color:#77a2b7;font:800 9px/1.2 Arial,sans-serif;letter-spacing:.18em}
.cx-credit-wallet strong{color:#fff;font:900 36px/1 Arial,sans-serif}
.cx-credit-wallet span{margin-left:6px;color:#44defa;font:900 13px/1 Arial,sans-serif}
.cx-credit-store-notice{position:relative;min-height:18px;margin:12px 0;color:#82a6b9;font:700 10px/1.4 Arial,sans-serif;letter-spacing:.08em}
.cx-credit-store-notice.success{color:#5ff4bd}
.cx-credit-store-notice.error{color:#ff708b}
.cx-credit-store-notice.loading::after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border:1px solid #42ddfa;border-top-color:transparent;border-radius:50%;animation:cxCreditSpin .7s linear infinite}
@keyframes cxCreditSpin{to{transform:rotate(360deg)}}
.cx-credit-store-body{position:relative;align-items:stretch;gap:28px}
.cx-credit-store-column{min-width:0;flex:1}
.cx-credit-store-column.offers{flex:.92}
.cx-credit-section-heading{justify-content:space-between;gap:16px;min-height:38px;margin-bottom:10px}
.cx-credit-section-heading>div{display:flex;align-items:center;gap:9px}
.cx-credit-section-heading>div>span{color:#42ddfa;font:900 9px/1 Arial,sans-serif}
.cx-credit-section-heading strong{color:#d9f4ff;font:900 11px/1 Arial,sans-serif;letter-spacing:.15em}
.cx-credit-pack-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cx-credit-pack{position:relative;min-height:166px;padding:18px;overflow:hidden;border:1px solid rgba(55,207,240,.22);background:linear-gradient(145deg,rgba(8,37,53,.88),rgba(2,14,24,.92))}
.cx-credit-pack::after{content:"";position:absolute;right:-28px;bottom:-45px;width:110px;height:110px;border:1px solid rgba(53,220,255,.2);transform:rotate(45deg)}
.cx-credit-pack.featured{border-color:rgba(255,84,139,.48)}
.cx-credit-pack-badge{position:absolute;top:0;right:0;padding:5px 8px;color:#fff;background:#ca3769;font:900 8px/1 Arial,sans-serif;letter-spacing:.12em}
.cx-credit-pack-artwork{
  position:absolute;
  z-index:0;
  top:16px;
  left:16px;
  width:76px;
  height:76px;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(71,220,250,.45);
  background:#03131d;
  box-shadow:0 0 24px rgba(49,205,240,.10);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);
}
.cx-credit-pack-artwork::after{
  content:"";
  position:absolute;
  inset:5px;
  pointer-events:none;
  border-top:1px solid rgba(93,231,255,.55);
  border-left:1px solid rgba(93,231,255,.55);
}
.cx-credit-pack-artwork img{width:100%;height:100%;display:block;object-fit:cover}
.cx-credit-pack>small{display:block;color:#77a1b5;font:800 9px/1 Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.cx-credit-pack>strong{display:block;margin:14px 0 3px;color:#fff;font:900 clamp(24px,2vw,32px)/1 Arial,sans-serif}
.cx-credit-pack>strong span{color:#43ddfa;font-size:11px}
.cx-credit-pack>em{display:block;color:#64d7e9;font:700 10px/1 Arial,sans-serif;font-style:normal}
.cx-credit-pack.has-artwork>small,
.cx-credit-pack.has-artwork>strong,
.cx-credit-pack.has-artwork>em{margin-left:90px}
.cx-credit-pack.has-artwork>strong{margin-top:10px}
.cx-credit-pack button{position:absolute;z-index:1;left:18px;right:18px;bottom:16px;display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 12px;border:1px solid rgba(55,217,250,.48);color:#dffaff;background:rgba(8,66,86,.7)}
.cx-credit-pack button:not(:disabled):hover{background:#38d6f3;color:#00111b}
.cx-credit-pack button span{font:900 8px/1 Arial,sans-serif;letter-spacing:.14em}
.cx-credit-pack button b{font:900 12px/1 Arial,sans-serif}
.cx-credit-offer-list{display:grid;max-height:342px;overflow:auto;border-top:1px solid rgba(55,207,240,.18)}
.cx-credit-offer{min-height:72px;justify-content:space-between;gap:16px;padding:12px 4px 12px 14px;border-bottom:1px solid rgba(55,207,240,.14)}
.cx-credit-offer>div{min-width:0}
.cx-credit-offer small,.cx-credit-offer span{display:block;color:#608aa0;font:800 8px/1.2 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.cx-credit-offer strong{display:block;margin:4px 0;overflow:hidden;color:#eafaff;font:800 13px/1.15 Arial,sans-serif;text-overflow:ellipsis;white-space:nowrap}
.cx-credit-offer button{display:grid;place-items:center;flex:0 0 72px;height:46px;border:1px solid #35cee9;color:#fff;background:rgba(7,54,72,.75)}
.cx-credit-offer button:hover{background:#31cfea;color:#00131c}
.cx-credit-offer button b{font-size:15px}
.cx-credit-offer button span{font-size:7px;color:inherit}
.cx-credit-offer-status{color:#55edb8;font:900 9px/1 Arial,sans-serif;letter-spacing:.14em}
.cx-credit-empty{display:grid;min-height:72px;place-items:center;padding:20px;color:#64879a;border:1px dashed rgba(61,211,243,.2);font:700 10px/1.4 Arial,sans-serif;text-align:center}
.cx-credit-history{position:relative;margin-top:22px;border-top:1px solid rgba(69,213,244,.18)}
.cx-credit-history summary{padding:14px 0;color:#8db4c6;cursor:pointer;font:900 9px/1 Arial,sans-serif;letter-spacing:.16em;list-style:none}
.cx-credit-history summary span{margin-left:7px;color:#3bdcf8}
.cx-credit-transaction-list{max-height:230px;overflow:auto}
.cx-credit-transaction{justify-content:space-between;gap:18px;padding:10px 4px;border-top:1px solid rgba(59,196,225,.1)}
.cx-credit-transaction span>*{display:block}
.cx-credit-transaction strong{color:#d9edf4;font:700 11px/1.2 Arial,sans-serif}
.cx-credit-transaction small{margin-top:3px;color:#57788a;font:600 8px/1 Arial,sans-serif}
.cx-credit-transaction>b{font:900 12px/1 Arial,sans-serif}
.cx-credit-transaction.positive>b{color:#55edb8}
.cx-credit-transaction.negative>b{color:#ff7e9a}
.cx-monetization-modal{position:fixed;z-index:1000005;inset:0;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 45%,rgba(31,81,99,.18),transparent 42%),rgba(0,7,12,.78);backdrop-filter:blur(10px);opacity:0;transition:opacity .18s ease}
.cx-monetization-modal[hidden]{display:none}
.cx-monetization-modal.show{opacity:1}
.cx-monetization-dialog{--cx-purchase-accent:#45ddf8;position:relative;display:grid;width:min(590px,100%);padding:0;border:1px solid color-mix(in srgb,var(--cx-purchase-accent) 48%,transparent);color:#eafaff;background:linear-gradient(145deg,rgba(7,31,44,.98),rgba(2,10,17,.99) 76%);box-shadow:0 35px 90px rgba(0,0,0,.74),0 0 48px color-mix(in srgb,var(--cx-purchase-accent) 13%,transparent);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));overflow:hidden;transform:translateY(10px) scale(.985);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.cx-monetization-modal.show .cx-monetization-dialog{transform:none}
.cx-monetization-dialog.has-preview{grid-template-columns:minmax(175px,225px) minmax(0,1fr);width:min(790px,100%)}
.cx-monetization-dialog [hidden]{display:none!important}
.cx-monetization-dialog::before{content:"";position:absolute;z-index:2;inset:0 auto auto 0;width:42%;height:2px;background:linear-gradient(90deg,var(--cx-purchase-accent),transparent);box-shadow:0 0 18px var(--cx-purchase-accent);pointer-events:none}
.cx-monetization-dialog-close{position:absolute;z-index:5;top:14px;right:15px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid color-mix(in srgb,var(--cx-purchase-accent) 42%,transparent);border-radius:50%;color:#b7d0db;background:rgba(3,19,28,.88);font:400 21px/1 Arial,sans-serif}
.cx-monetization-dialog-close:hover{color:#fff;border-color:var(--cx-purchase-accent);box-shadow:0 0 18px color-mix(in srgb,var(--cx-purchase-accent) 26%,transparent)}
.cx-monetization-dialog-close>span{display:grid;width:100%;height:100%;place-items:center;line-height:1;transform:translateY(-1px)}
.cx-monetization-dialog-preview{position:relative;display:grid;min-height:360px;margin:0;place-items:center;overflow:hidden;border-right:1px solid color-mix(in srgb,var(--cx-purchase-accent) 30%,transparent);background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--cx-purchase-accent) 22%,transparent),transparent 57%),#020b12}
.cx-monetization-dialog-preview::before{content:"";position:absolute;z-index:2;inset:12px;border:1px solid color-mix(in srgb,var(--cx-purchase-accent) 24%,transparent);clip-path:polygon(0 0,32px 0,32px 1px,1px 1px,1px 32px,0 32px,0 100%,100% 100%,100% 0)}
.cx-monetization-dialog-preview-media{position:absolute;z-index:1;inset:0;display:block;overflow:hidden}
.cx-monetization-dialog-preview-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.cx-monetization-dialog-preview[data-shape="portrait"] .cx-monetization-dialog-preview-media img{object-fit:cover}
.cx-monetization-dialog-preview[data-shape="skin"]::after{content:"";position:absolute;z-index:3;inset:10%;pointer-events:none;border:2px solid var(--cx-purchase-accent);border-radius:50%;box-shadow:0 0 32px color-mix(in srgb,var(--cx-purchase-accent) 26%,transparent)}
.cx-monetization-dialog-preview[data-shape="skin"] .cx-monetization-dialog-preview-media{inset:10%;border-radius:50%}
.cx-monetization-dialog-preview[data-shape="skin"] .cx-monetization-dialog-preview-media img{object-fit:cover;object-position:center top}
.cx-monetization-dialog-preview[data-shape="square"] .cx-monetization-dialog-preview-media{inset:50% auto auto 50%;width:84%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--cx-purchase-accent) 38%,transparent);background:#020b12}
.cx-monetization-dialog-preview[data-shape="square"] .cx-monetization-dialog-preview-media img{object-fit:cover;object-position:var(--cx-preview-x,50%) var(--cx-preview-y,50%);transform:scale(var(--cx-preview-zoom,1));transform-origin:var(--cx-preview-x,50%) var(--cx-preview-y,50%)}
.cx-monetization-dialog-preview[data-shape="landscape"] .cx-monetization-dialog-preview-media img{object-fit:cover}
.cx-monetization-dialog-content{min-width:0;padding:34px 34px 28px}
.cx-monetization-dialog-content>small{display:block;padding-right:46px;color:var(--cx-purchase-accent);font:900 8px/1 Arial,sans-serif;letter-spacing:.2em}
.cx-monetization-dialog-title-row{display:flex;align-items:flex-end;gap:14px;margin-top:9px;padding-right:44px}
.cx-monetization-dialog h3{min-width:0;margin:0;color:#fff;font:900 clamp(25px,3vw,34px)/1.02 Arial,sans-serif;text-transform:uppercase;overflow-wrap:anywhere}
.cx-monetization-dialog-type{flex:0 0 auto;margin-left:auto;padding:6px 8px;border:1px solid color-mix(in srgb,var(--cx-purchase-accent) 66%,transparent);color:var(--cx-purchase-accent);background:color-mix(in srgb,var(--cx-purchase-accent) 12%,rgba(1,9,14,.9));font:900 7px/1 Arial,sans-serif;letter-spacing:.11em;white-space:nowrap}
.cx-monetization-dialog-tier{display:flex;align-items:center;width:max-content;max-width:100%;gap:8px;margin-top:18px;padding:8px 10px;border-left:2px solid var(--cx-tier-accent,var(--cx-purchase-accent));color:#708c99;background:color-mix(in srgb,var(--cx-tier-accent,var(--cx-purchase-accent)) 10%,rgba(2,13,21,.82));font:900 8px/1 Arial,sans-serif;letter-spacing:.12em}
.cx-monetization-dialog-tier strong{color:var(--cx-tier-accent,var(--cx-purchase-accent));font:900 10px/1 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.cx-monetization-dialog p{margin:17px 0 0;color:#91abb7;font:600 12px/1.55 Arial,sans-serif}
.cx-monetization-dialog-economy{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:9px;margin:20px 0 24px}
.cx-monetization-dialog-price,.cx-monetization-dialog-balance{display:grid;align-content:center;min-height:82px;padding:14px 16px;border:1px solid rgba(104,165,188,.18);background:rgba(8,35,48,.62)}
.cx-monetization-dialog-price{border-left:3px solid var(--cx-purchase-accent);background:linear-gradient(135deg,color-mix(in srgb,var(--cx-purchase-accent) 15%,rgba(8,35,48,.7)),rgba(4,20,29,.78))}
.cx-monetization-dialog-price small,.cx-monetization-dialog-balance small{margin-bottom:9px;color:#7295a5;font:900 7px/1 Arial,sans-serif;letter-spacing:.15em}
.cx-monetization-dialog-price strong{color:#fff;font:900 clamp(23px,2.5vw,31px)/.9 Arial,sans-serif}
.cx-monetization-dialog-balance strong{color:var(--cx-purchase-accent);font:900 clamp(16px,1.8vw,22px)/1 Arial,sans-serif}
.cx-monetization-dialog-price strong span,.cx-monetization-dialog-balance strong span{font-size:.53em;letter-spacing:.06em}
.cx-monetization-dialog-price em{margin-top:7px;color:#85a5b2;font:800 8px/1 Arial,sans-serif;text-transform:uppercase}
.cx-monetization-dialog-actions{display:flex;align-items:center;gap:8px}
.cx-monetization-dialog-actions-spacer{flex:1}
.cx-monetization-dialog-actions button,.cx-monetization-dialog-patreon{display:grid;min-width:108px;height:42px;place-items:center;padding:0 16px;border:1px solid rgba(104,194,218,.3);color:#a8cad8;background:rgba(3,19,28,.85);font:900 8px/1 Arial,sans-serif;letter-spacing:.11em;text-decoration:none;white-space:nowrap}
.cx-monetization-dialog-patreon{border-color:rgba(255,92,147,.46);color:#ffc0d6;background:linear-gradient(135deg,rgba(125,25,66,.44),rgba(35,10,27,.78))}
.cx-monetization-dialog-patreon:hover{border-color:#ff6fa8;color:#fff;box-shadow:0 0 22px rgba(255,80,145,.2)}
.cx-monetization-dialog-actions button.primary{border-color:var(--cx-purchase-accent);color:#00131b;background:var(--cx-purchase-accent);box-shadow:0 0 24px color-mix(in srgb,var(--cx-purchase-accent) 24%,transparent)}
.cx-monetization-dialog.is-processing::after{content:"";position:absolute;z-index:6;left:0;bottom:0;width:38%;height:3px;background:linear-gradient(90deg,transparent,var(--cx-purchase-accent),transparent);box-shadow:0 0 15px var(--cx-purchase-accent);animation:cxPurchaseProcessing 1s ease-in-out infinite}
.cx-monetization-dialog.is-processing .cx-monetization-dialog-actions{opacity:.44;pointer-events:none}
.cx-monetization-dialog.is-success{min-height:280px;box-shadow:0 35px 90px rgba(0,0,0,.74),0 0 66px color-mix(in srgb,var(--cx-purchase-accent) 28%,transparent)}
.cx-monetization-dialog.is-success::before{width:100%;height:3px;background:linear-gradient(90deg,transparent,var(--cx-purchase-accent),transparent);animation:cxPurchaseSuccessLine 1.25s ease-out both}
.cx-monetization-dialog.is-success .cx-monetization-dialog-preview{min-height:280px}
.cx-monetization-dialog.is-success .cx-monetization-dialog-content{display:grid;align-content:center;gap:13px}
.cx-monetization-dialog.is-success .cx-monetization-dialog-content>small{padding:0;color:var(--cx-purchase-accent);font-size:10px;letter-spacing:.25em;animation:cxPurchaseSuccessContent .5s .06s cubic-bezier(.16,1,.3,1) both}
.cx-monetization-dialog.is-success .cx-monetization-dialog-title-row{display:grid;justify-items:start;gap:13px;margin:0;padding:0;animation:cxPurchaseSuccessContent .55s .12s cubic-bezier(.16,1,.3,1) both}
.cx-monetization-dialog.is-success h3{font-size:clamp(29px,3.2vw,42px)}
.cx-monetization-dialog.is-success .cx-monetization-dialog-type{margin:0}
.cx-monetization-dialog.is-error{--cx-purchase-accent:#ff5277;box-shadow:0 35px 90px rgba(0,0,0,.74),0 0 52px rgba(255,46,91,.18)}
.cx-monetization-dialog.is-error #cxMonetizationModalCopy{margin-top:20px;padding:14px 16px;border-left:3px solid var(--cx-purchase-accent);color:#ffd7df;background:rgba(98,12,35,.28);font-weight:800}
.cx-credit-balance-updated{animation:cxCreditBalanceUpdated .82s cubic-bezier(.18,.8,.25,1)}
@keyframes cxCreditBalanceUpdated{0%,100%{transform:none;filter:none}35%{transform:scale(1.08);filter:drop-shadow(0 0 12px #62f2ff)}}
@keyframes cxPurchaseProcessing{0%{transform:translateX(-100%)}100%{transform:translateX(365%)}}
@keyframes cxPurchaseSuccessLine{0%{opacity:0;transform:scaleX(.1)}35%{opacity:1}100%{opacity:.7;transform:scaleX(1)}}
@keyframes cxPurchaseSuccessContent{0%{opacity:0;transform:translateY(15px) scale(.94)}100%{opacity:1;transform:none}}
.cx-content-locked{position:relative}
.cx-content-locked::after{content:"";position:absolute;z-index:5;inset:0;pointer-events:none;background:linear-gradient(145deg,transparent 35%,rgba(0,4,8,.48))}
.cx-content-access-badge{position:absolute;z-index:7;top:10px;right:10px;padding:6px 8px;border:1px solid color-mix(in srgb,var(--cx-lock-color,#ff558a) 72%,transparent);color:var(--cx-lock-color,#fff);background:color-mix(in srgb,var(--cx-lock-color,#641030) 24%,rgba(2,9,15,.92));box-shadow:0 0 16px color-mix(in srgb,var(--cx-lock-color,#ff558a) 22%,transparent);font:900 8px/1 Arial,sans-serif;letter-spacing:.09em}
@media(max-width:900px){
  .cx-credit-store-header,.cx-credit-store-body{align-items:stretch;flex-direction:column}
  .cx-credit-wallet{text-align:left}
  .cx-credit-pack-list{grid-template-columns:1fr}
  .cx-monetization-dialog.has-preview{grid-template-columns:135px minmax(0,1fr)}
  .cx-monetization-dialog-content{padding:28px 24px 24px}
  .cx-monetization-dialog-actions{flex-wrap:wrap}
  .cx-monetization-dialog-actions-spacer{display:none}
  .cx-monetization-dialog-patreon{margin-right:auto}
}
@media(max-width:620px){
  .cx-monetization-dialog.has-preview{display:block}
  .cx-monetization-dialog-preview{height:145px;min-height:0;border-right:0;border-bottom:1px solid color-mix(in srgb,var(--cx-purchase-accent) 30%,transparent)}
  .cx-monetization-dialog-preview[data-shape="skin"]::after{inset:8px auto auto 50%;width:129px;height:129px;transform:translateX(-50%)}
  .cx-monetization-dialog-preview[data-shape="skin"] .cx-monetization-dialog-preview-media{inset:8px auto auto 50%;width:129px;height:129px;transform:translateX(-50%)}
  .cx-monetization-dialog-preview[data-shape="square"] .cx-monetization-dialog-preview-media{width:129px;height:129px}
  .cx-monetization-dialog-title-row{display:block}
  .cx-monetization-dialog-type{display:block;width:max-content;margin:9px 0 0}
  .cx-monetization-dialog-economy{grid-template-columns:1fr 1fr}
  .cx-monetization-dialog-actions button,.cx-monetization-dialog-patreon{min-width:0;padding:0 11px}
}