:root{
  --fx-accent:#10b77f;
  --fx-accent2:#0fa06f;
  --fx-bgDeep:#091d17;
  --fx-bg:#0b221b;
  --fx-surface:rgba(255,255,255,.045);
  --fx-surface2:rgba(255,255,255,.03);
  --fx-border:rgba(255,255,255,.08);
  --fx-border2:rgba(16,183,127,.38);
  --fx-text:#eafff7;
  --fx-muted:rgba(234,255,247,.62);
  --fx-shadow: 0 26px 70px rgba(0,0,0,.55);
  --fx-shadow2: 0 12px 30px rgba(0,0,0,.35);
  --fx-radius: 22px;
  --fx-pillRadius: 999px;
  --fx-pillGroupRadius: 999px;
  --fx-pillPad: 8px;
  --fx-pillGap: 8px;
  --fx-pillFont: 14px;
  --fx-pillActiveShadow: 0 14px 34px rgba(16,183,127,.12);
  --fx-pillActiveFrom: rgba(16,183,127,.42);
  --fx-pillActiveTo: rgba(16,183,127,.20);
  --fx-pillHoverBg: rgba(255,255,255,.06);
  --fx-pillHoverText: rgba(234,255,247,.92);
  --fx-btnBgFrom: rgba(16,183,127,.95);
  --fx-btnBgTo: rgba(15,160,111,.86);
  --fx-btnHoverFrom: rgba(16,183,127,1);
  --fx-btnHoverTo: rgba(15,160,111,.94);
  --fx-btnHoverText: #fff;
  --fx-padX: 18px;
  --fx-padY: 28px;
  --fx-stageFont: 14px;
  --fx-cardMaxH: none;
  --fx-containerMaxW: 1120px;
  --fx-cardW: auto;
  --fx-cardH: auto;
  --fx-scrollbarSize: 8px;
  --fx-scrollbarThumb: rgba(16,183,127,.5);
  --fx-scrollbarThumbHover: rgba(16,183,127,.8);
  --fx-scrollbarTrack: transparent;
  --fx-btnShadow: 0 12px 28px rgba(16,183,127,.22);
  --fx-btnHoverFilter: brightness(1.06);
  --fx-bottomFade: 55%;
}

/* Optional bottom fade-out */
.fx-apx-card.fx-bottom-fade .fx-apx-panel{position:relative}
.fx-apx-card.fx-bottom-fade .fx-apx-panel:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:240px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(9,29,23,0) 0%, rgba(9,29,23,.55) var(--fx-bottomFade), rgba(9,29,23,1) 100%);
}

/* Wrapper */
.fx-apx-wrap{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--fx-text);
  padding: var(--fx-padY) var(--fx-padX) 40px;
  border-radius: 28px;
  background:
    radial-gradient(980px 420px at 50% 0%, rgba(16,183,127,.18), rgba(16,183,127,0) 62%),
    radial-gradient(980px 420px at 50% 100%, rgba(16,183,127,.10), rgba(16,183,127,0) 62%),
    linear-gradient(180deg, var(--fx-bg), var(--fx-bgDeep));
}
.fx-apx-container{ max-width: var(--fx-containerMaxW); margin: 0 auto; }

/* Top pills */
.fx-apx-topbar{
  display:flex;
  justify-content:center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 8px 0 18px;
}

.fx-apx-pillgroup{
  position: relative;
  display:flex;
  gap: var(--fx-pillGap);
  padding: var(--fx-pillPad);
  border-radius: var(--fx-pillGroupRadius);
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--fx-shadow2);
  backdrop-filter: blur(12px);
  box-sizing: border-box;
}

.fx-apx-indicator{
  position:absolute;
  top: var(--fx-pillPad); bottom: var(--fx-pillPad);
  left: 0;
  width: 80px;
  border-radius: var(--fx-pillGroupRadius);
  background: linear-gradient(180deg, var(--fx-pillActiveFrom), var(--fx-pillActiveTo));
  box-shadow:
    inset 0 0 0 1px rgba(16,183,127,.35),
    var(--fx-pillActiveShadow);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), width .28s cubic-bezier(.2,.9,.2,1);
  will-change: transform, width;
  pointer-events:none;
  box-sizing: border-box;
}

.fx-apx-pill{
  appearance:none; border:0;
  background: transparent;
  color: rgba(234,255,247,.78);
  padding: 10px 14px;
  border-radius: var(--fx-pillRadius);
  cursor: pointer;
  font-weight: 800;
  font-size: var(--fx-pillFont);
  letter-spacing: .1px;
  line-height: 1;
  transition: transform .12s ease, color .2s ease, opacity .2s ease;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fx-apx-pill:hover{ transform: translateY(-1px); color: var(--fx-pillHoverText); }
.fx-apx-pill:hover::before{content:"";position:absolute;inset:0;border-radius:var(--fx-pillRadius);background:var(--fx-pillHoverBg);z-index:-1;}
.fx-apx-pill[aria-selected="true"]{ color: #fff; }

.fx-apx-chip{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}

/* Card */
.fx-apx-card{
  position: relative;
  border-radius: var(--fx-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--fx-shadow);
  width: var(--fx-cardW);
  height: var(--fx-cardH);
  overflow: auto;
  max-height: var(--fx-cardMaxH);
}

.fx-apx-card::-webkit-scrollbar{ height: var(--fx-scrollbarSize); width: var(--fx-scrollbarSize); }
.fx-apx-card::-webkit-scrollbar-track{ background: var(--fx-scrollbarTrack); }
.fx-apx-card::-webkit-scrollbar-thumb{ background: var(--fx-scrollbarThumb); border-radius: 999px; }
.fx-apx-card::-webkit-scrollbar-thumb:hover{ background: var(--fx-scrollbarThumbHover); }
.fx-apx-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(820px 260px at 50% 0%, rgba(16,183,127,.14), rgba(16,183,127,0) 60%),
    radial-gradient(820px 260px at 50% 100%, rgba(16,183,127,.08), rgba(16,183,127,0) 60%);
  pointer-events:none;
}

.fx-apx-inner{
  position:relative;
  padding: 26px 22px 14px;
  background: linear-gradient(180deg, rgba(9,29,23,.45), rgba(9,29,23,.18));
}

.fx-apx-panel{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}
.fx-apx-panel.is-swapping{
  opacity: 0;
  transform: translateY(6px);
  filter: blur(1px);
}

.fx-apx-panel.is-swapping-slide{
  opacity: 0;
  transform: translateX(10px);
  filter: blur(0.5px);
}
.fx-apx-panel.is-swapping-scale{
  opacity: 0;
  transform: scale(.985);
  filter: blur(0.5px);
}


/* Optional box under tabs (per tab/subtab) */
.fx-apx-topbox{
  width: min(860px, 100%);
  margin: 0 auto 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
  padding: 14px 16px;
  backdrop-filter: blur(12px);
}
.fx-apx-topbox-title{
  text-align:center;
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(234,255,247,.92);
  margin-bottom: 8px;
}
.fx-apx-topbox-content{
  color: rgba(234,255,247,.72);
  font-weight: 700;
  line-height: 1.55;
  text-align:center;
}

/* Reward */
.fx-apx-reward{
  width: min(860px, 100%);
  margin: 8px auto 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(16,183,127,.30), rgba(16,183,127,.14));
  border: 1px solid rgba(16,183,127,.36);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
  padding: 14px 16px;
  backdrop-filter: blur(12px);
}
.fx-apx-reward-title{
  text-align:center;
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(234,255,247,.92);
  margin-bottom: 10px;
}
.fx-apx-reward-items{
  display:flex;
  justify-content:center;
  gap: 22px;
  flex-wrap: wrap;
}
.fx-apx-reward-item{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 850;
  color: rgba(234,255,247,.92);
}
.fx-apx-check{
  width: 22px; height: 22px;
  border-radius: 999px;
  display:grid; place-items:center;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.fx-apx-check svg{ width: 14px; height: 14px; fill: #fff; }

.fx-apx-stage{
  text-align:center;
  font-weight: 950;
  opacity: .92;
  margin: 14px 0 12px;
  font-size: var(--fx-stageFont);
  color: rgba(234,255,247,.86);
}

/* Grid */
.fx-apx-grid{
  display:grid;
  gap: 0;
  border-radius: 18px;
  overflow: auto;
  max-height: var(--fx-cardMaxH);
}
.fx-apx-colhead{
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height: 92px;
  gap: 10px;
}
.fx-apx-colhead:first-child{ background: rgba(255,255,255,.00); }

.fx-apx-coltop-spacer,.fx-apx-crown{height:32px;display:flex;align-items:center;justify-content:center}
.fx-apx-crown svg{display:block}

/* Column connector (1---2---3...) */
.fx-apx-connector-spacer{height:34px;}
.fx-apx-connector-row{height:34px;display:flex;align-items:center;justify-content:center;}
.fx-apx-connector-track{position:relative;width:100%;height:34px;display:grid;grid-template-columns:repeat(var(--fx-colCount,2),minmax(0,1fr));align-items:center;}
.fx-apx-connector-linebg{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:2px;border-radius:2px;background:rgba(255,255,255,.14);}
.fx-apx-connector-node{position:relative;z-index:1;width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;justify-self:center;}
.fx-apx-connector-node span{font-weight:950;font-size:12px;line-height:1;color:rgba(255,255,255,.92)}

.fx-apx-stepper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  margin-bottom: 10px;
  height: 41px;
}
.fx-apx-dot{
  width: 26px; height: 26px;
  border-radius: 999px;
  display:grid; place-items:center;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 950;
  font-size: 12px;
}
.fx-apx-line{
  width: 110px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.fx-apx-coltitle{
  text-align:center;
  font-weight: 950;
  font-size: 22px;
  margin-bottom: 0;
  min-height: 26px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fx-apx-colsub{
  text-align:center;
  color: rgba(234,255,247,.86);
  font-weight: 900;
}

.fx-apx-crown{
  display:flex;
  justify-content:center;
  margin-bottom: 0;
  opacity: .96;
  height: 41px;
  align-items:center;
}
.fx-apx-crown svg{ width: 22px; height: 22px; fill: var(--fx-accent); filter: drop-shadow(0 6px 12px rgba(16,183,127,.18)); }

.fx-apx-coltop-spacer{height:41px;}

.fx-apx-row{ display: contents; }
.fx-apx-cell{
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.fx-apx-label{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(234,255,247,.62);
  font-weight: 900;
}
.fx-apx-info{
  width: 18px; height: 18px;
  display:grid; place-items:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.70);
  font-size: 12px;
  font-weight: 950;
}
.fx-apx-val{
  text-align:center;
  font-weight: 950;
  color: rgba(234,255,247,.92);
}

/* Bottom */
.fx-apx-bottom{
  display:flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}

.fx-btn-align-left .fx-apx-bottom{justify-content:flex-start;}
.fx-btn-align-left .fx-apx-btn{margin-left:0;}
.fx-btn-align-right .fx-apx-bottom{justify-content:space-between;}
.fx-btn-align-right .fx-apx-btn{margin-left:auto;}
.fx-btn-align-center-fixed .fx-apx-bottom{flex-direction:column; align-items:center; gap:14px;}
.fx-btn-align-center-fixed .fx-apx-btn{width:auto; margin-left:auto; margin-right:auto;}
.fx-btn-align-center .fx-apx-bottom{flex-direction:column; align-items:stretch;}
.fx-btn-align-center .fx-apx-btn{width:100%;}
.fx-apx-bottom-left{
  display:flex;
  gap: 22px;
  align-items: baseline;
  flex-wrap: wrap;
}
.fx-apx-small{
  color: rgba(234,255,247,.62);
  font-weight: 950;
}
.fx-apx-big{
  font-size: 46px;
  font-weight: 1000;
  letter-spacing: .3px;
}
.fx-apx-price{ display:flex; align-items: baseline; gap: 12px; }
.fx-apx-price .fx-apx-big{ font-size: 52px; }

.fx-apx-btn{
  appearance:none;
  border: 0;
  cursor: pointer;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--fx-btnBgFrom), var(--fx-btnBgTo));
  color: #fff;
  font-weight: 1000;
  box-shadow: var(--fx-btnShadow);
  min-width: 210px;
  text-align:center;
  transition: transform .14s ease, filter .2s ease, background .2s ease, color .2s ease;
}
.fx-apx-btn:hover{ transform: translateY(-1px); filter: var(--fx-btnHoverFilter); background: linear-gradient(180deg, var(--fx-btnHoverFrom), var(--fx-btnHoverTo)); color: var(--fx-btnHoverText); }

@media (max-width: 920px){
  .fx-apx-hide-mobile{ display:none; }
}
@media (max-width: 720px){
  .fx-apx-bottom{ flex-direction: column; align-items: stretch; }
  .fx-apx-btn{ width: 100%; }
}


.fx-scroll-off .fx-apx-card{overflow:visible; max-height:none; height:auto;}
.fx-scroll-off .fx-apx-grid{max-height:none; overflow:visible;}

.fx-scrollx-off .fx-apx-grid{overflow-x:hidden;}
.fx-scrolly-on .fx-apx-grid{overflow-y:auto;}


@media (max-width: 880px){
  .fx-apx-topbar{gap: 10px;}
  .fx-apx-pill{padding: 9px 12px;}
  .fx-apx-price .fx-apx-big{font-size: 44px;}
}
@media (max-width: 767px){
  .fx-apx-topbar{flex-direction:column; align-items:stretch; justify-content:flex-start; gap: 10px;}
  .fx-apx-pillgroup{width:100%; overflow:hidden; flex-wrap:wrap; justify-content:center; border-radius:var(--fx-pillGroupRadius);}
  .fx-apx-indicator{display:none;}
  .fx-apx-connector{display:none;}
  .fx-apx-pill{min-width:0; padding: 10px 12px;font-size: 11px;}
  .fx-apx-pillgroup[data-pillgroup="tab"] .fx-apx-pill,
  .fx-apx-pillgroup[data-pillgroup="subtab"] .fx-apx-pill{flex:1 1 calc(50% - var(--fx-pillGap));}
  .fx-apx-pillgroup[data-pillgroup="plan"] .fx-apx-pill{flex:1 1 calc(33.333% - var(--fx-pillGap));}
  .fx-apx-pill[aria-selected="true"]::before{content:"";position:absolute;inset:0;border-radius:var(--fx-pillRadius);background:linear-gradient(180deg, var(--fx-pillActiveFrom), var(--fx-pillActiveTo));box-shadow:inset 0 0 0 1px rgba(16,183,127,.35), var(--fx-pillActiveShadow);z-index:-1;}
  .fx-apx-reward-items{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;justify-items:start;}
  .fx-apx-reward-item{justify-content:flex-start;}
  .fx-apx-inner{padding: 18px 14px 12px;}
  .fx-apx-coltitle{font-size:18px;}
  .fx-apx-cell{padding: 12px 14px;}
  .fx-apx-big{font-size:40px;}
  .fx-apx-price .fx-apx-big{font-size:44px;}
}

/* Mobile cards layout (when JS renders .fx-apx-card--cards) */
.fx-apx-card--cards .fx-apx-bottom{display:none;}
.fx-apx-mobile-meta{display:none;}
.fx-apx-btn--mobile{display:none;}
.fx-apx-mcards{display:none;}

@media (max-width: 767px){
  .fx-apx-card--cards .fx-apx-grid{display:none;}
  .fx-apx-card--cards .fx-apx-mobile-meta{display:flex;gap:12px;justify-content:space-between;align-items:stretch;margin:10px 2px 14px;}
  .fx-apx-card--cards .fx-apx-mobile-meta-item{flex:1;min-width:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:10px 12px;}
  .fx-apx-card--cards .fx-apx-mobile-meta-item span{display:block;color:var(--fx-muted);font-weight:800;font-size:12px;margin-bottom:4px;}
  .fx-apx-card--cards .fx-apx-mobile-meta-item strong{display:block;color:var(--fx-text);font-weight:1000;font-size:18px;}
  .fx-apx-card--cards .fx-apx-btn--mobile{display:flex;margin:0 2px 16px;justify-content:center;width:100%;}
  .fx-apx-card--cards .fx-apx-mcards{display:flex;flex-direction:column;gap:12px;}
  .fx-apx-mcard{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:12px;}
  .fx-apx-mcard-title{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--fx-text);font-weight:1000;font-size:14px;margin-bottom:10px;}
  .fx-apx-mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .fx-apx-mpair{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:10px;}
  .fx-apx-mk{color:var(--fx-muted);font-weight:900;font-size:12px;margin-bottom:6px;}
  .fx-apx-mv{color:var(--fx-text);font-weight:1000;font-size:14px;}
}