/*
==============================================================================
VELA VIP INVESTOR CLUB - PRODUCTION v1.4
------------------------------------------------------------------------------
VIP IS NOT INVESTMENT STUDIO.

Backdrop = room.
Instrument layer = verified trading truth.
Glass = communication / explanation / provenance.

LIVE STACK
----------
1. CCJ Uranium Ecosystem
2. Recent Trades
3. Alpaca Account Balance / Today's P&L
4. Closed Trades / Win Rate / Predictive Confidence

DESIGN RULE
-----------
The room is cinematic.
The instruments are BLACK GLASS.
The numbers must be readable from across the room.

TRUTH RULE
----------
NO RECEIPT, NO NUMBER.
==============================================================================
*/

html,
body.vip-page {
  margin: 0;
  min-height: 100%;
  background: #050505;
}

body.vip-page {
  overflow-x: hidden;
  color: #f7f0df;
}

.vip-proscenium {
  position: relative;
  width: min(100vw, 1536px);
  margin: 0 auto;
  background: #050505;
}

.vip-stage {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.vip-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vip-instrument-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}


/*
==============================================================================
1 - CCJ URANIUM ECOSYSTEM
==============================================================================
*/

.vip-ecosystem-group {
  position: absolute;
  top: 7.1%;
  left: 7.5%;
  right: 7.5%;
  z-index: 24;
}

.vip-ecosystem-title {
  margin: 0 0 .48rem;

  text-align: center;

  color: #f6c944;

  font:
    900 clamp(.68rem, .88vw, 1rem)/1
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  letter-spacing: .20em;

  text-shadow:
    0 0 16px rgba(246, 201, 68, .28);
}

.vip-ecosystem {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));

  overflow: hidden;

  border:
    1px solid rgba(246, 201, 68, .46);

  border-radius: 13px;

  background:
    linear-gradient(
      180deg,
      rgba(2, 3, 4, .985),
      rgba(0, 1, 2, .965)
    );

  box-shadow:
    0 16px 42px rgba(0, 0, 0, .62),
    inset 0 1px rgba(255, 239, 180, .05);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.vip-ecosystem__cell {
  position: relative;
  min-width: 0;

  padding:
    clamp(.46rem, .62vw, .68rem)
    clamp(.25rem, .48vw, .52rem)
    clamp(.52rem, .68vw, .74rem);

  text-align: center;

  border-right:
    1px solid rgba(246, 201, 68, .17);
}

.vip-ecosystem__cell:last-child {
  border-right: 0;
}

.vip-ecosystem__identity {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: .40rem;

  min-height: 1.65rem;
}

.vip-ecosystem__logo {
  display: block;

  width: clamp(20px, 1.7vw, 30px);
  height: clamp(20px, 1.7vw, 30px);

  object-fit: contain;

  filter:
    drop-shadow(0 2px 5px rgba(0, 0, 0, .62));
}

.vip-ecosystem__symbol {
  color: #f6c944;

  font:
    900 clamp(.72rem, .92vw, 1.05rem)/1
    system-ui,
    sans-serif;

  letter-spacing: .08em;
}

.vip-ecosystem__name {
  display: block;

  margin-top: .22rem;

  overflow: hidden;

  color:
    rgba(255, 250, 236, .76);

  font:
    700 clamp(.52rem, .62vw, .72rem)/1.15
    system-ui,
    sans-serif;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.vip-ecosystem__price {
  display: block;

  margin-top: .24rem;

  color: #fff9eb;

  font:
    850 clamp(.72rem, .90vw, 1.05rem)/1
    system-ui,
    sans-serif;

  font-variant-numeric: tabular-nums;
}

.vip-ecosystem__change {
  display: block;

  margin-top: .21rem;

  font:
    900 clamp(.60rem, .74vw, .86rem)/1
    system-ui,
    sans-serif;

  font-variant-numeric: tabular-nums;
}

.vip-ecosystem__cell.is-up
.vip-ecosystem__change {
  color: #79f7ac;
}

.vip-ecosystem__cell.is-down
.vip-ecosystem__change {
  color: #ff6767;
}

.vip-ecosystem__cell.is-flat
.vip-ecosystem__change {
  color: rgba(255, 250, 236, .72);
}

.vip-ecosystem__status {
  display: none;
}

.vip-ecosystem__cell.is-unavailable {
  opacity: .48;
}

.vip-ecosystem__cell.is-unavailable
.vip-ecosystem__status {
  background: #ff6767;
}


/*
==============================================================================
2 - RECENT TRADE TAPE
==============================================================================
*/

.vip-trade-tape {
  position: absolute;

  top: 22.2%;
  left: 16%;
  right: 16%;

  z-index: 27;

  box-sizing: border-box;

  padding:
    .56rem .72rem .78rem;

  border:
    1px solid rgba(246, 201, 68, .44);

  border-radius: 13px;

  background:
    linear-gradient(
      180deg,
      rgba(1, 2, 3, .99),
      rgba(0, 0, 0, .975)
    );

  box-shadow:
    0 18px 50px rgba(0, 0, 0, .68),
    inset 0 1px rgba(255, 245, 215, .04);

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.vip-trade-tape__title {
  margin-bottom: .50rem;

  text-align: center;

  color: #f6c944;

  font:
    900 clamp(.65rem, .82vw, .95rem)/1
    system-ui,
    sans-serif;

  letter-spacing: .16em;

  text-shadow:
    0 0 12px rgba(246, 201, 68, .18);
}

.vip-trade-tape__cards {
  display: grid;

  grid-template-columns:
    repeat(10, minmax(0, 1fr));

  gap: clamp(.20rem, .34vw, .40rem);

  min-height:
    clamp(4.5rem, 6.4vw, 6.9rem);

  align-items: stretch;
}

.vip-trade-tape__empty {
  grid-column: 1 / -1;

  display: flex;
  align-items: center;
  justify-content: center;

  color:
    rgba(255, 250, 236, .48);

  font:
    800 clamp(.60rem, .76vw, .88rem)/1
    system-ui,
    sans-serif;

  letter-spacing: .14em;
}

.vip-trade-card {
  position: relative;

  min-width: 0;

  box-sizing: border-box;

  padding:
    clamp(.40rem, .52vw, .58rem)
    clamp(.28rem, .38vw, .42rem);

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, .12);

  border-radius: 7px;

  background:
    linear-gradient(
      180deg,
      rgba(7, 9, 10, .99),
      rgba(1, 2, 3, .985)
    );

  box-shadow:
    inset 0 1px rgba(255, 255, 255, .03);
}

.vip-trade-card.is-win {
  border-color:
    rgba(60, 220, 104, .72);

  box-shadow:
    inset 0 0 20px rgba(30, 180, 70, .04),
    0 0 10px rgba(30, 180, 70, .08);
}

.vip-trade-card.is-loss {
  border-color:
    rgba(255, 72, 72, .74);

  box-shadow:
    inset 0 0 20px rgba(255, 50, 50, .04),
    0 0 10px rgba(255, 50, 50, .08);
}

.vip-trade-card__time {
  color:
    rgba(255, 250, 236, .68);

  font:
    700 clamp(.43rem, .52vw, .60rem)/1
    system-ui,
    sans-serif;

  white-space: nowrap;
}

.vip-trade-card__symbol {
  margin-top: .26rem;

  color: #fff8e6;

  font:
    900 clamp(.70rem, .88vw, 1.02rem)/1
    system-ui,
    sans-serif;

  letter-spacing: .04em;
}

.vip-trade-card__action {
  margin-top: .21rem;

  font:
    900 clamp(.53rem, .66vw, .76rem)/1
    system-ui,
    sans-serif;

  letter-spacing: .08em;
}

.vip-trade-card.is-win
.vip-trade-card__action {
  color: #79f7ac;
}

.vip-trade-card.is-loss
.vip-trade-card__action {
  color: #ff6767;
}

.vip-trade-card__pnl {
  margin-top: .30rem;

  font:
    900 clamp(.68rem, .88vw, 1rem)/1
    system-ui,
    sans-serif;

  font-variant-numeric: tabular-nums;
}

.vip-trade-card.is-win
.vip-trade-card__pnl {
  color: #79f7ac;
}

.vip-trade-card.is-loss
.vip-trade-card__pnl {
  color: #ff6767;
}

.vip-trade-card__prices {
  margin-top: .27rem;

  overflow: hidden;

  color:
    rgba(255, 250, 236, .62);

  font:
    700 clamp(.39rem, .48vw, .55rem)/1
    system-ui,
    sans-serif;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.vip-trade-card__prices span {
  color:
    rgba(246, 201, 68, .72);
}

@keyframes vip-trade-arrival {
  0% {
    transform:
      translateY(-4px)
      scale(1.025);

    filter: brightness(1.8);
  }

  35% {
    transform:
      translateY(0)
      scale(1.012);

    filter: brightness(1.35);
  }

  100% {
    transform: none;
    filter: none;
  }
}

.vip-trade-card.is-new {
  animation:
    vip-trade-arrival
    1.25s
    ease-out
    both;
}


/*
==============================================================================
3 - SCOREBOARD
==============================================================================
*/

.vip-scoreboard {
  position: absolute;

  top: 39.4%;
  left: 20%;
  right: 20%;

  z-index: 28;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap:
    clamp(.9rem, 1.55vw, 1.75rem);

  pointer-events: none;
}

.vip-score {
  position: relative;

  min-width: 0;

  box-sizing: border-box;

  padding:
    clamp(.78rem, 1.08vw, 1.12rem)
    clamp(.90rem, 1.35vw, 1.42rem)
    clamp(.78rem, 1.08vw, 1.12rem);

  text-align: center;

  border:
    1px solid rgba(246, 201, 68, .40);

  border-radius: 13px;

  background:
    linear-gradient(
      180deg,
      rgba(0, 1, 2, .99),
      rgba(0, 0, 0, .985)
    );

  box-shadow:
    0 20px 54px rgba(0, 0, 0, .72),
    inset 0 1px rgba(255, 245, 210, .04);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.vip-score__label {
  color: #f6c944;

  font:
    900 clamp(.68rem, .88vw, 1rem)/1
    system-ui,
    sans-serif;

  letter-spacing: .13em;

  text-shadow:
    0 0 12px rgba(246, 201, 68, .15);
}

.vip-score__value {
  margin-top:
    clamp(.32rem, .52vw, .52rem);

  color: #fff8e9;

  font:
    900 clamp(2.35rem, 4.05vw, 4.55rem)/.94
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  letter-spacing: -.045em;

  font-variant-numeric:
    tabular-nums;

  text-shadow:
    0 5px 24px rgba(0, 0, 0, .62);
}

.vip-score--account
.vip-score__value {
  color: #79f7ac;

  text-shadow:
    0 0 24px rgba(121, 247, 172, .18),
    0 5px 24px rgba(0, 0, 0, .62);
}

.vip-score.is-profit
.vip-score__value,
.vip-score.is-flat
.vip-score__value {
  color: #79f7ac;

  text-shadow:
    0 0 24px rgba(121, 247, 172, .18),
    0 5px 24px rgba(0, 0, 0, .62);
}

.vip-score.is-loss
.vip-score__value {
  color: #ff6767;

  text-shadow:
    0 0 24px rgba(255, 103, 103, .20),
    0 5px 24px rgba(0, 0, 0, .62);
}

.vip-score__meta {
  margin-top: .39rem;

  color:
    rgba(255, 250, 236, .62);

  font:
    800 clamp(.48rem, .60vw, .70rem)/1.2
    system-ui,
    sans-serif;

  letter-spacing: .07em;
}

.vip-score__downloads {
  display: flex;

  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: .56rem;

  margin-top: .52rem;

  pointer-events: auto;
}

.vip-score__downloads a,
.vip-score__downloads button {
  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  color:
    rgba(246, 201, 68, .82);

  font:
    800 clamp(.43rem, .54vw, .63rem)/1
    system-ui,
    sans-serif;

  letter-spacing: .07em;

  text-decoration: none;

  cursor: pointer;
}

.vip-score__downloads a:hover,
.vip-score__downloads button:hover,
.vip-score__downloads a:focus-visible,
.vip-score__downloads button:focus-visible {
  color: #fff0ad;
  outline: none;
}


/*
==============================================================================
4 - LOWER THREE
==============================================================================
*/

.vip-stats-row {
  position: absolute;

  top: 58%;
  left: 28%;
  right: 28%;

  z-index: 29;

  display: grid;

  grid-template-columns:
    1fr 1fr 1.55fr;

  gap:
    clamp(.42rem, .70vw, .76rem);

  pointer-events: none;
}

.vip-stat {
  min-width: 0;
  box-sizing: border-box;
  padding:
    clamp(.45rem,.66vw,.68rem)
    clamp(.42rem,.60vw,.64rem);
  text-align: center;
  border: 1px solid rgba(246,201,68,.27);
  border-radius: 9px;
  background:
    linear-gradient(
      180deg,
      rgba(2,4,5,.96),
      rgba(1,2,3,.92)
    );
  box-shadow:
    0 12px 34px rgba(0,0,0,.46),
    inset 0 1px rgba(255,245,210,.025);
}

.vip-stat__label {
  color: rgba(246,201,68,.88);
  font:
    820 clamp(.38rem,.48vw,.56rem)/1
    system-ui,
    sans-serif;
  letter-spacing: .10em;
}

.vip-stat__value {
  margin-top: .27rem;
  color: #79f7ac;
  font:
    850 clamp(.94rem,1.40vw,1.60rem)/1
    system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
}

.vip-stat:first-child .vip-stat__value {
  color: #fff8e9;
}

.vip-stat__meta {
  margin-top: .20rem;
  color: rgba(255,250,236,.46);
  font:
    730 clamp(.31rem,.38vw,.44rem)/1
    system-ui,
    sans-serif;
  letter-spacing: .08em;
}


/*
==============================================================================
RECEIPT DETAIL GLASS
==============================================================================
*/

.vip-trades-panel {
  position: absolute;
  top: 13%;
  left: 14%;
  right: 14%;
  z-index: 80;
  max-height: 70%;
  overflow: auto;
  box-sizing: border-box;
  padding: clamp(1rem,1.5vw,1.55rem);
  pointer-events: auto;
  border: 1px solid rgba(246,201,68,.60);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(4,7,9,.98),
      rgba(1,2,3,.96)
    );
  box-shadow: 0 34px 100px rgba(0,0,0,.76);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.vip-trades-panel[hidden] {
  display: none;
}

.vip-trades-panel__close {
  position: absolute;
  top: .65rem;
  right: .85rem;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.70);
  font-size: 1.6rem;
  cursor: pointer;
}

.vip-trades-panel__kicker {
  color: #f6c944;
  font:
    850 .68rem/1
    system-ui,
    sans-serif;
  letter-spacing: .22em;
}

.vip-trades-panel h2 {
  margin: .42rem 2.2rem .42rem 0;
  color: #fff8e3;
  font:
    780 clamp(1.1rem,2vw,1.85rem)/1
    system-ui,
    sans-serif;
}

.vip-trades-panel__summary {
  margin-bottom: .9rem;
  color: rgba(255,250,236,.68);
  font:
    700 clamp(.55rem,.68vw,.78rem)/1.35
    system-ui,
    sans-serif;
}

.vip-trades-panel__list {
  display: grid;
  gap: .34rem;
}

.vip-trades-panel__row {
  display: grid;
  grid-template-columns: 7rem 10rem 7rem 1fr;
  gap: .7rem;
  align-items: center;
  padding: .60rem .72rem;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: rgba(255,250,236,.68);
  font:
    650 .68rem/1.25
    system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
}

.vip-trades-panel__row.is-win {
  border-left: 3px solid #79f7ac;
}

.vip-trades-panel__row.is-loss {
  border-left: 3px solid #ff6767;
}

.vip-trades-panel__row.is-win strong {
  color: #79f7ac;
}

.vip-trades-panel__row.is-loss strong {
  color: #ff6767;
}


/*
==============================================================================
GLASS EXPLANATION
==============================================================================
*/

.vip-glass-explanation {
  position: absolute;
  top: 8%;
  right: 2.2%;
  z-index: 85;
  width: min(31rem,40%);
  box-sizing: border-box;
  pointer-events: auto;
  padding: 1.35rem 1.45rem 1.45rem;
  border: 1px solid rgba(246,201,68,.62);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(15,12,7,.95),
      rgba(3,3,3,.93)
    );
  box-shadow:
    0 28px 80px rgba(0,0,0,.72),
    0 0 34px rgba(246,201,68,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.vip-glass-explanation[hidden] {
  display: none;
}

.vip-glass-close {
  position: absolute;
  top: .65rem;
  right: .78rem;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-size: 1.55rem;
  cursor: pointer;
}

.vip-glass-kicker {
  margin: 0 0 .42rem;
  color: #f6c944;
  font:
    900 .66rem/1
    system-ui,
    sans-serif;
  letter-spacing: .20em;
}

.vip-glass-explanation h1 {
  margin: 0 2rem .65rem 0;
  color: #fff7e5;
  font:
    850 clamp(1.1rem,1.6vw,1.7rem)/1.08
    system-ui,
    sans-serif;
}

.vip-glass-explanation p {
  margin: 0;
  color: rgba(255,250,236,.72);
  font:
    650 clamp(.58rem,.70vw,.78rem)/1.5
    system-ui,
    sans-serif;
}


/*
==============================================================================
5 - UNBROKEN TRADING DAYS
==============================================================================
*/

.vip-trading-days {
  position: absolute;
  top: 70%;
  left: 14%;
  right: 14%;
  z-index: 31;
  box-sizing: border-box;
  padding: .58rem .72rem .76rem;
  border: 1px solid rgba(246,201,68,.40);
  border-radius: 13px;
  background:
    linear-gradient(
      180deg,
      rgba(1,2,3,.985),
      rgba(0,0,0,.965)
    );
  box-shadow:
    0 18px 50px rgba(0,0,0,.62),
    inset 0 1px rgba(255,245,215,.035);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  pointer-events: auto;
}

.vip-trading-days__title {
  text-align: center;
  color: #f6c944;
  font:
    900 clamp(.65rem,.82vw,.95rem)/1
    system-ui,
    sans-serif;
  letter-spacing: .16em;
  text-shadow: 0 0 12px rgba(246,201,68,.18);
}

.vip-trading-days__start {
  margin-top: .22rem;
  margin-bottom: .52rem;
  text-align: center;
  color: rgba(255,250,236,.52);
  font:
    750 clamp(.42rem,.52vw,.60rem)/1
    system-ui,
    sans-serif;
  letter-spacing: .10em;
}

.vip-trading-days__cards {
  display: grid;
  grid-template-columns: repeat(10,minmax(0,1fr));
  gap: clamp(.20rem,.34vw,.40rem);
  min-height: clamp(4.8rem,6.5vw,7.1rem);
}

.vip-day-card {
  position: relative;
  min-width: 0;
  padding:
    clamp(.46rem,.58vw,.64rem)
    clamp(.30rem,.40vw,.44rem);
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 8px;
  background:
    linear-gradient(
      180deg,
      rgba(8,9,10,.99),
      rgba(1,2,3,.985)
    );
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  cursor: pointer;
}

.vip-day-card.is-win {
  border-color: rgba(60,220,104,.80);
  box-shadow:
    inset 0 0 20px rgba(30,180,70,.035),
    0 0 11px rgba(30,180,70,.12);
}

.vip-day-card.is-loss {
  border-color: rgba(255,72,72,.78);
  box-shadow:
    inset 0 0 20px rgba(255,50,50,.035),
    0 0 11px rgba(255,50,50,.10);
}

.vip-day-card__day {
  color: #fff8e6;
  font:
    950 clamp(.64rem,.80vw,.94rem)/1
    system-ui,
    sans-serif;
  letter-spacing: .07em;
}

.vip-day-card__pnl {
  margin-top: .34rem;
  font:
    950 clamp(.73rem,.94vw,1.08rem)/1
    system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
}

.vip-day-card.is-win .vip-day-card__pnl {
  color: #79f7ac;
}

.vip-day-card.is-loss .vip-day-card__pnl {
  color: #ff6767;
}

.vip-day-card__meta {
  margin-top: .30rem;
  color: rgba(255,250,236,.58);
  font:
    760 clamp(.39rem,.47vw,.54rem)/1.25
    system-ui,
    sans-serif;
  letter-spacing: .05em;
}

.vip-day-card__date {
  margin-top: .22rem;
  color: rgba(246,201,68,.58);
  font:
    720 clamp(.34rem,.42vw,.48rem)/1
    system-ui,
    sans-serif;
}

.vip-trading-days__empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,250,236,.46);
  font:
    800 .68rem/1
    system-ui,
    sans-serif;
  letter-spacing: .12em;
}


/*
==============================================================================
DAY RECEIPT GLASS
==============================================================================
*/

.vip-day-panel {
  position: absolute;
  top: 10%;
  left: 12%;
  right: 12%;
  z-index: 95;
  max-height: 76%;
  overflow: auto;
  padding: clamp(1rem,1.5vw,1.55rem);
  pointer-events: auto;
  border: 1px solid rgba(121,247,172,.58);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(4,7,9,.985),
      rgba(1,2,3,.975)
    );
  box-shadow:
    0 34px 110px rgba(0,0,0,.82),
    0 0 36px rgba(121,247,172,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.vip-day-panel[hidden] {
  display: none;
}

.vip-day-panel__close {
  position: absolute;
  top: .65rem;
  right: .85rem;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-size: 1.6rem;
  cursor: pointer;
}

.vip-day-panel__kicker {
  color: #79f7ac;
  font:
    900 .68rem/1
    system-ui,
    sans-serif;
  letter-spacing: .20em;
}

.vip-day-panel h2 {
  margin: .45rem 2.2rem .25rem 0;
  color: #fff8e3;
  font:
    850 clamp(1.15rem,2vw,1.9rem)/1
    system-ui,
    sans-serif;
}

.vip-day-panel__summary {
  margin: .85rem 0 1rem;
  color: rgba(255,250,236,.72);
  font:
    750 clamp(.58rem,.72vw,.82rem)/1.4
    system-ui,
    sans-serif;
}

.vip-day-panel__trades {
  display: grid;
  gap: .34rem;
}

.vip-day-panel__trade {
  display: grid;
  grid-template-columns: 7rem 10rem 7rem 1fr;
  gap: .7rem;
  align-items: center;
  padding: .60rem .72rem;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: rgba(255,250,236,.68);
  font:
    650 .68rem/1.25
    system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
}

.vip-day-panel__trade.is-win {
  border-left: 3px solid #79f7ac;
}

.vip-day-panel__trade.is-loss {
  border-left: 3px solid #ff6767;
}

.vip-day-panel__trade.is-win strong {
  color: #79f7ac;
}

.vip-day-panel__trade.is-loss strong {
  color: #ff6767;
}


/*
==============================================================================
RESPONSIVE SAFETY
==============================================================================
*/

@media (max-width: 980px) {
  .vip-trades-panel,
  .vip-day-panel {
    left: 5%;
    right: 5%;
  }

  .vip-trades-panel__row,
  .vip-day-panel__trade {
    grid-template-columns: 1fr 1fr;
  }

  .vip-trading-days__cards {
    grid-template-columns: repeat(5,minmax(0,1fr));
  }
}

@media (max-width: 640px) {
  .vip-glass-explanation {
    width: auto;
    left: 4%;
    right: 4%;
  }

  .vip-trading-days__cards {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

/*
==============================================================================
UNBROKEN TRADING DAYS — READABILITY / RETURN PASS
==============================================================================
*/

.vip-trading-days__title {
  font-size: clamp(.82rem, 1.02vw, 1.18rem);
  letter-spacing: .18em;
}

.vip-trading-days__start {
  margin-top: .30rem;
  margin-bottom: .68rem;

  color: rgba(255,250,236,.72);

  font-size:
    clamp(.52rem, .64vw, .74rem);

  font-weight: 800;
  letter-spacing: .11em;
}

.vip-trading-days__cards {
  min-height:
    clamp(6.4rem, 8vw, 8.8rem);
}

.vip-day-card {
  padding:
    clamp(.62rem,.78vw,.86rem)
    clamp(.38rem,.48vw,.54rem);
}

.vip-day-card__day {
  font-size:
    clamp(.78rem, .94vw, 1.08rem);

  letter-spacing: .08em;
}

.vip-day-card__pnl {
  margin-top: .42rem;

  font-size:
    clamp(.98rem, 1.22vw, 1.40rem);
}

.vip-day-card__meta {
  margin-top: .40rem;

  color:
    rgba(255,250,236,.78);

  font-size:
    clamp(.49rem, .60vw, .69rem);

  font-weight: 800;
}

.vip-day-card__return {
  margin-top: .48rem;

  color: #79f7ac;

  font:
    950 clamp(.98rem,1.20vw,1.38rem)/1
    system-ui,
    sans-serif;

  font-variant-numeric:
    tabular-nums;

  text-shadow:
    0 0 12px rgba(121,247,172,.16);
}

.vip-day-card.is-loss
.vip-day-card__return {
  color: #ff6767;
}

.vip-day-card__return-label {
  margin-top: .18rem;

  color:
    rgba(255,250,236,.64);

  font:
    850 clamp(.38rem,.46vw,.53rem)/1
    system-ui,
    sans-serif;

  letter-spacing: .10em;
}

.vip-day-card__date {
  margin-top: .34rem;

  color:
    rgba(246,201,68,.72);

  font-size:
    clamp(.40rem,.48vw,.56rem);

  font-weight: 800;
}


/*
==============================================================================
DAY HISTORY — TRUE GLASS STAGE
==============================================================================
*/

.vip-day-trade-ribbon {
  position: absolute !important;
  inset: 0 !important;

  z-index: 250 !important;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding:
    8% 8% 10%;

  overflow: hidden;

  pointer-events: auto;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(9,12,14,.54),
      rgba(0,0,0,.90) 68%
    );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.vip-day-trade-ribbon[hidden] {
  display: none !important;
}

.vip-day-trade-ribbon::before {
  content: "";

  position: absolute;

  left: 8%;
  right: 8%;
  top: 27%;
  bottom: 27%;

  z-index: -1;

  border:
    1px solid rgba(246,201,68,.58);

  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      rgba(3,5,6,.985),
      rgba(0,0,0,.985)
    );

  box-shadow:
    0 36px 110px rgba(0,0,0,.88),
    0 0 32px rgba(246,201,68,.06);
}

.vip-day-trade-ribbon__close {
  position: absolute !important;

  top: 28.5% !important;
  right: 9.5% !important;

  z-index: 4;

  width: 2rem;
  height: 2rem;

  padding: 0;

  border: 0;

  background: transparent;

  color: rgba(255,255,255,.78);

  font:
    300 1.65rem/1
    system-ui,
    sans-serif;

  cursor: pointer;
}

.vip-day-trade-ribbon__close:hover {
  color: #ffffff;
}

.vip-day-trade-ribbon__title {
  position: relative;
  z-index: 3;

  margin-top: 0;

  color: #f6c944;

  text-align: center;

  font:
    900 clamp(.72rem,.92vw,1.05rem)/1
    system-ui,
    sans-serif;

  letter-spacing: .16em;
}

.vip-day-trade-ribbon__date {
  position: relative;
  z-index: 3;

  margin-top: .28rem;
  margin-bottom: .80rem;

  color:
    rgba(255,250,236,.62);

  text-align: center;

  font:
    750 clamp(.44rem,.54vw,.62rem)/1
    system-ui,
    sans-serif;

  letter-spacing: .10em;
}

.vip-day-trade-ribbon__cards {
  position: relative;
  z-index: 3;

  width: 82%;

  display: grid !important;

  grid-template-columns:
    repeat(9, minmax(0,1fr)) !important;

  gap:
    clamp(.24rem,.38vw,.46rem) !important;

  align-items: stretch;
}

.vip-day-trade-ribbon__cards
.vip-trade-card {
  min-width: 0;
}

/*
==============================================================================
6 - BLUE / YELLOW FORECAST GRAPH
==============================================================================
YELLOW = VELA FORECAST
BLUE   = CCJ ACTUAL PRICE
X AXIS = TIME (ET)
Y AXIS = CCJ PRICE (USD)
==============================================================================
*/

.vip-blue-yellow {
  position: absolute;
  top: 99.9%;
  left: 9%;
  right: 9%;
  z-index: 30;
  box-sizing: border-box;
  padding: .85rem 1rem 1rem;
  border: 1px solid rgba(246,201,68,.34);
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      rgba(2,4,6,.985),
      rgba(0,1,2,.98)
    );
  box-shadow:
    0 24px 70px rgba(0,0,0,.70),
    inset 0 1px rgba(255,255,255,.025);
  pointer-events: auto;
}

.vip-blue-yellow__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .52rem;
}

.vip-blue-yellow__title {
  color: #fff8e6;
  font:
    900 clamp(.70rem,.88vw,1rem)/1
    system-ui,
    sans-serif;
  letter-spacing: .12em;
}

.vip-blue-yellow__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: .40rem;
  font:
    850 clamp(.42rem,.50vw,.58rem)/1
    system-ui,
    sans-serif;
  letter-spacing: .08em;
}

.vip-blue-yellow__legend .is-yellow {
  color: #f6c944;
}

.vip-blue-yellow__legend .is-blue {
  color: #2ea8ff;
}

.vip-blue-yellow__legend .is-trade {
  color: #ff6767;
}

.vip-blue-yellow__now {
  color: rgba(255,250,236,.62);
  font:
    800 clamp(.43rem,.52vw,.60rem)/1
    system-ui,
    sans-serif;
  white-space: nowrap;
  letter-spacing: .07em;
}

.vip-blue-yellow__body {
  position: relative;
  height: clamp(16rem,24vw,27rem);
  padding: 0 0 1.25rem 2.25rem;
}

.vip-blue-yellow__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.vip-blue-yellow__xlabel {
  position: absolute;
  left: 50%;
  bottom: -.15rem;
  transform: translateX(-50%);
  color: rgba(255,250,236,.68);
  font:
    850 clamp(.46rem,.56vw,.64rem)/1
    system-ui,
    sans-serif;
  letter-spacing: .12em;
  pointer-events: none;
}

.vip-blue-yellow__ylabel {
  position: absolute;
  left: .10rem;
  top: 50%;
  transform:
    translateY(-50%)
    rotate(-90deg);
  transform-origin: center;
  color: rgba(255,250,236,.68);
  font:
    850 clamp(.46rem,.56vw,.64rem)/1
    system-ui,
    sans-serif;
  letter-spacing: .12em;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 980px) {
  .vip-blue-yellow {
    left: 4%;
    right: 4%;
  }

  .vip-blue-yellow__header {
    display: block;
  }

  .vip-blue-yellow__now {
    margin-top: .50rem;
  }

  .vip-blue-yellow__body {
    height: clamp(15rem,34vw,22rem);
  }
}

@media (max-width: 640px) {
  .vip-blue-yellow__legend {
    gap: .55rem;
  }

  .vip-blue-yellow__body {
    padding-left: 1.85rem;
  }

  .vip-blue-yellow__ylabel {
    left: -.30rem;
  }
}


/*
==============================================================================
RIBBON TYPOGRAPHY +2PX
RECENT TRADES + UNBROKEN TRADING DAYS
==============================================================================
*/

/* Ribbon headings */
.vip-trade-tape__title,
.vip-trading-days__title {
  font-size: calc(clamp(.65rem, .82vw, .95rem) + 2px);
}

/* Recent Trades cards */
.vip-trade-card__time {
  font-size: calc(clamp(.43rem, .52vw, .60rem) + 2px);
}

.vip-trade-card__symbol {
  font-size: calc(clamp(.70rem, .88vw, 1.02rem) + 2px);
}

.vip-trade-card__action {
  font-size: calc(clamp(.53rem, .66vw, .76rem) + 2px);
}

.vip-trade-card__pnl {
  font-size: calc(clamp(.72rem, .92vw, 1.06rem) + 2px);
}

.vip-trade-card__prices {
  font-size: calc(clamp(.38rem, .46vw, .54rem) + 2px);
}

/* Unbroken Trading Days */
.vip-trading-days__start {
  font-size: calc(clamp(.42rem, .52vw, .60rem) + 2px);
}

.vip-day-card__day {
  font-size: calc(clamp(.64rem, .80vw, .94rem) + 2px);
}

.vip-day-card__pnl {
  font-size: calc(clamp(.73rem, .94vw, 1.08rem) + 2px);
}

.vip-day-card__meta {
  font-size: calc(clamp(.39rem, .47vw, .54rem) + 2px);
}

.vip-day-card__date {
  font-size: calc(clamp(.34rem, .42vw, .48rem) + 2px);
}

.vip-day-card__return,
.vip-day-card__return-label {
  font-size: calc(1em + 2px);
}


/*
==============================================================================
RECENT TRADES — SEE ALL
==============================================================================
*/

.vip-trade-tape {
  pointer-events: auto;
}

.vip-trade-tape__header {
  position: relative;
  margin-bottom: .50rem;
}

.vip-trade-tape__header .vip-trade-tape__title {
  margin-bottom: 0;
}

.vip-trade-tape__see-all {
  position: absolute;
  top: 50%;
  right: .12rem;
  transform: translateY(-50%);

  margin: 0;
  padding: .20rem .28rem;

  border: 0;
  background: transparent;

  color: rgba(246,201,68,.76);

  font:
    850 clamp(.43rem,.54vw,.63rem)/1
    system-ui,
    sans-serif;

  letter-spacing: .10em;
  cursor: pointer;
}

.vip-trade-tape__see-all:hover,
.vip-trade-tape__see-all:focus-visible {
  color: #fff0ad;
  outline: none;
  text-shadow:
    0 0 10px rgba(246,201,68,.24);
}


/*
==============================================================================
RECENT TRADES — SEE ALL
==============================================================================
*/

.vip-trade-tape {
  pointer-events: auto;
}

.vip-trade-tape__header {
  position: relative;
  margin-bottom: .50rem;
}

.vip-trade-tape__header .vip-trade-tape__title {
  margin-bottom: 0;
}

.vip-trade-tape__see-all {
  position: absolute;
  top: 50%;
  right: .12rem;
  transform: translateY(-50%);

  margin: 0;
  padding: .20rem .28rem;

  border: 0;
  background: transparent;

  color: rgba(246,201,68,.76);

  font:
    850 clamp(.43rem,.54vw,.63rem)/1
    system-ui,
    sans-serif;

  letter-spacing: .10em;
  cursor: pointer;
}

.vip-trade-tape__see-all:hover,
.vip-trade-tape__see-all:focus-visible {
  color: #fff0ad;
  outline: none;
  text-shadow:
    0 0 10px rgba(246,201,68,.24);
}




/* =====================================================================

   VELA UNBROKEN TRADING DAYS — SINGLE ROW HISTORY VIEWPORT

   Ten cards visible. Historical days scroll horizontally.

   ===================================================================== */



.vip-trading-days__cards {

  --vela-day-gap: clamp(.20rem,.34vw,.40rem) !important;



  display: grid !important;

  grid-template-columns: none !important;

  grid-template-rows: 1fr !important;

  grid-auto-flow: column !important;



  grid-auto-columns:

    calc((100% - (9 * var(--vela-day-gap))) / 10) !important;



  gap: var(--vela-day-gap) !important;



  width: 100% !important;

  max-width: 100% !important;



  overflow-x: auto !important;

  overflow-y: hidden !important;



  scroll-snap-type: x mandatory;

  scroll-behavior: smooth;

  overscroll-behavior-x: contain;



  padding-bottom: .22rem;



  scrollbar-width: thin;

  scrollbar-color:

    rgba(246,201,68,.42)

    rgba(255,255,255,.04);

}



.vip-trading-days__cards > * {

  min-width: 0 !important;

  width: 100% !important;



  scroll-snap-align: start;

  scroll-snap-stop: normal;

}



.vip-trading-days__cards::-webkit-scrollbar {

  height: 6px;

}



.vip-trading-days__cards::-webkit-scrollbar-track {

  background: rgba(255,255,255,.04);

  border-radius: 999px;

}



.vip-trading-days__cards::-webkit-scrollbar-thumb {

  background: rgba(246,201,68,.42);

  border-radius: 999px;

}