.neo-panel{
  position:relative;
  border:1px solid var(--line);
  background:
    linear-gradient(145deg,rgba(10,27,40,.84),rgba(3,11,18,.78));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 48px rgba(0,0,0,.18);
  overflow:hidden;
}

.neo-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(rgba(87,229,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(87,229,255,.045) 1px,transparent 1px);
  background-size:28px 28px;
}

.neo-panel::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(87,229,255,.68),transparent);
  transform:scaleX(.24);
  opacity:.45;
  transition:.28s ease;
}
.neo-panel:hover::after{transform:scaleX(.94);opacity:.92}

.neo-panel-inner{position:relative;z-index:2;padding:22px}

.corner-mark{
  position:absolute;
  width:12px;height:12px;
  pointer-events:none;
  z-index:4;
}
.corner-mark.tl{top:0;left:0;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan)}
.corner-mark.br{right:0;bottom:0;border-right:2px solid rgba(127,139,255,.8);border-bottom:2px solid rgba(127,139,255,.8)}

.panel-kicker{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--cyan);
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.panel-kicker::before{
  content:"";
  width:22px;height:1px;
  background:var(--cyan);
  box-shadow:0 0 8px rgba(87,229,255,.65);
}

.account-core{
  min-height:210px;
  display:flex;
  align-items:flex-end;
}
.account-title{
  margin:13px 0 8px;
  font-size:clamp(1.8rem,3vw,3.25rem);
  letter-spacing:-.045em;
}
.account-sub{
  color:var(--muted);
  line-height:1.7;
  max-width:720px;
  font-size:.86rem;
}
.account-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.meta-cell{
  border:1px solid var(--line);
  background:rgba(6,18,28,.62);
  padding:9px 11px;
  font-size:.67rem;
  color:#b9cbd5;
}
.meta-cell b{color:#fff}

.energy-core{
  min-height:210px;
  display:grid;
  place-items:center;
}
.energy-device{
  position:relative;
  width:168px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
}
.energy-device::before,.energy-device::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(87,229,255,.30);
}
.energy-device::before{inset:0}
.energy-device::after{inset:18px;border-style:dashed;border-color:rgba(127,139,255,.42)}
.energy-core-center{
  width:100px;height:100px;
  border-radius:50%;
  display:grid;place-items:center;
  text-align:center;
  background:radial-gradient(circle,rgba(87,229,255,.16),rgba(22,140,255,.05) 58%,transparent 70%);
  border:1px solid var(--line2);
  box-shadow:inset 0 0 28px rgba(87,229,255,.09),0 0 30px rgba(22,140,255,.10);
}
.energy-core-center b{display:block;font-size:1.12rem}
.energy-core-center small{display:block;color:var(--cyan);font-size:.56rem;letter-spacing:.13em;margin-top:4px}

.metric{
  min-height:154px;
}
.metric-label{
  color:#9fb4c0;
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.metric-value{
  margin-top:24px;
  font-size:clamp(1.6rem,2.8vw,2.55rem);
  font-weight:900;
  letter-spacing:-.05em;
}
.metric-unit{
  color:var(--cyan);
  font-size:.64rem;
  font-weight:900;
  letter-spacing:.12em;
  margin-left:6px;
}
.metric-foot{
  margin-top:8px;
  color:var(--muted);
  font-size:.72rem;
}

.neo-action{
  min-height:58px;
  position:relative;
  border:1px solid var(--line);
  color:#dff8ff;
  background:rgba(7,18,28,.68);
  cursor:pointer;
  text-align:left;
  padding:12px 14px;
  transition:.22s ease;
  overflow:hidden;
}
.neo-action:hover{
  border-color:var(--line2);
  background:rgba(11,31,46,.86);
  transform:translateY(-2px);
}
.neo-action strong{
  display:block;
  font-size:.68rem;
  letter-spacing:.08em;
}
.neo-action small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.58rem;
}
.neo-action.disabled{
  cursor:not-allowed;
  opacity:.5;
  transform:none;
}

.section-title{
  margin:15px 0 0;
  font-size:1.36rem;
}
.section-copy{margin-top:8px;color:var(--muted);font-size:.78rem;line-height:1.65}

.qualification-row{
  display:grid;
  grid-template-columns:.75fr 1.3fr .8fr;
  gap:18px;
  align-items:center;
  margin-top:24px;
}
.big-rank{font-size:2rem;font-weight:900}
.big-rank span{display:block;color:var(--cyan);font-size:.66rem;letter-spacing:.12em;margin-top:6px}

.progress-rail{
  height:8px;
  background:#0b1a25;
  border:1px solid rgba(87,229,255,.14);
  position:relative;
}
.progress-rail > span{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--progress,0%);
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  box-shadow:0 0 14px rgba(87,229,255,.35);
}
.progress-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:.62rem;
  margin-top:9px;
}

.data-stack{display:grid;gap:10px;margin-top:18px}
.data-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid rgba(97,221,255,.10);
  color:#a9bec9;
  font-size:.73rem;
}
.data-row strong{color:#fff}

.earnings-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:20px;
  border:1px solid rgba(97,221,255,.12);
}
.earnings-cell{padding:18px}
.earnings-cell + .earnings-cell{border-left:1px solid rgba(97,221,255,.12)}
.earnings-cell b{display:block;font-size:1.7rem}
.earnings-cell small{display:block;margin-top:4px;color:var(--muted)}

.timeline{
  display:flex;
  align-items:center;
  gap:0;
  margin-top:26px;
}
.timeline-node{
  width:13px;height:13px;border-radius:50%;
  border:2px solid var(--line2);
  background:#07111a;
  position:relative;
  flex:0 0 13px;
}
.timeline-node.done{
  background:var(--cyan);
  box-shadow:0 0 14px rgba(87,229,255,.65);
}
.timeline-line{height:2px;flex:1;background:rgba(97,221,255,.18)}
.timeline-line.done{background:linear-gradient(90deg,var(--blue),var(--cyan))}
.timeline-labels{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:10px;
  color:var(--muted);
  font-size:.57rem;
  letter-spacing:.04em;
}

.milestone-ladder{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.milestone{
  border-top:2px solid rgba(97,221,255,.16);
  padding-top:12px;
}
.milestone.done{border-top-color:var(--cyan)}
.milestone.active{border-top-color:var(--violet-premium)}
.milestone strong{display:block;font-size:.82rem}
.milestone small{display:block;margin-top:4px;color:var(--muted);font-size:.62rem}

.action-center{display:grid;gap:10px;margin-top:18px}
.action-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:11px 0;
  border-bottom:1px solid rgba(97,221,255,.10);
}
.action-bullet{
  width:8px;height:8px;border-radius:50%;
  margin-top:5px;
  background:var(--cyan);
  box-shadow:0 0 9px rgba(87,229,255,.55);
}
.action-item.warning .action-bullet{background:var(--gold);box-shadow:0 0 9px rgba(255,192,77,.55)}
.action-item span{color:#b8cbd5;font-size:.72rem;line-height:1.5}

.ledger{
  margin-top:18px;
  width:100%;
  border-collapse:collapse;
  font-size:.68rem;
}
.ledger th,.ledger td{
  padding:11px 10px;
  border-bottom:1px solid rgba(97,221,255,.10);
  text-align:left;
}
.ledger th{
  color:#708897;
  text-transform:uppercase;
  font-size:.56rem;
  letter-spacing:.10em;
}
.ledger td{color:#bcd0da}
.ledger td strong{color:#fff}
.ledger-status{color:var(--green)!important}

.empty-state{
  padding:22px;
  color:var(--muted);
  border:1px dashed rgba(97,221,255,.14);
  margin-top:18px;
  text-align:center;
  font-size:.72rem;
}

@media(max-width:820px){
  .qualification-row{grid-template-columns:1fr}
  .earnings-split{grid-template-columns:1fr}
  .earnings-cell + .earnings-cell{border-left:0;border-top:1px solid rgba(97,221,255,.12)}
  .milestone-ladder{grid-template-columns:repeat(2,1fr)}
}


/* =========================================================
   PHASE 2 · PACKAGE TERMINAL
   Source-shaped to Premoneon PackageManager / PurchaseRouter
   ========================================================= */

.package-page-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin:12px 0 22px;
}

.package-page-heading h1{
  margin:16px 0 8px;
  font-size:clamp(2.4rem,5vw,5.2rem);
  line-height:.92;
  letter-spacing:-.065em;
}

.package-page-heading h1 em{
  color:var(--cyan);
  font-style:normal;
}

.package-page-heading p{
  max-width:760px;
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-size:.84rem;
}

.package-source-state{
  min-width:240px;
  padding:13px 14px;
  border:1px solid var(--line);
  background:rgba(6,18,28,.66);
}

.package-source-state small,
.terminal-caption{
  display:block;
  color:#627b89;
  font-size:.51rem;
  letter-spacing:.15em;
}

.package-source-state strong{
  display:block;
  margin-top:5px;
  color:var(--gold);
  font-size:.62rem;
  letter-spacing:.08em;
}

.package-qualification-panel{margin-bottom:18px}

.package-qualification{
  min-height:126px;
  display:grid;
  grid-template-columns:.8fr 1.5fr auto;
  align-items:center;
  gap:24px;
}

.qualification-package{
  display:block;
  margin-top:8px;
  font-size:1.5rem;
}

.package-qualification > div > small{
  color:var(--muted);
}

.qualification-terminal-data{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(97,221,255,.12);
}

.qualification-terminal-data > div{
  min-height:65px;
  padding:12px;
}

.qualification-terminal-data > div + div{
  border-left:1px solid rgba(97,221,255,.10);
}

.qualification-terminal-data small{
  display:block;
  color:#607987;
  font-size:.47rem;
  letter-spacing:.1em;
}

.qualification-terminal-data strong{
  display:block;
  margin-top:7px;
  font-size:.68rem;
}

.qualification-state{
  display:flex;
  align-items:center;
  gap:8px;
  color:#78909d;
  font-size:.58rem;
  letter-spacing:.11em;
}

.qualification-state-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#526976;
}

.qualification-state.is-active{color:var(--green)}
.qualification-state.is-active .qualification-state-dot{
  background:var(--green);
  box-shadow:0 0 10px rgba(117,241,122,.7);
}

.package-card-grid,
.package-empty-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:12px;
}

.package-card{
  min-height:300px;
  padding:20px;
  position:relative;
  border:1px solid var(--line);
  background:
    linear-gradient(145deg,rgba(9,25,38,.86),rgba(3,11,18,.82));
  transition:.24s ease;
  overflow:hidden;
}

.package-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent,rgba(87,229,255,.025),transparent);
  transform:translateX(-100%);
  transition:.55s ease;
}

.package-card:hover::before{transform:translateX(100%)}

.package-card:hover,
.package-card.selected{
  border-color:var(--line2);
  box-shadow:0 18px 42px rgba(0,0,0,.20),0 0 24px rgba(87,229,255,.04);
}

.package-card.selected{
  background:
    radial-gradient(circle at 50% 0%,rgba(87,229,255,.08),transparent 45%),
    linear-gradient(145deg,rgba(9,28,42,.92),rgba(3,11,18,.86));
}

.package-card-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--cyan);
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.12em;
}

.package-card-top b{color:#7992a0}

.package-price{
  margin-top:34px;
  font-size:2.15rem;
  font-weight:900;
  letter-spacing:-.055em;
}

.package-price small{
  color:var(--cyan);
  font-size:.62rem;
  letter-spacing:.1em;
}

.package-mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  margin-top:26px;
  background:rgba(97,221,255,.10);
  border:1px solid rgba(97,221,255,.10);
}

.package-mini-grid > div{
  min-height:55px;
  padding:10px;
  background:#061019;
}

.package-mini-grid small{
  display:block;
  color:#5f7886;
  font-size:.43rem;
  letter-spacing:.09em;
}

.package-mini-grid strong{
  display:block;
  margin-top:5px;
  font-size:.68rem;
}

.package-card button{
  width:100%;
  min-height:42px;
  margin-top:18px;
  border:1px solid var(--line2);
  color:#dffaff;
  background:rgba(7,22,33,.76);
  font-size:.61rem;
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
}

.package-card button:disabled{
  cursor:not-allowed;
  opacity:.48;
}

.package-card-skeleton{
  opacity:.72;
}

.source-notice{
  margin:8px 0 18px;
  padding:11px 13px;
  border-left:2px solid var(--gold);
  background:rgba(255,192,77,.035);
  color:#9db0bb;
  font-size:.67rem;
  line-height:1.6;
}

.source-notice.compact{margin-top:18px;margin-bottom:0}

.package-two-column{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:14px;
  margin:18px 0 14px;
}

.preview-head,
.history-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.preview-head h2{
  margin:7px 0 0;
  font-size:1.7rem;
}

.source-badge{
  display:inline-flex;
  min-height:25px;
  align-items:center;
  padding:0 8px;
  border:1px solid var(--line);
  color:#718b99;
  font-size:.49rem;
  letter-spacing:.1em;
}

.preview-primary-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:22px;
}

.preview-value{
  min-height:82px;
  padding:13px;
  border:1px solid rgba(97,221,255,.12);
  background:rgba(4,15,24,.58);
}

.preview-value small{
  display:block;
  color:#617b89;
  font-size:.46rem;
  letter-spacing:.1em;
}

.preview-value strong{
  display:block;
  margin-top:10px;
  font-size:1.15rem;
}

.preview-value em{
  color:var(--cyan);
  font-size:.52rem;
  font-style:normal;
}

.preview-breakdown{margin-top:13px}

.configuration-hash{
  margin-top:16px;
  padding:11px;
  border:1px dashed rgba(97,221,255,.14);
}

.configuration-hash small{
  display:block;
  color:#607987;
  font-size:.46rem;
  letter-spacing:.11em;
}

.configuration-hash code{
  display:block;
  margin-top:6px;
  color:#a9bdc8;
  font-size:.62rem;
  overflow-wrap:anywhere;
}

.sponsor-identity-core{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:72px;
  margin-top:22px;
  padding:12px;
  border:1px solid rgba(97,221,255,.12);
}

.sponsor-status-dot{
  width:14px;height:14px;border-radius:50%;
  background:#516875;
}

.sponsor-status-dot.valid{
  background:var(--green);
  box-shadow:0 0 13px rgba(117,241,122,.7);
}

.sponsor-identity-core small{
  display:block;
  color:#627a88;
  font-size:.46rem;
  letter-spacing:.1em;
}

.sponsor-identity-core strong{
  display:block;
  margin-top:5px;
  font-size:.72rem;
}

.purchase-execution-panel{
  margin-bottom:14px;
}

.purchase-stepper{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:24px;
  border:1px solid rgba(97,221,255,.12);
}

.purchase-step{
  min-height:70px;
  padding:12px;
  position:relative;
  background:rgba(4,15,24,.50);
}

.purchase-step + .purchase-step{
  border-left:1px solid rgba(97,221,255,.10);
}

.purchase-step span{
  display:block;
  color:#55717f;
  font-size:.48rem;
  letter-spacing:.1em;
}

.purchase-step strong{
  display:block;
  margin-top:8px;
  font-size:.61rem;
  letter-spacing:.07em;
}

.purchase-step.done{
  box-shadow:inset 0 -2px 0 var(--green);
}

.purchase-step.active{
  box-shadow:inset 0 -2px 0 var(--cyan);
  background:rgba(87,229,255,.035);
}

.purchase-form-grid{
  display:grid;
  grid-template-columns:.35fr .65fr;
  gap:10px;
  margin-top:16px;
}

.neo-field{
  display:block;
  padding:12px;
  border:1px solid rgba(97,221,255,.12);
  background:rgba(4,15,24,.50);
}

.neo-field.wide{grid-column:1/-1}

.neo-field > span{
  display:block;
  color:#6b8391;
  font-size:.48rem;
  letter-spacing:.11em;
}

.neo-field input{
  width:100%;
  margin-top:8px;
  border:0;
  border-bottom:1px solid rgba(97,221,255,.18);
  outline:0;
  background:transparent;
  color:#e7faff;
  padding:8px 0;
  font-size:.72rem;
}

.neo-field small{
  display:block;
  margin-top:7px;
  color:#5f7481;
  font-size:.55rem;
  line-height:1.45;
}

.purchase-gates{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:13px;
}

.purchase-gate{
  padding:11px;
  border:1px solid rgba(97,221,255,.10);
}

.purchase-gate span{
  display:block;
  color:#5d7684;
  font-size:.44rem;
  letter-spacing:.09em;
}

.purchase-gate strong{
  display:block;
  margin-top:5px;
  color:#a8bdc8;
  font-size:.61rem;
}

.transaction-command-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:14px;
}

.command-primary:disabled{
  opacity:.42;
  cursor:not-allowed;
}

.transaction-state{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:12px;
  margin-top:13px;
  padding:10px 12px;
  border-left:2px solid var(--cyan);
  background:rgba(87,229,255,.025);
}

.transaction-state span{
  color:#607987;
  font-size:.46rem;
  letter-spacing:.10em;
}

.transaction-state b{
  color:var(--cyan);
  font-size:.61rem;
}

.transaction-state small{
  color:#758d9a;
  font-size:.60rem;
}

.package-ledger{
  min-width:850px;
}

.table-scroll{overflow:auto}

@media(max-width:1100px){
  .package-card-grid,.package-empty-grid{grid-template-columns:repeat(2,1fr)}
  .package-two-column{grid-template-columns:1fr}
  .package-qualification{grid-template-columns:1fr}
  .qualification-terminal-data{grid-template-columns:repeat(2,1fr)}
  .purchase-gates{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .package-page-heading{align-items:flex-start;flex-direction:column}
  .package-source-state{min-width:0;width:100%}
  .package-card-grid,.package-empty-grid{grid-template-columns:1fr}
  .preview-primary-grid{grid-template-columns:1fr}
  .purchase-stepper{grid-template-columns:1fr}
  .purchase-step + .purchase-step{border-left:0;border-top:1px solid rgba(97,221,255,.10)}
  .purchase-form-grid,.purchase-gates,.transaction-command-row{grid-template-columns:1fr}
  .transaction-state{grid-template-columns:1fr}
  .qualification-terminal-data{grid-template-columns:1fr}
  .qualification-terminal-data > div + div{border-left:0;border-top:1px solid rgba(97,221,255,.10)}
}


/* =========================================================
   PHASE 3 · NETWORK CORE
   ReferralManager + GroupSalesManager
   ========================================================= */

.network-identity-panel{margin-bottom:14px}

.network-identity{
  min-height:210px;
  display:grid;
  grid-template-columns:260px 1fr;
  align-items:center;
  gap:30px;
}

.network-node-core{
  width:180px;
  height:180px;
  margin:auto;
  border-radius:50%;
  position:relative;
  display:grid;
  place-items:center;
  border:1px solid rgba(87,229,255,.22);
}

.network-node-core::before,
.network-node-core::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(87,229,255,.18);
}
.network-node-core::before{inset:15px;border-style:dashed}
.network-node-core::after{inset:34px;border-color:rgba(127,139,255,.30)}

.node-orbit{
  position:absolute;
  width:9px;height:9px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 14px rgba(87,229,255,.8);
  top:50%;left:50%;
}

.node-center{
  width:104px;height:104px;
  border-radius:50%;
  display:grid;
  place-content:center;
  text-align:center;
  background:radial-gradient(circle,rgba(87,229,255,.11),transparent 68%);
  border:1px solid rgba(87,229,255,.22);
  z-index:3;
}
.node-center small{font-size:.42rem;color:#607c8b;letter-spacing:.1em}
.node-center strong{font-size:.66rem;margin-top:5px}
.node-center em{font-style:normal;color:var(--cyan);font-size:.42rem;letter-spacing:.1em;margin-top:5px}

.network-identity-data{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(97,221,255,.12);
}
.network-identity-data > div{padding:16px;min-height:75px}
.network-identity-data > div + div{border-left:1px solid rgba(97,221,255,.10)}
.network-identity-data small{display:block;color:#607987;font-size:.45rem;letter-spacing:.1em}
.network-identity-data strong{display:block;margin-top:8px;font-size:.70rem}

.network-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:14px;
}

.network-two-column{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:14px;
  margin-bottom:14px;
}

.network-section-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}

.direct-node-grid,
.network-placeholder-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:20px;
}

.direct-node{
  min-height:72px;
  padding:12px;
  display:grid;
  grid-template-columns:32px 1fr auto;
  align-items:center;
  gap:10px;
  border:1px solid rgba(97,221,255,.12);
  background:rgba(5,16,25,.54);
}
.direct-node.placeholder{opacity:.58}
.direct-node-index{color:var(--cyan);font-size:.58rem;font-weight:900}
.direct-node small{display:block;color:#607987;font-size:.43rem;letter-spacing:.08em}
.direct-node strong{display:block;margin-top:4px;font-size:.64rem}
.direct-node > span{color:#718b99;font-size:.47rem;letter-spacing:.08em}

.upline-path{
  display:grid;
  gap:0;
  margin-top:22px;
}
.upline-row{
  min-height:52px;
  display:grid;
  grid-template-columns:38px 24px 1fr;
  align-items:center;
  gap:8px;
  position:relative;
}
.upline-level{
  color:var(--cyan);
  font-size:.55rem;
  font-weight:900;
}
.upline-row i{
  width:9px;height:9px;border-radius:50%;
  background:#0b1b27;
  border:1px solid var(--line2);
  position:relative;
}
.upline-row:not(:last-child) i::after{
  content:"";
  position:absolute;
  width:1px;
  height:43px;
  top:9px;
  left:3px;
  background:linear-gradient(var(--cyan),rgba(87,229,255,.08));
}
.upline-row strong{font-size:.66rem;color:#b9cdd7}

.network-ledger{min-width:980px}

.ledger-badge.neutral{
  color:#879ca7;
  border-color:rgba(135,156,167,.18);
  background:rgba(135,156,167,.04);
}

.network-domain-panel{margin-top:14px}
.network-domain-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:18px;
  border:1px solid rgba(97,221,255,.11);
  background:rgba(97,221,255,.10);
}
.network-domain-grid > div{
  padding:16px;
  background:#061019;
  min-height:135px;
}
.network-domain-grid small{display:block;color:#617b89;font-size:.44rem;letter-spacing:.10em}
.network-domain-grid strong{display:block;margin-top:8px;color:var(--cyan);font-size:.70rem}
.network-domain-grid p{margin:10px 0 0;color:#8299a6;font-size:.61rem;line-height:1.55}

@media(max-width:1100px){
  .network-identity{grid-template-columns:1fr}
  .network-identity-data{grid-template-columns:repeat(2,1fr)}
  .network-metrics{grid-template-columns:1fr}
  .network-two-column{grid-template-columns:1fr}
  .network-domain-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .network-identity-data{grid-template-columns:1fr}
  .network-identity-data > div + div{border-left:0;border-top:1px solid rgba(97,221,255,.10)}
  .direct-node-grid,.network-placeholder-grid{grid-template-columns:1fr}
  .network-domain-grid{grid-template-columns:1fr}
}


/* =========================================================
   PHASE 4 · EARNINGS CORE
   EarningsManager + RewardManager
   ========================================================= */

.earnings-metric-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:14px;
}

.earnings-maturity-core,
.earnings-unilevel-core{
  margin-bottom:14px;
}

.earnings-core-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}

.earnings-core-head h2{
  margin:7px 0 8px;
  font-size:1.5rem;
  letter-spacing:-.03em;
}

.earnings-core-head p{
  margin:0;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.65;
  max-width:760px;
}

.earnings-accounting-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:22px;
  border:1px solid rgba(97,221,255,.11);
  background:rgba(97,221,255,.10);
}

.earnings-accounting-grid > div{
  min-height:82px;
  padding:14px;
  background:#061019;
}

.earnings-accounting-grid small,
.unilevel-balance-core small{
  display:block;
  color:#627b89;
  font-size:.44rem;
  letter-spacing:.1em;
}

.earnings-accounting-grid strong,
.unilevel-balance-core strong{
  display:block;
  margin-top:9px;
  font-size:1rem;
}

.earnings-accounting-grid em,
.unilevel-balance-core em{
  color:var(--cyan);
  font-size:.48rem;
  font-style:normal;
}

.maturity-schedule-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:20px;
}

.maturity-schedule-card{
  min-height:310px;
  padding:17px;
  border:1px solid rgba(97,221,255,.13);
  background:linear-gradient(145deg,rgba(7,21,32,.78),rgba(3,11,18,.80));
}

.maturity-schedule-card.matured{
  border-color:rgba(117,241,122,.28);
  box-shadow:inset 0 -2px 0 rgba(117,241,122,.65);
}

.maturity-schedule-card.placeholder{opacity:.55}

.schedule-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#69818e;
  font-size:.50rem;
  letter-spacing:.09em;
}

.maturity-schedule-card.matured .schedule-top b{color:var(--green)}

.schedule-amount{
  margin-top:25px;
  font-size:1.9rem;
  font-weight:900;
  letter-spacing:-.05em;
}

.schedule-amount small{
  color:var(--cyan);
  font-size:.51rem;
}

.schedule-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  margin-top:17px;
  background:rgba(97,221,255,.09);
}

.schedule-split > div{padding:10px;background:#061019}
.schedule-split small{display:block;color:#607987;font-size:.42rem}
.schedule-split strong{display:block;margin-top:5px;font-size:.67rem}

.schedule-data{
  display:grid;
  gap:7px;
  margin-top:14px;
}

.schedule-data > div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.60rem;
}

.schedule-data span{color:#607987}
.schedule-data b{color:#b9ccd6}

.schedule-withdraw,
.maturity-schedule-card button{
  width:100%;
  min-height:40px;
  margin-top:17px;
  border:1px solid var(--line2);
  background:rgba(7,22,33,.70);
  color:#def8ff;
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.07em;
  cursor:pointer;
}

.maturity-schedule-card button:disabled{opacity:.38;cursor:not-allowed}

.unilevel-balance-core{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:22px;
  background:rgba(97,221,255,.10);
  border:1px solid rgba(97,221,255,.11);
}

.unilevel-balance-core > div{
  min-height:90px;
  padding:15px;
  background:#061019;
}

.unilevel-command{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:9px;
  margin-top:12px;
}

.earnings-ledger{min-width:1050px}

.earnings-boundary-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:18px;
  background:rgba(97,221,255,.10);
  border:1px solid rgba(97,221,255,.11);
}

.earnings-boundary-grid > div{
  padding:16px;
  background:#061019;
  min-height:128px;
}

.earnings-boundary-grid small{
  color:#627b89;
  font-size:.44rem;
  letter-spacing:.1em;
}

.earnings-boundary-grid strong{
  display:block;
  margin-top:8px;
  color:var(--cyan);
  font-size:.68rem;
}

.earnings-boundary-grid p{
  color:#8299a6;
  font-size:.60rem;
  line-height:1.55;
}

@media(max-width:1100px){
  .earnings-metric-grid{grid-template-columns:repeat(2,1fr)}
  .earnings-accounting-grid{grid-template-columns:repeat(2,1fr)}
  .maturity-schedule-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .earnings-metric-grid,
  .earnings-accounting-grid,
  .maturity-schedule-grid,
  .unilevel-balance-core,
  .earnings-boundary-grid,
  .unilevel-command{
    grid-template-columns:1fr;
  }

  .earnings-core-head{flex-direction:column}
}


/* =========================================================
   PHASE 5 · VESTING CORE
   VestingManager + VestingReadModule + VestingHistoryModule
   ========================================================= */

.vesting-metric-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:14px;
}

.vesting-release-core{
  margin-bottom:14px;
}

.vesting-release-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}

.vesting-release-head h2{
  margin:7px 0 8px;
  font-size:1.55rem;
}

.vesting-release-head p{
  margin:0;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.65;
  max-width:720px;
}

.vesting-total-core{
  min-width:260px;
  padding:14px;
  border:1px solid rgba(97,221,255,.15);
  background:rgba(6,18,28,.62);
}

.vesting-total-core small{
  color:#607987;
  font-size:.44rem;
  letter-spacing:.1em;
}

.vesting-total-core strong{
  display:block;
  margin-top:7px;
  font-size:1.4rem;
}

.vesting-total-core em{
  color:var(--cyan);
  font-size:.5rem;
  font-style:normal;
}

.vesting-command-row{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:9px;
  margin-top:17px;
}

.claim-selection-state{
  min-height:68px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:14px;
  border:1px solid rgba(97,221,255,.10);
}

.claim-selection-state small{
  color:#607987;
  font-size:.44rem;
  letter-spacing:.1em;
}

.claim-selection-state strong{
  color:var(--cyan);
  font-size:1.1rem;
}

.claim-selection-state span{
  color:#758d9a;
  font-size:.60rem;
}

.vesting-schedule-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:20px;
}

.vesting-schedule-card{
  padding:17px;
  border:1px solid rgba(97,221,255,.13);
  background:linear-gradient(145deg,rgba(7,21,32,.82),rgba(3,11,18,.82));
}

.vesting-schedule-card.claimable{
  border-color:rgba(87,229,255,.34);
  box-shadow:inset 0 -2px 0 rgba(87,229,255,.58);
}

.vesting-schedule-card.placeholder{opacity:.55}

.vesting-card-top{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
}

.vesting-card-top label input{display:none}

.vesting-card-top label span{
  display:block;
  width:14px;height:14px;
  border:1px solid var(--line2);
  cursor:pointer;
}

.vesting-card-top label input:checked + span{
  background:var(--cyan);
  box-shadow:0 0 10px rgba(87,229,255,.65);
}

.vesting-card-top small{
  display:block;
  color:#607987;
  font-size:.42rem;
  letter-spacing:.09em;
}

.vesting-card-top strong{
  display:block;
  margin-top:4px;
  font-size:.61rem;
}

.vesting-card-top > b{
  color:#78919f;
  font-size:.48rem;
  letter-spacing:.08em;
}

.vesting-card-value{
  margin-top:26px;
  font-size:1.8rem;
  font-weight:900;
  letter-spacing:-.05em;
}

.vesting-card-value small{
  color:var(--cyan);
  font-size:.48rem;
  letter-spacing:.08em;
}

.vesting-progress{
  height:5px;
  margin-top:14px;
  background:#0a1a25;
  overflow:hidden;
}

.vesting-progress span{
  display:block;
  height:100%;
  width:var(--vesting-progress,0%);
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  box-shadow:0 0 9px rgba(87,229,255,.35);
}

.vesting-card-data{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  margin-top:14px;
  background:rgba(97,221,255,.09);
}

.vesting-card-data > div{
  min-height:53px;
  padding:9px;
  background:#061019;
}

.vesting-card-data small{
  display:block;
  color:#607987;
  font-size:.40rem;
  letter-spacing:.07em;
}

.vesting-card-data strong{
  display:block;
  margin-top:5px;
  font-size:.62rem;
}

.vesting-time-grid{
  display:grid;
  gap:6px;
  margin-top:13px;
}

.vesting-time-grid > div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.57rem;
}

.vesting-time-grid span{color:#607987}
.vesting-time-grid b{color:#b7cbd5}

.release-counter{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(97,221,255,.10);
  font-size:.57rem;
}

.release-counter span{color:#607987}
.release-counter strong{color:var(--cyan)}

.vesting-claim-button,
.vesting-schedule-card > button{
  width:100%;
  min-height:41px;
  margin-top:15px;
  border:1px solid var(--line2);
  background:rgba(7,22,33,.74);
  color:#e1f9ff;
  font-size:.53rem;
  font-weight:900;
  letter-spacing:.07em;
  cursor:pointer;
}

.vesting-schedule-card button:disabled{
  opacity:.36;
  cursor:not-allowed;
}

.vesting-ledger{min-width:900px}

.vesting-boundary-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:18px;
  background:rgba(97,221,255,.10);
  border:1px solid rgba(97,221,255,.11);
}

.vesting-boundary-grid > div{
  min-height:130px;
  padding:16px;
  background:#061019;
}

.vesting-boundary-grid small{
  color:#607987;
  font-size:.43rem;
  letter-spacing:.1em;
}

.vesting-boundary-grid strong{
  display:block;
  margin-top:8px;
  color:var(--cyan);
  font-size:.68rem;
}

.vesting-boundary-grid p{
  color:#8299a6;
  font-size:.60rem;
  line-height:1.55;
}

@media(max-width:1100px){
  .vesting-metric-grid{grid-template-columns:repeat(2,1fr)}
  .vesting-schedule-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .vesting-metric-grid,
  .vesting-schedule-grid,
  .vesting-boundary-grid,
  .vesting-command-row{
    grid-template-columns:1fr;
  }

  .vesting-release-head{flex-direction:column}
  .vesting-total-core{min-width:0;width:100%}
  .claim-selection-state{grid-template-columns:1fr}
}


/* =========================================================
   PHASE 6 · SALES INCENTIVE CORE
   SalesIncentiveManager composite routed ABI
   ========================================================= */

.sales-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:14px;
}

.sales-program-panel{margin-bottom:14px}

.sales-program-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:20px;
}

.sales-program-card{
  padding:18px;
  border:1px solid rgba(97,221,255,.13);
  background:linear-gradient(145deg,rgba(7,22,33,.82),rgba(3,11,18,.82));
}

.sales-program-card.placeholder{opacity:.55}

.sales-program-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.sales-program-top small{
  display:block;
  color:#607987;
  font-size:.43rem;
  letter-spacing:.1em;
}

.sales-program-top strong{
  display:block;
  margin-top:4px;
  font-size:.65rem;
}

.sales-program-top > span{
  color:var(--cyan);
  font-size:.56rem;
  font-weight:900;
}

.sales-program-title{
  margin-top:22px;
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:-.025em;
}

.sales-policy-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  margin-top:15px;
  background:rgba(97,221,255,.09);
}

.sales-policy-grid > div{
  min-height:58px;
  padding:10px;
  background:#061019;
}

.sales-policy-grid small{
  display:block;
  color:#607987;
  font-size:.40rem;
  letter-spacing:.08em;
}

.sales-policy-grid strong{
  display:block;
  margin-top:5px;
  font-size:.61rem;
}

.sales-volume-core{
  margin-top:14px;
  padding:13px;
  border:1px solid rgba(97,221,255,.12);
}

.sales-volume-core small{
  display:block;
  color:#607987;
  font-size:.42rem;
  letter-spacing:.1em;
}

.sales-volume-core strong{
  display:block;
  margin-top:6px;
  font-size:1.35rem;
}

.sales-volume-core em{
  color:var(--cyan);
  font-size:.48rem;
  font-style:normal;
}

.sales-milestone-rail{
  display:grid;
  gap:0;
  margin-top:18px;
}

.sales-milestone{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  min-height:72px;
  position:relative;
}

.sales-milestone-node{
  display:flex;
  justify-content:center;
  position:relative;
}

.sales-milestone-node span{
  width:26px;height:26px;
  display:grid;place-items:center;
  border:1px solid rgba(97,221,255,.20);
  background:#07131d;
  color:#698493;
  font-size:.48rem;
  font-weight:900;
  z-index:2;
}

.sales-milestone:not(:last-child) .sales-milestone-node::after{
  content:"";
  position:absolute;
  top:26px;
  bottom:0;
  width:1px;
  background:rgba(97,221,255,.12);
}

.sales-milestone.done .sales-milestone-node span{
  background:var(--cyan);
  color:#021016;
  box-shadow:0 0 12px rgba(87,229,255,.45);
}

.sales-milestone.next .sales-milestone-node span{
  border-color:var(--violet-premium);
  color:var(--violet-premium);
}

.sales-milestone-content small{
  display:block;
  color:#708894;
  font-size:.48rem;
}

.sales-milestone-content strong{
  display:block;
  margin-top:4px;
  font-size:.67rem;
}

.sales-milestone-progress,
.qualification-progress{
  height:4px;
  margin-top:9px;
  background:#0b1b26;
  overflow:hidden;
}

.sales-milestone-progress span{
  display:block;
  height:100%;
  width:var(--sales-progress,0%);
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}

.sales-program-footer{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(97,221,255,.10);
  color:#6f8794;
  font-size:.48rem;
  letter-spacing:.07em;
}

.sales-program-footer b{color:var(--cyan)}

.qualification-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:20px;
}

.qualification-record{
  padding:17px;
  border:1px solid rgba(97,221,255,.13);
  background:linear-gradient(145deg,rgba(7,21,32,.80),rgba(3,11,18,.80));
}

.qualification-record-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#637d8b;
  font-size:.50rem;
}

.qualification-record-top b{
  color:#8398a3;
  letter-spacing:.07em;
}
.qualification-record-top b.good{color:var(--green)}
.qualification-record-top b.pending{color:var(--gold)}
.qualification-record-top b.bad{color:var(--red)}

.qualification-record-title{
  margin-top:18px;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.06em;
}

.qualification-record-volume{
  margin-top:18px;
}

.qualification-record-volume small{
  display:block;
  color:#607987;
  font-size:.42rem;
  letter-spacing:.09em;
}

.qualification-record-volume strong{
  display:block;
  margin-top:5px;
  font-size:1.25rem;
}

.qualification-record-volume em{
  color:var(--cyan);
  font-size:.46rem;
  font-style:normal;
}

.qualification-progress span{
  display:block;
  height:100%;
  width:var(--qualification-progress,0%);
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}

.qualification-record-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  margin-top:14px;
  background:rgba(97,221,255,.08);
}

.qualification-record-grid > div{
  min-height:54px;
  padding:9px;
  background:#061019;
}

.qualification-record-grid small,
.qualification-evidence small{
  display:block;
  color:#607987;
  font-size:.39rem;
  letter-spacing:.07em;
}

.qualification-record-grid strong{
  display:block;
  margin-top:5px;
  font-size:.60rem;
}

.qualification-evidence{
  display:grid;
  gap:7px;
  margin-top:12px;
}

.qualification-evidence > div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  border-bottom:1px solid rgba(97,221,255,.07);
}

.qualification-evidence code{
  color:#a7bcc7;
  font-size:.53rem;
}

.qualification-timeline{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto 1fr auto;
  align-items:center;
  gap:6px;
  margin-top:15px;
}

.qualification-timeline span{
  color:#526b79;
  font-size:.41rem;
  letter-spacing:.06em;
}

.qualification-timeline span.done{color:var(--cyan)}

.qualification-timeline i{
  height:1px;
  background:rgba(97,221,255,.12);
}

.sales-lifecycle-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1px;
  background:rgba(97,221,255,.09);
  border:1px solid rgba(97,221,255,.10);
}

.sales-lifecycle-grid > div{
  min-height:76px;
  padding:12px;
  background:#061019;
}

.sales-lifecycle-grid span{
  display:block;
  color:#607987;
  font-size:.41rem;
  letter-spacing:.08em;
}

.sales-lifecycle-grid strong{
  display:block;
  margin-top:8px;
  font-size:1rem;
}

.sales-latest-state{
  display:grid;
  grid-template-columns:auto auto auto auto auto auto;
  gap:12px;
  align-items:center;
  margin-top:11px;
  padding:10px 12px;
  border-left:2px solid var(--cyan);
  background:rgba(87,229,255,.025);
  font-size:.55rem;
}

.sales-latest-state span{color:#607987}
.sales-latest-state strong{color:#b9cdd7}

.sales-boundary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:18px;
  background:rgba(97,221,255,.09);
  border:1px solid rgba(97,221,255,.10);
}

.sales-boundary-grid > div{
  min-height:142px;
  padding:15px;
  background:#061019;
}

.sales-boundary-grid small{
  color:#607987;
  font-size:.42rem;
  letter-spacing:.09em;
}

.sales-boundary-grid strong{
  display:block;
  margin-top:8px;
  color:var(--cyan);
  font-size:.64rem;
}

.sales-boundary-grid p{
  color:#8299a6;
  font-size:.59rem;
  line-height:1.55;
}

.sales-period-warning{
  margin:14px 0 0;
}

@media(max-width:1100px){
  .sales-summary-grid{grid-template-columns:repeat(2,1fr)}
  .sales-program-grid,
  .qualification-card-grid{grid-template-columns:1fr}
  .sales-lifecycle-grid{grid-template-columns:repeat(3,1fr)}
  .sales-boundary-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .sales-summary-grid,
  .sales-lifecycle-grid,
  .sales-boundary-grid{
    grid-template-columns:1fr;
  }

  .sales-latest-state{
    grid-template-columns:1fr 1fr;
  }

  .qualification-record-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   PHASE 7 · SPECIAL ACCOUNT CORE
   SpecialAccountManager canonical user lifecycle
   ========================================================= */

.special-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:14px;
}

.special-lifecycle-panel{margin-bottom:14px}

.special-lifecycle-head,
.special-liability-head,
.special-token-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:22px;
}

.special-lifecycle-head h2{
  margin:7px 0 8px;
  font-size:1.5rem;
}

.special-lifecycle-head p{
  max-width:720px;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.65;
  margin:0;
}

.special-status-core{
  min-width:180px;
  padding:13px;
  border:1px solid rgba(97,221,255,.13);
  background:rgba(5,17,26,.62);
}

.special-status-core small{
  display:block;
  color:#627b89;
  font-size:.43rem;
  letter-spacing:.1em;
}

.special-status-core strong{
  display:block;
  margin-top:7px;
  font-size:.75rem;
}

.special-status-core.active strong{color:var(--cyan)}
.special-status-core.claimable strong{color:var(--gold)}
.special-status-core.good strong{color:var(--green)}
.special-status-core.bad strong{color:var(--red)}

.special-lifecycle-rail{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:22px;
  border:1px solid rgba(97,221,255,.11);
}

.special-life-step{
  min-height:64px;
  padding:11px;
  position:relative;
  background:rgba(4,15,24,.52);
}

.special-life-step + .special-life-step{
  border-left:1px solid rgba(97,221,255,.09);
}

.special-life-step span{
  display:block;
  color:#58717f;
  font-size:.43rem;
}

.special-life-step strong{
  display:block;
  margin-top:7px;
  color:#667f8d;
  font-size:.54rem;
  letter-spacing:.07em;
}

.special-life-step.done{
  box-shadow:inset 0 -2px 0 rgba(87,229,255,.34);
}

.special-life-step.done strong{color:#a9cbd7}

.special-life-step.current{
  background:rgba(87,229,255,.035);
  box-shadow:inset 0 -2px 0 var(--cyan);
}

.special-life-step.current strong{color:var(--cyan)}

.special-record-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:14px;
  background:rgba(97,221,255,.09);
  border:1px solid rgba(97,221,255,.10);
}

.special-record-grid > div{
  min-height:64px;
  padding:11px;
  background:#061019;
}

.special-record-grid small,
.special-token-grid small{
  display:block;
  color:#607987;
  font-size:.40rem;
  letter-spacing:.08em;
}

.special-record-grid strong,
.special-token-grid strong{
  display:block;
  margin-top:6px;
  font-size:.62rem;
}

.special-two-column{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}

.special-liability-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:20px;
  background:rgba(97,221,255,.09);
  border:1px solid rgba(97,221,255,.10);
}

.special-liability-grid > div{
  min-height:82px;
  padding:13px;
  background:#061019;
}

.special-liability-grid small{
  display:block;
  color:#607987;
  font-size:.41rem;
  letter-spacing:.09em;
}

.special-liability-grid strong{
  display:block;
  margin-top:7px;
  font-size:1rem;
}

.special-liability-grid em{
  color:var(--cyan);
  font-size:.45rem;
  font-style:normal;
}

.special-claim-gate{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:9px;
  margin-top:12px;
}

.special-claim-gate > div{
  min-height:70px;
  padding:12px;
  border:1px solid rgba(97,221,255,.10);
}

.special-claim-gate small{
  display:block;
  color:#607987;
  font-size:.41rem;
  letter-spacing:.09em;
}

.special-claim-gate strong{
  display:block;
  margin-top:5px;
  color:var(--cyan);
  font-size:.64rem;
}

.special-claim-gate span{
  display:block;
  margin-top:5px;
  color:#768d9a;
  font-size:.54rem;
  line-height:1.45;
}

.special-token-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  margin-top:20px;
  background:rgba(97,221,255,.09);
  border:1px solid rgba(97,221,255,.10);
}

.special-token-grid > div{
  min-height:62px;
  padding:11px;
  background:#061019;
}

.special-ledger{min-width:1050px}

.special-boundary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:18px;
  background:rgba(97,221,255,.09);
  border:1px solid rgba(97,221,255,.10);
}

.special-boundary-grid > div{
  min-height:142px;
  padding:15px;
  background:#061019;
}

.special-boundary-grid small{
  color:#607987;
  font-size:.41rem;
  letter-spacing:.09em;
}

.special-boundary-grid strong{
  display:block;
  margin-top:8px;
  color:var(--cyan);
  font-size:.63rem;
}

.special-boundary-grid p{
  color:#8299a6;
  font-size:.59rem;
  line-height:1.55;
}

.special-source-note{
  margin:14px 0 0;
}

@media(max-width:1100px){
  .special-summary-grid{grid-template-columns:repeat(2,1fr)}
  .special-two-column{grid-template-columns:1fr}
  .special-record-grid{grid-template-columns:repeat(2,1fr)}
  .special-boundary-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .special-summary-grid,
  .special-lifecycle-rail,
  .special-record-grid,
  .special-liability-grid,
  .special-token-grid,
  .special-boundary-grid,
  .special-claim-gate{
    grid-template-columns:1fr;
  }

  .special-life-step + .special-life-step{
    border-left:0;
    border-top:1px solid rgba(97,221,255,.09);
  }

  .special-lifecycle-head,
  .special-token-head{
    flex-direction:column;
  }

  .special-status-core{
    min-width:0;
    width:100%;
  }
}


/* =========================================================
   PHASE 8 · HISTORY CORE
   Canonical bounded HistoryViewer interface
   ========================================================= */

.history-overview-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  margin-top:18px;
  background:rgba(97,221,255,.09);
  border:1px solid rgba(97,221,255,.10);
}

.history-overview-cell{
  min-height:90px;
  padding:13px;
  background:#061019;
}

.history-overview-cell small{
  display:block;
  color:#607987;
  font-size:.40rem;
  letter-spacing:.09em;
}

.history-overview-cell strong{
  display:block;
  margin-top:8px;
  font-size:1.15rem;
}

.history-overview-cell span{
  display:block;
  margin-top:4px;
  color:#718895;
  font-size:.50rem;
}

.history-capture{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
  color:#607987;
  font-size:.48rem;
  letter-spacing:.08em;
}

.history-capture strong{color:#a9bdc8}

.history-filter-shell{
  margin-bottom:14px;
  border:1px solid var(--line);
  background:rgba(5,16,25,.62);
}

.history-tabs{
  display:flex;
  gap:0;
  overflow:auto;
  border-bottom:1px solid rgba(97,221,255,.10);
}

.history-tabs button{
  flex:0 0 auto;
  min-height:42px;
  padding:0 13px;
  border:0;
  border-right:1px solid rgba(97,221,255,.08);
  background:transparent;
  color:#6e8794;
  font-size:.51rem;
  font-weight:900;
  letter-spacing:.07em;
  cursor:pointer;
}

.history-tabs button.active{
  color:var(--cyan);
  background:rgba(87,229,255,.045);
  box-shadow:inset 0 -2px 0 var(--cyan);
}

.history-controls{
  display:grid;
  grid-template-columns:1fr 180px 130px;
  gap:8px;
  padding:10px;
}

.history-controls label{
  display:block;
  border:1px solid rgba(97,221,255,.10);
  padding:8px 10px;
}

.history-controls span{
  display:block;
  color:#5d7684;
  font-size:.39rem;
  letter-spacing:.09em;
}

.history-controls input,
.history-controls select{
  width:100%;
  margin-top:5px;
  border:0;
  outline:0;
  background:transparent;
  color:#d9f4fb;
  font-size:.61rem;
}

.history-controls select option{
  background:#061019;
}

.history-ledger-panel{margin-bottom:14px}

.history-ledger-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}

.history-record-list{
  display:grid;
  gap:7px;
  margin-top:18px;
}

.history-record{
  display:grid;
  grid-template-columns:86px 1fr;
  min-height:95px;
  border:1px solid rgba(97,221,255,.10);
  background:rgba(5,16,25,.52);
  transition:.18s ease;
}

.history-record:hover{
  border-color:rgba(97,221,255,.27);
  background:rgba(8,23,34,.68);
}

.history-record-index{
  display:grid;
  align-content:center;
  padding:12px;
  border-right:1px solid rgba(97,221,255,.09);
}

.history-record-index span{
  color:var(--cyan);
  font-size:.70rem;
  font-weight:900;
}

.history-record-index b{
  margin-top:5px;
  color:#607987;
  font-size:.41rem;
  letter-spacing:.08em;
}

.history-record-fields{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.history-record-field{
  min-height:47px;
  padding:10px;
}

.history-record-field small{
  display:block;
  color:#5e7785;
  font-size:.38rem;
  letter-spacing:.07em;
}

.history-record-field strong{
  display:block;
  margin-top:5px;
  color:#b5c9d3;
  font-size:.58rem;
  overflow-wrap:anywhere;
}

.history-pagination{
  display:grid;
  grid-template-columns:130px 1fr 130px;
  align-items:center;
  gap:12px;
  margin-top:16px;
}

.history-pagination button{
  min-height:38px;
  border:1px solid var(--line);
  background:rgba(7,20,30,.7);
  color:var(--cyan);
  font-size:.52rem;
  font-weight:900;
  cursor:pointer;
}

.history-pagination button:disabled{
  opacity:.3;
  cursor:not-allowed;
}

.history-pagination > div{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  color:#607987;
  font-size:.43rem;
}

.history-pagination strong{
  color:#b6cad4;
  font-size:.60rem;
}

.history-boundary-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:18px;
  background:rgba(97,221,255,.09);
  border:1px solid rgba(97,221,255,.10);
}

.history-boundary-grid > div{
  min-height:130px;
  padding:15px;
  background:#061019;
}

.history-boundary-grid small{
  color:#607987;
  font-size:.41rem;
  letter-spacing:.09em;
}

.history-boundary-grid strong{
  display:block;
  margin-top:8px;
  color:var(--cyan);
  font-size:.64rem;
}

.history-boundary-grid p{
  color:#8198a5;
  font-size:.59rem;
  line-height:1.55;
}

@media(max-width:1100px){
  .history-overview-grid{grid-template-columns:repeat(3,1fr)}
  .history-record-fields{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .history-overview-grid,
  .history-controls,
  .history-boundary-grid{
    grid-template-columns:1fr;
  }

  .history-record{
    grid-template-columns:1fr;
  }

  .history-record-index{
    border-right:0;
    border-bottom:1px solid rgba(97,221,255,.09);
  }

  .history-record-fields{
    grid-template-columns:1fr;
  }

  .history-pagination{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   PHASE 9 · FORENSIC CORE
   Canonical IForensicViewer coverage
   ========================================================= */

.forensic-query-panel{margin-bottom:14px}

.forensic-query-grid{
  display:grid;
  grid-template-columns:.7fr 1fr 260px;
  gap:9px;
  margin-top:18px;
  align-items:stretch;
}

.neo-field select{
  width:100%;
  margin-top:8px;
  padding:8px 0;
  border:0;
  border-bottom:1px solid rgba(97,221,255,.18);
  outline:0;
  color:#e7faff;
  background:transparent;
  font-size:.72rem;
}

.neo-field select option{background:#061019}

.forensic-run{min-height:100%}

.forensic-query-status{
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:12px;
  align-items:center;
  margin-top:11px;
  padding:10px 12px;
  border-left:2px solid var(--cyan);
  background:rgba(87,229,255,.025);
}

.forensic-query-status span{
  color:#607987;
  font-size:.44rem;
  letter-spacing:.1em;
}
.forensic-query-status strong{
  color:var(--cyan);
  font-size:.58rem;
}
.forensic-query-status small{
  color:#758d9a;
  font-size:.57rem;
}

.forensic-empty{
  min-height:300px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:12px;
  color:#6f8794;
  text-align:center;
}

.forensic-empty strong{
  color:#a6bbc6;
  font-size:.69rem;
  letter-spacing:.11em;
}

.forensic-empty span{
  max-width:500px;
  font-size:.62rem;
  line-height:1.6;
}

.forensic-reticle{
  width:92px;height:92px;border-radius:50%;
  border:1px solid rgba(87,229,255,.22);
  position:relative;
}

.forensic-reticle::before,
.forensic-reticle::after{
  content:"";
  position:absolute;
  background:rgba(87,229,255,.32);
}

.forensic-reticle::before{
  width:130px;height:1px;left:-20px;top:45px;
}
.forensic-reticle::after{
  width:1px;height:130px;top:-20px;left:45px;
}

.forensic-result-panel{margin-bottom:14px}

.forensic-result-head{
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:flex-start;
}

.forensic-result-head h2{
  margin:7px 0 0;
  font-size:1.5rem;
}

.forensic-integrity{
  min-width:180px;
  padding:12px;
  border:1px solid rgba(97,221,255,.13);
  background:rgba(5,17,26,.58);
}

.forensic-integrity small{
  display:block;
  color:#607987;
  font-size:.40rem;
  letter-spacing:.09em;
}

.forensic-integrity strong{
  display:block;
  margin-top:6px;
  font-size:.70rem;
}

.forensic-integrity.complete strong{color:var(--green)}
.forensic-integrity.incomplete strong{color:var(--gold)}

.forensic-xray{
  position:relative;
  display:grid;
  gap:0;
  margin-top:26px;
  padding-left:20px;
}

.forensic-xray::before{
  content:"";
  position:absolute;
  left:29px;top:17px;bottom:17px;
  width:1px;
  background:linear-gradient(var(--cyan),rgba(87,229,255,.10));
}

.forensic-node{
  min-height:118px;
  display:grid;
  grid-template-columns:20px 1fr auto;
  gap:14px;
  position:relative;
}

.forensic-node-signal{
  position:relative;
  z-index:2;
}

.forensic-node-signal i{
  display:block;
  width:19px;height:19px;border-radius:50%;
  border:2px solid #5c7482;
  background:#07131d;
  margin-top:11px;
}

.forensic-node.verified .forensic-node-signal i{
  border-color:var(--green);
  background:var(--green);
  box-shadow:0 0 13px rgba(117,241,122,.55);
}

.forensic-node.failed .forensic-node-signal i{
  border-color:var(--red);
  background:var(--red);
  box-shadow:0 0 13px rgba(255,107,122,.40);
}

.forensic-node-body{
  margin-bottom:10px;
  padding:13px 14px;
  border:1px solid rgba(97,221,255,.11);
  background:rgba(5,16,25,.62);
}

.forensic-node-body > small{
  display:block;
  color:#607987;
  font-size:.40rem;
  letter-spacing:.1em;
}

.forensic-node-body > strong{
  display:block;
  margin-top:5px;
  color:#d4edf5;
  font-size:.68rem;
  letter-spacing:.04em;
}

.forensic-node-detail{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:12px;
  padding-top:7px;
  margin-top:7px;
  border-top:1px solid rgba(97,221,255,.07);
  font-size:.54rem;
}

.forensic-node-detail span{color:#607987}
.forensic-node-detail b{
  color:#a8bec8;
  font-weight:600;
  overflow-wrap:anywhere;
}

.forensic-node-state{
  min-width:78px;
  padding-top:15px;
  color:#6d8592;
  font-size:.44rem;
  letter-spacing:.08em;
}
.forensic-node.verified .forensic-node-state{color:var(--green)}
.forensic-node.failed .forensic-node-state{color:var(--red)}

.forensic-check-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-top:10px;
}

.forensic-check{
  min-height:62px;
  padding:10px;
  border:1px solid rgba(97,221,255,.10);
}

.forensic-check span{
  display:block;
  color:#607987;
  font-size:.39rem;
  letter-spacing:.07em;
}
.forensic-check strong{
  display:block;
  margin-top:7px;
  color:#8299a6;
  font-size:.58rem;
}
.forensic-check.verified strong{color:var(--green)}
.forensic-check.failed strong{color:var(--red)}
.forensic-check.neutral strong{color:var(--cyan)}

.forensic-capture{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid rgba(97,221,255,.08);
  font-size:.48rem;
}

.forensic-capture span{color:#607987}
.forensic-capture strong{color:#b6cbd5}

.forensic-completeness-note{margin-top:14px;margin-bottom:0}

.forensic-coverage-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:18px;
  background:rgba(97,221,255,.09);
  border:1px solid rgba(97,221,255,.10);
}

.forensic-coverage-grid > div{
  min-height:145px;
  padding:15px;
  background:#061019;
}

.forensic-coverage-grid small{
  font-size:.40rem;
  letter-spacing:.09em;
  color:#607987;
}

.forensic-coverage-grid.supported small{color:var(--green)}
.forensic-coverage-grid .supported small{color:var(--green)}
.forensic-coverage-grid .future small{color:var(--gold)}

.forensic-coverage-grid strong{
  display:block;
  margin-top:8px;
  color:var(--cyan);
  font-size:.66rem;
}

.forensic-coverage-grid p{
  color:#8198a5;
  font-size:.59rem;
  line-height:1.55;
}

@media(max-width:1100px){
  .forensic-query-grid{grid-template-columns:1fr 1fr}
  .forensic-run{grid-column:1/-1}
  .forensic-check-grid{grid-template-columns:repeat(2,1fr)}
  .forensic-coverage-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .forensic-query-grid,
  .forensic-check-grid,
  .forensic-coverage-grid{
    grid-template-columns:1fr;
  }

  .forensic-run{grid-column:auto}
  .forensic-result-head{flex-direction:column}
  .forensic-integrity{width:100%;min-width:0}
  .forensic-node{grid-template-columns:20px 1fr}
  .forensic-node-state{display:none}
  .forensic-node-detail{grid-template-columns:1fr}
  .forensic-query-status{grid-template-columns:1fr}
}

/* === PREMONEON ACTION CENTER NOTICE PATCH START === */

/*
 * Dashboard Action Center
 *
 * Explicit button reset is important because .action-item is rendered
 * as a <button>. Without these rules the browser/default button surface
 * can appear as a bright white rectangle.
 */

.action-center {
    display: grid;
    gap: 10px;
}

.action-center .action-item {
    appearance: none;
    -webkit-appearance: none;

    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;

    border: 1px solid rgba(61, 226, 255, 0.22);
    border-radius: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(13, 44, 57, 0.72) 0%,
            rgba(7, 25, 35, 0.86) 55%,
            rgba(5, 18, 27, 0.92) 100%
        );

    color: rgba(221, 245, 250, 0.88);

    font: inherit;
    text-align: left;

    cursor: pointer;

    box-shadow:
        inset 3px 0 0 rgba(56, 224, 255, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    transition:
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
}

.action-center .action-item span {
    color: rgba(210, 239, 245, 0.82);
    font-size: 12px;
    line-height: 1.45;
}

.action-center .action-item .action-bullet {
    flex: 0 0 auto;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #46e6ff;

    box-shadow:
        0 0 7px rgba(70, 230, 255, 0.85),
        0 0 14px rgba(70, 230, 255, 0.32);
}

.action-center button.action-item:hover {
    border-color: rgba(70, 230, 255, 0.48);

    background:
        linear-gradient(
            90deg,
            rgba(16, 58, 73, 0.82) 0%,
            rgba(8, 31, 42, 0.92) 55%,
            rgba(5, 20, 30, 0.96) 100%
        );

    box-shadow:
        inset 3px 0 0 rgba(70, 230, 255, 0.9),
        0 0 18px rgba(29, 197, 225, 0.08);
}

.action-center button.action-item:active {
    transform: translateY(1px);
}

.action-center .action-item.warning {
    border-color: rgba(255, 188, 69, 0.30);

    background:
        linear-gradient(
            90deg,
            rgba(63, 43, 12, 0.60) 0%,
            rgba(31, 26, 14, 0.78) 55%,
            rgba(18, 19, 18, 0.90) 100%
        );

    box-shadow:
        inset 3px 0 0 rgba(255, 188, 69, 0.68);
}

.action-center .action-item.warning .action-bullet {
    background: #ffbc45;

    box-shadow:
        0 0 7px rgba(255, 188, 69, 0.75);
}

/* === PREMONEON ACTION CENTER NOTICE PATCH END === */


/* === PREMONEON DASHBOARD CORE ALIGNMENT START === */

/* ==========================================================
   QUALIFICATION CORE
   ========================================================== */

.dashboard-qualification {
    display: grid;

    grid-template-columns:
        190px
        minmax(0, 470px);

    column-gap: 32px;

    align-items: start;
    justify-content: start;

    width: 100%;

    margin-top: 18px;
}

.dashboard-qualification-rank {
    padding-top: 8px;
}

.dashboard-qualification-rank > strong {
    display: block;

    font-size: 2rem;
    font-weight: 900;
    line-height: 1.25;

    color: #f1f7f9;
}

.dashboard-qualification-rank > span {
    display: block;

    margin-top: 8px;

    color: var(--cyan);

    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
}


/*
 * This block is independent from generic .data-row.
 * Therefore no inherited right-alignment can affect it.
 */
.dashboard-qualification-facts {
    display: grid;

    width: 100%;
    max-width: 470px;

    border-top:
        1px solid rgba(92, 214, 235, .12);
}

.dashboard-qualification-fact {
    display: grid;

    grid-template-columns:
        185px
        minmax(0, 1fr);

    column-gap: 22px;

    align-items: center;

    min-height: 49px;

    border-bottom:
        1px solid rgba(92, 214, 235, .12);
}

.dashboard-qualification-fact > span {
    color: #9db2bd;

    font-size: .66rem;

    text-align: left;
}

.dashboard-qualification-fact > strong {
    color: #edf8fb;

    font-size: .69rem;
    font-weight: 800;

    text-align: left;

    margin: 0;

    white-space: nowrap;
}


/* ==========================================================
   FORENSIC CAPTURE — HUMAN READABLE DASHBOARD CONTEXT
   ========================================================== */

.dashboard-capture-grid {
    display: grid;

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

    gap: 1px;

    margin-top: 18px;

    background:
        rgba(97, 221, 255, .09);

    border:
        1px solid rgba(97, 221, 255, .11);
}

.dashboard-capture-item {
    min-height: 88px;

    padding: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 21, 32, .92),
            rgba(3, 11, 18, .96)
        );
}

.dashboard-capture-item > span {
    display: block;

    color: #607987;

    font-size: .48rem;
    letter-spacing: .08em;

    text-transform: uppercase;
}

.dashboard-capture-item > strong {
    display: block;

    margin-top: 10px;

    color: #e8f8fc;

    font-size: .72rem;
    line-height: 1.45;

    overflow-wrap: anywhere;
}


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

@media (max-width: 1100px) {

    .dashboard-capture-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {

    .dashboard-qualification {
        grid-template-columns: 1fr;

        row-gap: 22px;
    }

    .dashboard-qualification-facts {
        max-width: none;
    }

    .dashboard-qualification-fact {
        grid-template-columns:
            145px
            minmax(0, 1fr);
    }

    .dashboard-qualification-fact > strong {
        white-space: normal;
    }

    .dashboard-capture-grid {
        grid-template-columns: 1fr;
    }
}

/* === PREMONEON DASHBOARD CORE ALIGNMENT END === */


/* === QUALIFICATION CORE ABSOLUTE FINAL START === */

/*
 * Dashboard Qualification Core
 *
 * DESKTOP:
 *
 * PACKAGE #1          Active                YES
 * RANK 1              Purchase ID           2
 *                     Package Version       1
 *                     Qualified At          ...
 *                     Qualification Ends    ...
 *
 * Dedicated layout.
 * Isolated from generic .data-row CSS.
 */

.qualification-core-final {
    display: grid;
    grid-template-columns:
        minmax(170px, 0.48fr)
        minmax(360px, 1fr);

    align-items: start;
    column-gap: 42px;

    width: 100%;
    margin-top: 20px;
}


/* =========================================================
   LEFT — PACKAGE / RANK
   ========================================================= */

.qualification-core-identity {
    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 6px 0 0;
}

.qualification-core-identity > strong {
    display: block;

    margin: 0;
    padding: 0;

    color: #f2f8fa;

    font-size: 2rem;
    font-weight: 900;
    line-height: 1.05;

    white-space: nowrap;
}

.qualification-core-identity > span {
    display: block;

    margin-top: 10px;
    padding: 0;

    color: var(--cyan);

    font-size: .66rem;
    font-weight: 800;

    line-height: 1.2;
    letter-spacing: .12em;

    white-space: nowrap;
}


/* =========================================================
   RIGHT — QUALIFICATION FACT TABLE
   ========================================================= */

.qualification-core-table {
    display: grid;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    border-top:
        1px solid rgba(92, 214, 235, .14);
}


/* =========================================================
   CANONICAL ROW
   ========================================================= */

.qualification-core-row {
    display: grid;

    grid-template-columns:
        minmax(135px, 0.62fr)
        minmax(210px, 1fr);

    align-items: center;

    column-gap: 28px;

    width: 100%;
    min-width: 0;
    min-height: 50px;

    margin: 0;
    padding: 0;

    border-bottom:
        1px solid rgba(92, 214, 235, .12);
}


/* LABEL */

.qualification-core-row > span {
    display: block;

    min-width: 0;

    margin: 0;
    padding: 0;

    color: #9db2bd;

    font-size: .66rem;
    font-weight: 400;
    line-height: 1.4;

    text-align: left;
}


/* VALUE */

.qualification-core-row > strong {
    display: block;

    min-width: 0;

    margin: 0 !important;
    padding: 0;

    color: #edf8fb;

    font-size: .69rem;
    font-weight: 800;
    line-height: 1.4;

    text-align: right !important;
    justify-self: stretch !important;

    white-space: nowrap;
}


/* =========================================================
   MEDIUM SCREEN
   ========================================================= */

@media (max-width: 1100px) {

    .qualification-core-final {
        grid-template-columns:
            minmax(150px, .42fr)
            minmax(330px, 1fr);

        column-gap: 28px;
    }

    .qualification-core-row {
        grid-template-columns:
            125px
            minmax(190px, 1fr);

        column-gap: 18px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .qualification-core-final {
        display: block;
    }

    .qualification-core-identity {
        padding-top: 0;
        margin-bottom: 20px;
    }

    .qualification-core-identity > strong {
        white-space: normal;
    }

    .qualification-core-identity > span {
        margin-top: 8px;
    }

    .qualification-core-row {
        grid-template-columns:
            minmax(110px, .75fr)
            minmax(0, 1fr);

        column-gap: 14px;
    }

    .qualification-core-row > strong {
        text-align: right !important;
        white-space: normal;
    }
}

/* === QUALIFICATION CORE ABSOLUTE FINAL END === */


/* === PREMONEON GLOBAL WALLET CONFIRM START === */

/*
 * Shared wallet disconnect confirmation.
 * Used by every page consuming src/shared/shell.js.
 */

body.wallet-confirm-open {
    overflow: hidden;
}

.wallet-confirm-overlay[hidden] {
    display: none !important;
}

.wallet-confirm-overlay {
    position: fixed;
    inset: 0;

    z-index: 10000;

    display: grid;
    place-items: center;

    padding: 24px;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(27, 129, 159, .14),
            transparent 38%
        ),
        rgba(1, 5, 9, .82);

    backdrop-filter:
        blur(12px);

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

.wallet-confirm-dialog {
    position: relative;

    width: min(100%, 510px);

    padding: 34px;

    overflow: hidden;

    border:
        1px solid rgba(91, 221, 255, .22);

    background:
        linear-gradient(
            145deg,
            rgba(7, 22, 33, .985),
            rgba(2, 9, 15, .99)
        );

    box-shadow:
        0 32px 100px rgba(0, 0, 0, .62),
        inset 0 1px 0 rgba(255, 255, 255, .035);
}

.wallet-confirm-dialog::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .28;

    background-image:
        linear-gradient(
            rgba(87, 229, 255, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(87, 229, 255, .035) 1px,
            transparent 1px
        );

    background-size:
        24px 24px;
}

.wallet-confirm-dialog::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            transparent
        );

    opacity: .9;
}

.wallet-confirm-signal {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    margin-bottom: 22px;

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

    background:
        rgba(255, 74, 74, .055);

    transform:
        rotate(45deg);
}

.wallet-confirm-signal > span {
    display: block;

    width: 12px;
    height: 12px;

    border:
        2px solid rgba(255, 127, 127, .9);

    transform:
        rotate(-45deg);
}

.wallet-confirm-kicker {
    position: relative;
    z-index: 2;

    color: var(--cyan);

    font-size: .52rem;
    font-weight: 900;

    letter-spacing: .18em;
}

.wallet-confirm-title {
    position: relative;
    z-index: 2;

    margin:
        12px 0 0;

    color: #f0f8fb;

    font-size:
        clamp(1.35rem, 3vw, 2rem);

    line-height: 1.1;

    letter-spacing: .025em;
}

.wallet-confirm-description {
    position: relative;
    z-index: 2;

    max-width: 420px;

    margin:
        14px 0 0;

    color: #8aa2af;

    font-size: .72rem;
    line-height: 1.7;
}

.wallet-confirm-account {
    position: relative;
    z-index: 2;

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

    gap: 18px;

    margin-top: 24px;
    padding: 15px 17px;

    border:
        1px solid rgba(88, 218, 247, .13);

    background:
        rgba(4, 15, 23, .76);
}

.wallet-confirm-account > span {
    color: #667f8d;

    font-size: .48rem;
    font-weight: 800;

    letter-spacing: .12em;
}

.wallet-confirm-account > strong {
    color: #dffaff;

    font-size: .68rem;
    font-weight: 900;

    letter-spacing: .035em;
}

.wallet-confirm-note {
    position: relative;
    z-index: 2;

    margin-top: 14px;

    color: #617985;

    font-size: .58rem;
    line-height: 1.65;
}

.wallet-confirm-actions {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr 1.35fr;

    gap: 10px;

    margin-top: 27px;
}

.wallet-confirm-button {
    min-height: 48px;

    border:
        1px solid rgba(91, 221, 255, .18);

    background:
        rgba(7, 21, 30, .9);

    color: #a7bdc7;

    font: inherit;

    font-size: .58rem;
    font-weight: 900;

    letter-spacing: .09em;

    cursor: pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.wallet-confirm-button:hover {
    border-color:
        rgba(91, 221, 255, .48);

    background:
        rgba(10, 30, 42, .96);
}

.wallet-confirm-button:active {
    transform:
        translateY(1px);
}

.wallet-confirm-button:focus-visible {
    outline:
        1px solid var(--cyan);

    outline-offset:
        3px;
}

.wallet-confirm-button.danger {
    border-color:
        rgba(255, 104, 104, .30);

    color:
        #ffc2c2;

    background:
        linear-gradient(
            145deg,
            rgba(83, 21, 25, .40),
            rgba(32, 10, 14, .66)
        );
}

.wallet-confirm-button.danger:hover {
    border-color:
        rgba(255, 111, 111, .68);

    background:
        linear-gradient(
            145deg,
            rgba(109, 25, 30, .53),
            rgba(42, 11, 16, .80)
        );

    box-shadow:
        0 0 28px rgba(255, 76, 76, .08);
}

@media (max-width: 620px) {

    .wallet-confirm-overlay {
        padding: 16px;
    }

    .wallet-confirm-dialog {
        padding:
            27px 22px;
    }

    .wallet-confirm-account {
        display: block;
    }

    .wallet-confirm-account > strong {
        display: block;

        margin-top: 8px;
    }

    .wallet-confirm-actions {
        grid-template-columns:
            1fr;
    }
}

/* === PREMONEON GLOBAL WALLET CONFIRM END === */


/* =========================================================
   PREMONEON DASHBOARD — REFERRAL LINK CORE
   ========================================================= */

.dashboard-referral{
  width:100%;
  min-width:0;
  margin-top:20px;
}

.dashboard-referral-label{
  margin-bottom:7px;
  color:#78909d;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.dashboard-referral-value{
  width:100%;
  min-width:0;
  padding:11px 12px;

  border:1px solid rgba(97,221,255,.12);
  background:rgba(4,15,24,.58);

  color:#dff8ff;
  font-size:.68rem;
  font-weight:700;

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

  box-sizing:border-box;
}

.dashboard-referral-value:hover{
  border-color:rgba(87,229,255,.28);
  background:rgba(7,22,33,.72);
}

.dashboard-referral-copy{
  margin-top:9px;
  width:auto;
  min-width:194px;
}

@media(max-width:760px){

  .dashboard-referral-value{
    font-size:.62rem;
  }

  .dashboard-referral-copy{
    width:100%;
    min-width:0;
  }
}

/* === PREMONEON DASHBOARD REFERRAL END === */


/* === ACCOUNT CORE WIDTH CONTAINMENT START === */

/*
 * Prevent long referral URLs and other intrinsic-width content
 * from expanding the Account Core beyond its panel.
 */

.account-core {
    width: 100%;
    min-width: 0;
}

/*
 * CRITICAL:
 * .account-core is a flex container.
 * Its direct child must be allowed to shrink below its
 * intrinsic content width.
 */
.account-core > div {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}


/* ============================================================
   ACCOUNT META CONTAINMENT
   ============================================================ */

.account-meta {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    overflow: hidden;
}

.meta-cell {
    min-width: 0;
    max-width: 100%;

    box-sizing: border-box;
}


/* ============================================================
   REFERRAL CONTAINMENT
   ============================================================ */

.dashboard-referral {
    display: block;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    overflow: hidden;

    box-sizing: border-box;
}

.dashboard-referral-value {
    display: block;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    box-sizing: border-box;

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


/*
 * Ensure the copy button also stays inside
 * the Account Core content width.
 */
.dashboard-referral-copy {
    max-width: 100%;
    box-sizing: border-box;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .account-meta {
        display: flex;
        flex-wrap: wrap;
    }

    .meta-cell {
        flex:
            0 1 auto;
    }

    .dashboard-referral-value {
        width: 100%;
    }

    .dashboard-referral-copy {
        width: 100%;
    }
}

/* === ACCOUNT CORE WIDTH CONTAINMENT END === */


/* ============================================================
   PREMONEON DIRECT NETWORK PREMIUM V2 START
   Canonical ReferralManager presentation only
   ============================================================ */

.direct-network-panel{
  margin-bottom:14px;
}

.direct-network-panel .neo-panel-inner{
  padding:26px;
}

.direct-network-premium{
  min-width:0;
}

.direct-network-head{
  align-items:flex-start;
}

.direct-network-head .section-title{
  margin-top:17px;
  font-size:clamp(1.55rem,2vw,2.15rem);
}

.direct-network-head .section-copy{
  max-width:780px;
  margin-top:9px;
}

.direct-network-source{
  margin-top:2px;
  padding:0 12px;
  min-height:31px;
  background:rgba(6,20,30,.72);
}


/* ============================================================
   OVERVIEW
   ============================================================ */

.direct-network-overview{
  display:grid;
  grid-template-columns:minmax(280px,.75fr) minmax(0,1.45fr);
  gap:16px;
  margin-top:28px;
}

.direct-level-card,
.direct-network-stats{
  border:1px solid rgba(97,221,255,.15);
  background:
    linear-gradient(
      145deg,
      rgba(8,25,38,.88),
      rgba(3,13,21,.82)
    );
}

.direct-level-card{
  min-height:145px;
  display:flex;
  align-items:center;
  gap:20px;
  padding:20px;
}

.direct-level-icon{
  width:74px;
  height:74px;
  flex:0 0 74px;
  display:grid;
  place-items:center;
  position:relative;

  border:1px solid rgba(87,229,255,.58);
  border-radius:18px;

  background:
    radial-gradient(
      circle,
      rgba(87,229,255,.17),
      rgba(7,28,40,.68) 62%,
      rgba(3,12,19,.85)
    );

  box-shadow:
    inset 0 0 24px rgba(87,229,255,.08),
    0 0 22px rgba(87,229,255,.07);
}

.direct-level-icon::before,
.direct-level-icon::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.direct-level-icon::before{
  inset:9px;
  border:1px solid rgba(87,229,255,.14);
  border-radius:13px;
}

.direct-level-icon::after{
  width:7px;
  height:7px;
  border-radius:50%;
  top:8px;
  right:8px;
  background:var(--cyan);
  box-shadow:0 0 10px rgba(87,229,255,.85);
}

.direct-level-icon span{
  color:var(--cyan);
  font-size:1.15rem;
  font-weight:900;
}

.direct-level-copy{
  min-width:0;
}

.direct-level-copy small{
  display:block;
  color:#748c99;
  font-size:.48rem;
  font-weight:800;
  letter-spacing:.13em;
}

.direct-level-copy strong{
  display:block;
  margin-top:10px;
  color:#f4fbff;
  font-size:1.45rem;
  line-height:1;
}

.direct-level-copy strong em{
  color:var(--cyan);
  font-style:normal;
}

.direct-level-copy p{
  max-width:300px;
  margin:9px 0 0;
  color:#8ca2ae;
  font-size:.62rem;
  line-height:1.6;
}


.direct-network-stats{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.direct-stat{
  min-width:0;
  min-height:145px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px 20px;
}

.direct-stat + .direct-stat{
  border-left:1px solid rgba(97,221,255,.11);
}

.direct-stat small{
  min-height:28px;
  color:#718a98;
  font-size:.46rem;
  font-weight:800;
  line-height:1.45;
  letter-spacing:.12em;
}

.direct-stat strong{
  display:block;
  margin-top:8px;
  color:#f6fbff;
  font-size:1.7rem;
  line-height:1;
}

.direct-stat span{
  display:block;
  margin-top:7px;
  color:#8ba0ab;
  font-size:.52rem;
  letter-spacing:.07em;
}

.direct-stat .direct-stat-order{
  color:var(--cyan);
  font-size:1rem;
  line-height:1.25;
  letter-spacing:.04em;
}


/* ============================================================
   RECORD LIST
   ============================================================ */

.direct-record-shell{
  margin-top:18px;
  padding:18px 18px 20px;

  border:1px solid rgba(87,229,255,.27);

  background:
    linear-gradient(
      145deg,
      rgba(7,23,35,.84),
      rgba(3,12,20,.84)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 18px 44px rgba(0,0,0,.12);
}

.direct-record-header{
  display:grid;
  grid-template-columns:80px minmax(0,1fr) 170px;
  gap:18px;
  align-items:center;

  min-height:40px;
  padding:0 14px;

  color:#54dff5;
  font-size:.49rem;
  font-weight:900;
  letter-spacing:.12em;
}

.direct-record-list{
  display:grid;
  gap:8px;
}

.direct-record{
  min-width:0;
  min-height:92px;

  display:grid;
  grid-template-columns:80px minmax(0,1fr) 170px;
  gap:18px;
  align-items:center;

  padding:14px;

  border:1px solid rgba(97,221,255,.10);

  background:
    linear-gradient(
      90deg,
      rgba(7,25,37,.92),
      rgba(5,17,27,.78)
    );

  transition:
    border-color .2s ease,
    transform .2s ease,
    background .2s ease;
}

.direct-record:hover{
  border-color:rgba(87,229,255,.30);
  background:
    linear-gradient(
      90deg,
      rgba(9,31,45,.96),
      rgba(5,18,29,.88)
    );
  transform:translateY(-1px);
}

.direct-record-index{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  color:var(--cyan);
  font-size:.78rem;
  font-weight:900;

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

  background:
    radial-gradient(
      circle,
      rgba(87,229,255,.12),
      rgba(3,14,22,.74)
    );

  box-shadow:
    inset 0 0 14px rgba(87,229,255,.04);
}

.direct-record-account{
  min-width:0;
  display:flex;
  align-items:center;
  gap:15px;
}

.direct-record-avatar{
  width:48px;
  height:48px;
  flex:0 0 48px;
  position:relative;
  display:grid;
  place-items:center;

  border:1px solid rgba(87,229,255,.24);
  border-radius:14px;

  background:
    radial-gradient(
      circle,
      rgba(87,229,255,.14),
      rgba(5,19,29,.68)
    );
}

.direct-record-avatar span{
  width:13px;
  height:13px;
  position:relative;

  border:2px solid var(--cyan);
  border-radius:50%;
}

.direct-record-avatar span::after{
  content:"";
  position:absolute;
  width:20px;
  height:10px;
  left:50%;
  top:14px;
  transform:translateX(-50%);

  border:2px solid var(--cyan);
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  border-bottom:0;
}

.direct-record-account small{
  display:block;
  color:#6f8997;
  font-size:.45rem;
  letter-spacing:.12em;
}

.direct-record-account strong{
  display:block;
  max-width:100%;
  margin-top:6px;

  color:#f0f8fc;
  font-size:.76rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.direct-record-level{
  justify-self:start;

  min-width:105px;
  padding:9px 15px;

  text-align:center;

  color:var(--cyan);
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.10em;

  border:1px solid rgba(87,229,255,.13);
  border-radius:4px;

  background:
    linear-gradient(
      90deg,
      rgba(10,38,53,.58),
      rgba(8,25,37,.42)
    );
}


/* ============================================================
   RANGE + PAGINATION
   ============================================================ */

.direct-network-footer{
  display:grid;
  grid-template-columns:minmax(250px,.8fr) minmax(360px,1.2fr);
  gap:18px;
  align-items:center;
  margin-top:18px;
}

.direct-range-card{
  min-height:82px;
  padding:15px 17px;

  border:1px solid rgba(97,221,255,.12);
  background:rgba(6,20,30,.58);
}

.direct-range-card small{
  display:block;
  color:var(--cyan);
  font-size:.46rem;
  font-weight:900;
  letter-spacing:.12em;
}

.direct-range-card strong{
  display:block;
  margin-top:7px;
  color:#dfeaf0;
  font-size:.72rem;
}

.direct-range-card span{
  display:block;
  margin-top:7px;
  color:#718994;
  font-size:.56rem;
}

.direct-pagination{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
}

.direct-page-button{
  min-width:150px;
  min-height:50px;

  text-align:center;

  color:var(--cyan);
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.08em;
}

.direct-page-button:disabled{
  opacity:.28;
  cursor:not-allowed;
  transform:none;
}

.direct-current-page{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;

  color:var(--cyan);
  font-size:.8rem;
  font-weight:900;

  border:1px solid var(--cyan);

  background:
    radial-gradient(
      circle,
      rgba(87,229,255,.14),
      rgba(5,17,27,.70)
    );

  box-shadow:
    0 0 16px rgba(87,229,255,.10),
    inset 0 0 14px rgba(87,229,255,.06);
}


/* ============================================================
   PROOF / EMPTY STATES
   ============================================================ */

.direct-network-proof{
  min-height:44px;

  display:flex;
  align-items:center;
  gap:12px;

  margin-top:18px;
  padding:0 14px;

  border-top:1px solid rgba(97,221,255,.08);
  border-bottom:1px solid rgba(97,221,255,.08);

  color:#76dbe9;
  font-size:.47rem;
  font-weight:800;
  letter-spacing:.09em;
}

.direct-network-proof i{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px rgba(87,229,255,.6);
}

.direct-network-empty{
  min-height:180px;

  display:grid;
  place-content:center;
  gap:8px;

  margin-top:24px;
  padding:26px;

  text-align:center;

  border:1px dashed rgba(97,221,255,.16);
  background:rgba(5,17,27,.36);
}

.direct-network-empty strong{
  color:#dcecf3;
  font-size:.82rem;
  letter-spacing:.07em;
}

.direct-network-empty span{
  max-width:520px;
  color:#78909c;
  font-size:.64rem;
  line-height:1.6;
}


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

@media(max-width:1100px){

  .direct-network-overview{
    grid-template-columns:1fr;
  }

  .direct-network-stats{
    grid-template-columns:repeat(2,1fr);
  }

  .direct-stat:nth-child(3){
    border-left:0;
    border-top:1px solid rgba(97,221,255,.11);
  }

  .direct-stat:nth-child(4){
    border-top:1px solid rgba(97,221,255,.11);
  }

  .direct-record-header,
  .direct-record{
    grid-template-columns:64px minmax(0,1fr) 140px;
  }
}


@media(max-width:760px){

  .direct-network-panel .neo-panel-inner{
    padding:18px;
  }

  .direct-network-head{
    display:block;
  }

  .direct-network-source{
    margin-top:14px;
  }

  .direct-level-card{
    align-items:flex-start;
  }

  .direct-network-stats{
    grid-template-columns:1fr 1fr;
  }

  .direct-stat{
    min-height:112px;
  }

  .direct-record-header{
    display:none;
  }

  .direct-record{
    grid-template-columns:46px minmax(0,1fr);
    gap:12px;
  }

  .direct-record-level{
    grid-column:2;
    min-width:96px;
  }

  .direct-record-account{
    min-width:0;
  }

  .direct-network-footer{
    grid-template-columns:1fr;
  }

  .direct-pagination{
    justify-content:center;
  }

  .direct-page-button{
    flex:1;
    min-width:0;
  }
}


@media(max-width:520px){

  .direct-network-stats{
    grid-template-columns:1fr;
  }

  .direct-stat + .direct-stat{
    border-left:0;
    border-top:1px solid rgba(97,221,255,.11);
  }

  .direct-level-card{
    display:grid;
    grid-template-columns:62px 1fr;
  }

  .direct-level-icon{
    width:62px;
    height:62px;
    flex-basis:62px;
  }

  .direct-record-avatar{
    display:none;
  }

  .direct-pagination{
    gap:8px;
  }

  .direct-current-page{
    width:44px;
    height:44px;
  }
}

/* ============================================================
   PREMONEON DIRECT NETWORK PREMIUM V2 END
   ============================================================ */


/* ============================================================
   PREMONEON SALES ATTRIBUTION PREMIUM V2 START
   Canonical GroupSalesManager presentation
   ============================================================ */

.sales-ledger-premium-panel{
  margin-top:14px;
}

.sales-ledger-premium-panel .neo-panel-inner{
  padding:28px;
}

.sales-ledger-premium{
  min-width:0;
}


/* ============================================================
   HEADER
   ============================================================ */

.sales-ledger-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
}

.sales-ledger-head .section-title{
  margin-top:17px;
  font-size:clamp(1.65rem,2.3vw,2.35rem);
}

.sales-ledger-head .section-copy{
  max-width:760px;
  margin-top:10px;
  font-size:.72rem;
}

.sales-ledger-source{
  min-height:34px;
  padding:0 13px;
  margin-top:2px;

  color:var(--cyan);

  border-color:rgba(87,229,255,.34);

  background:
    linear-gradient(
      145deg,
      rgba(7,27,39,.86),
      rgba(3,14,22,.76)
    );
}


/* ============================================================
   SUMMARY STATS
   ============================================================ */

.sales-ledger-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));

  margin-top:28px;

  border:1px solid rgba(87,229,255,.27);

  background:
    linear-gradient(
      145deg,
      rgba(7,24,36,.88),
      rgba(3,13,21,.83)
    );
}

.sales-ledger-stat{
  min-width:0;
  min-height:122px;

  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:center;
  gap:18px;

  padding:20px 24px;
}

.sales-ledger-stat + .sales-ledger-stat{
  border-left:1px solid rgba(97,221,255,.14);
}

.sales-stat-icon{
  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  position:relative;

  border:1px solid rgba(87,229,255,.45);
  border-radius:15px;

  color:var(--cyan);

  background:
    radial-gradient(
      circle,
      rgba(87,229,255,.14),
      rgba(4,17,27,.75)
    );
}

.sales-stat-icon::before{
  content:"";
  position:absolute;
  inset:7px;

  border:1px solid rgba(87,229,255,.10);
  border-radius:10px;
}

.sales-stat-icon span{
  position:relative;
  z-index:2;

  font-size:.78rem;
  font-weight:900;
}

.sales-ledger-stat small{
  display:block;

  color:#78909d;

  font-size:.48rem;
  font-weight:900;

  letter-spacing:.12em;
}

.sales-ledger-stat strong{
  display:block;

  margin-top:7px;

  color:#f3f9fc;

  font-size:1.6rem;
  line-height:1;
}

.sales-ledger-stat .sales-order-value{
  color:var(--cyan);

  font-size:1rem;
  line-height:1.22;

  letter-spacing:.035em;
}


/* ============================================================
   TABLE SHELL
   ============================================================ */

.sales-ledger-table-shell{
  min-width:0;

  margin-top:20px;
  padding:18px 20px 12px;

  border:1px solid rgba(87,229,255,.26);

  background:
    linear-gradient(
      145deg,
      rgba(6,21,32,.86),
      rgba(2,12,19,.88)
    );

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

.sales-premium-table{
  width:100%;
  min-width:940px;

  border-collapse:collapse;

  font-size:.66rem;
}

.sales-premium-table th{
  height:46px;

  padding:0 13px;

  text-align:left;

  color:var(--cyan);

  font-size:.49rem;
  font-weight:900;

  letter-spacing:.11em;

  border-bottom:1px solid rgba(97,221,255,.16);
}

.sales-premium-table td{
  height:67px;

  padding:11px 13px;

  color:#afc4cf;

  border-bottom:1px solid rgba(97,221,255,.08);
}

.sales-premium-table tbody tr{
  background:rgba(5,18,28,.30);

  transition:
    background .18s ease,
    box-shadow .18s ease;
}

.sales-premium-table tbody tr:hover{
  background:rgba(9,31,44,.56);

  box-shadow:
    inset 2px 0 0 var(--cyan);
}

.sales-record-id{
  color:var(--cyan);
}

.sales-record-purchase{
  color:#d7e5eb;
  font-weight:800;
}

.sales-record-address{
  color:#eef8fc;
  white-space:nowrap;
}

.sales-level-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:48px;
  min-height:27px;

  color:var(--cyan);

  font-size:.51rem;
  font-weight:900;

  border:1px solid rgba(87,229,255,.17);

  background:rgba(87,229,255,.04);
}

.sales-package-version{
  display:block;

  margin-top:3px;

  color:#68818e;
  font-size:.46rem;
}

.sales-volume{
  color:#f2fbff;
}

.sales-token{
  display:block;

  margin-top:3px;

  color:var(--cyan);

  font-size:.43rem;
  font-weight:900;

  letter-spacing:.08em;
}

.sales-type-badge,
.sales-eligibility-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:27px;
  padding:0 9px;

  font-size:.45rem;
  font-weight:900;

  letter-spacing:.07em;

  border:1px solid rgba(97,221,255,.14);
}

.sales-type-badge.personal{
  color:var(--cyan);
  background:rgba(87,229,255,.04);
}

.sales-type-badge.group{
  color:#aeb8ff;
  border-color:rgba(127,139,255,.22);
  background:rgba(127,139,255,.04);
}

.sales-eligibility-badge.eligible{
  color:var(--green);

  border-color:rgba(117,241,122,.20);

  background:rgba(117,241,122,.035);
}

.sales-eligibility-badge.not-eligible{
  color:#8799a3;

  border-color:rgba(135,153,163,.16);

  background:rgba(135,153,163,.03);
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.sales-ledger-empty{
  min-height:300px;

  display:grid;
  place-items:center;
  align-content:center;

  gap:11px;

  margin-top:20px;
  padding:40px 20px;

  text-align:center;

  border:1px solid rgba(87,229,255,.25);

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(87,229,255,.045),
      transparent 24%
    ),
    rgba(4,15,24,.50);
}

.sales-empty-icon{
  width:82px;
  height:82px;

  display:grid;
  place-items:center;

  position:relative;

  margin-bottom:8px;

  border:1px dashed var(--cyan);
  border-radius:50%;
}

.sales-empty-icon span{
  width:30px;
  height:38px;

  position:relative;

  border:2px solid var(--cyan);
  border-radius:2px;
}

.sales-empty-icon span::before{
  content:"";
  position:absolute;

  width:15px;
  height:2px;

  left:6px;
  top:10px;

  background:var(--cyan);

  box-shadow:
    0 7px 0 var(--cyan),
    0 14px 0 var(--cyan);
}

.sales-empty-icon span::after{
  content:"";

  position:absolute;

  width:15px;
  height:15px;

  right:-11px;
  bottom:-9px;

  border:2px solid var(--cyan);
  border-radius:50%;

  background:#06131d;
}

.sales-empty-icon.waiting{
  opacity:.55;
}

.sales-ledger-empty > strong{
  color:#f1f8fb;

  font-size:1rem;

  letter-spacing:.04em;
}

.sales-ledger-empty p{
  max-width:470px;

  margin:0;

  color:#869da9;

  font-size:.66rem;
  line-height:1.65;
}


/* ============================================================
   FOOTER
   ============================================================ */

.sales-ledger-footer{
  display:grid;

  grid-template-columns:
    minmax(220px,.8fr)
    minmax(320px,1fr)
    minmax(300px,1fr);

  gap:18px;

  align-items:center;

  margin-top:20px;
}

.sales-range-card,
.sales-proof-card{
  min-height:90px;

  display:flex;
  align-items:center;

  gap:15px;

  padding:16px 18px;

  border:1px solid rgba(97,221,255,.14);

  background:rgba(5,18,28,.54);
}

.sales-range-icon,
.sales-proof-shield{
  width:50px;
  height:50px;

  flex:0 0 50px;

  display:grid;
  place-items:center;

  color:var(--cyan);

  font-size:.78rem;
  font-weight:900;

  border:1px solid rgba(87,229,255,.50);
  border-radius:14px;

  background:
    radial-gradient(
      circle,
      rgba(87,229,255,.14),
      rgba(4,16,25,.72)
    );
}

.sales-range-card small{
  display:block;

  color:var(--cyan);

  font-size:.46rem;
  font-weight:900;

  letter-spacing:.10em;
}

.sales-range-card strong{
  display:block;

  margin-top:5px;

  color:#e2edf2;

  font-size:.67rem;
}

.sales-range-card span{
  display:block;

  margin-top:5px;

  color:#718994;

  font-size:.53rem;
}


.sales-pagination{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;
}

.sales-page-button{
  min-width:135px;
  min-height:50px;

  text-align:center;

  color:var(--cyan);

  font-size:.53rem;
  font-weight:900;

  letter-spacing:.07em;
}

.sales-page-button:disabled{
  opacity:.26;

  cursor:not-allowed;

  transform:none;
}

.sales-current-page{
  width:50px;
  height:50px;

  display:grid;
  place-items:center;

  color:#f4fbff;

  font-size:.78rem;
  font-weight:900;

  border:1px solid var(--cyan);

  background:
    radial-gradient(
      circle,
      rgba(87,229,255,.16),
      rgba(4,17,27,.78)
    );

  box-shadow:
    0 0 16px rgba(87,229,255,.09),
    inset 0 0 15px rgba(87,229,255,.05);
}


.sales-proof-card strong{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:7px;

  color:var(--cyan);

  font-size:.48rem;
  font-weight:900;

  letter-spacing:.08em;
}

.sales-proof-card strong i{
  width:4px;
  height:4px;

  display:inline-block;

  border-radius:50%;

  background:var(--cyan);
}

.sales-proof-card span{
  display:block;

  margin-top:7px;

  color:#8ba0aa;

  font-size:.55rem;
}


.sales-ledger-footnote{
  display:flex;
  justify-content:space-between;
  gap:14px;

  margin-top:15px;
  padding-top:13px;

  border-top:1px solid rgba(97,221,255,.08);

  color:#607b89;

  font-size:.43rem;
  font-weight:800;

  letter-spacing:.08em;
}


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

@media(max-width:1180px){

  .sales-ledger-stats{
    grid-template-columns:repeat(2,1fr);
  }

  .sales-ledger-stat:nth-child(3){
    border-left:0;
    border-top:1px solid rgba(97,221,255,.14);
  }

  .sales-ledger-stat:nth-child(4){
    border-top:1px solid rgba(97,221,255,.14);
  }

  .sales-ledger-footer{
    grid-template-columns:1fr 1fr;
  }

  .sales-proof-card{
    grid-column:1 / -1;
  }
}


@media(max-width:760px){

  .sales-ledger-premium-panel .neo-panel-inner{
    padding:18px;
  }

  .sales-ledger-head{
    display:block;
  }

  .sales-ledger-source{
    margin-top:14px;
  }

  .sales-ledger-stats{
    grid-template-columns:1fr 1fr;
  }

  .sales-ledger-stat{
    min-height:105px;

    grid-template-columns:40px 1fr;

    padding:15px;
  }

  .sales-stat-icon{
    width:38px;
    height:38px;
  }

  .sales-ledger-footer{
    grid-template-columns:1fr;
  }

  .sales-proof-card{
    grid-column:auto;
  }

  .sales-pagination{
    order:3;
  }

  .sales-page-button{
    flex:1;
    min-width:0;
  }

  .sales-ledger-footnote{
    display:grid;
    grid-template-columns:1fr;
  }
}


@media(max-width:520px){

  .sales-ledger-stats{
    grid-template-columns:1fr;
  }

  .sales-ledger-stat + .sales-ledger-stat{
    border-left:0;
    border-top:1px solid rgba(97,221,255,.14);
  }

  .sales-pagination{
    gap:7px;
  }

  .sales-current-page{
    width:44px;
    height:44px;
  }
}

/* ============================================================
   PREMONEON SALES ATTRIBUTION PREMIUM V2 END
   ============================================================ */


/* ============================================================
   PREMONEON EARNINGS INFO UI V1 START
   ============================================================ */

.earnings-accounting-grid-v2{
  grid-template-columns:
    repeat(3,minmax(0,1fr));
}

.earnings-accounting-cell{
  position:relative;
}

.earnings-accounting-total{
  min-height:94px !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(87,229,255,.055),
      transparent 55%
    ),
    #061019 !important;
}

.earnings-accounting-label{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

.earnings-accounting-label small{
  min-width:0;
}

.earnings-info-button{
  width:18px;
  height:18px;
  flex:0 0 18px;

  display:grid;
  place-items:center;

  padding:0;

  border:1px solid rgba(87,229,255,.42);
  border-radius:50%;

  background:
    rgba(87,229,255,.045);

  color:var(--cyan);

  font-size:.55rem;
  font-weight:900;
  line-height:1;

  cursor:pointer;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.earnings-info-button:hover,
.earnings-info-button[aria-expanded="true"]{
  border-color:var(--cyan);

  background:
    rgba(87,229,255,.12);

  box-shadow:
    0 0 14px rgba(87,229,255,.18);

  transform:translateY(-1px);
}

.earnings-info-popover{
  position:absolute;

  left:14px;
  top:42px;

  z-index:80;

  width:min(330px,calc(100vw - 52px));

  padding:16px;

  border:1px solid rgba(87,229,255,.32);

  background:
    radial-gradient(
      circle at 0 0,
      rgba(87,229,255,.08),
      transparent 42%
    ),
    rgba(3,13,21,.98);

  box-shadow:
    0 20px 50px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.earnings-info-popover[hidden]{
  display:none !important;
}

.earnings-info-popover-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.earnings-info-popover-head strong{
  margin:0 !important;

  color:#f1fbff;

  font-size:.72rem !important;
  line-height:1.35;

  letter-spacing:.02em;
}

.earnings-info-close{
  width:24px;
  height:24px;

  flex:0 0 24px;

  display:grid;
  place-items:center;

  padding:0;

  border:1px solid rgba(97,221,255,.14);

  background:rgba(7,21,31,.76);

  color:#8197a2;

  cursor:pointer;
}

.earnings-info-close:hover{
  color:var(--cyan);
  border-color:rgba(87,229,255,.42);
}

.earnings-info-popover p{
  margin:13px 0 0;

  color:#91a7b2;

  font-size:.63rem;
  line-height:1.65;
}

.earnings-info-source{
  margin-top:14px;
  padding-top:12px;

  border-top:1px solid rgba(97,221,255,.10);
}

.earnings-info-source small{
  display:block;

  color:#607b89;

  font-size:.42rem;
  letter-spacing:.12em;
}

.earnings-info-source strong{
  display:block;

  margin-top:6px !important;

  color:var(--cyan);

  font-size:.58rem !important;
}

.earnings-info-source span{
  display:block;

  margin-top:4px;

  color:#758d99;

  font-size:.51rem;

  overflow-wrap:anywhere;
}

@media(max-width:1100px){

  .earnings-accounting-grid-v2{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}

@media(max-width:760px){

  .earnings-accounting-grid-v2{
    grid-template-columns:1fr;
  }


  .earnings-info-popover{
    left:12px;
    right:12px;
    width:auto;
  }

}

/* ============================================================
   PREMONEON EARNINGS INFO UI V1 END
   ============================================================ */


/* PREMONEON EARNINGS MATURITY ALIGNMENT V2 START */

/*
 * ============================================================
 * MATURITY CORE — ALIGNED LABEL / INFO SYSTEM
 * ============================================================
 *
 * Goal:
 *
 * LABEL ------------------------------ i
 * VALUE
 *
 * The info control occupies the same right-side position
 * regardless of label length.
 */

.earnings-maturity-core
.earnings-accounting-grid-v2{
    align-items:stretch;
}


/*
 * Every accounting cell gets identical internal geometry.
 */
.earnings-maturity-core
.earnings-accounting-cell{
    position:relative;

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

    min-width:0;
    min-height:118px;

    padding:22px 24px;
}


/*
 * LABEL ROW
 *
 * Grid is used instead of ordinary inline flex:
 *
 * label | flexible technical line | info
 *
 * This guarantees that all info buttons align vertically.
 */
.earnings-maturity-core
.earnings-accounting-label{
    width:100%;
    min-width:0;

    display:grid;

    grid-template-columns:
        auto
        minmax(18px,1fr)
        22px;

    align-items:center;

    column-gap:12px;
}


/*
 * Technical connector line between label and info button.
 */
.earnings-maturity-core
.earnings-accounting-label::after{
    content:"";

    width:100%;
    height:1px;

    align-self:center;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(87,229,255,.30) 0,
            rgba(87,229,255,.30) 2px,
            transparent 2px,
            transparent 5px
        );

    opacity:.72;
}


/*
 * Label remains left aligned.
 */
.earnings-maturity-core
.earnings-accounting-label small{
    grid-column:1;

    min-width:0;

    color:#647f8e;

    font-size:.50rem;
    font-weight:800;

    line-height:1.35;

    letter-spacing:.11em;

    white-space:normal;
}


/*
 * Connector line occupies middle column.
 */
.earnings-maturity-core
.earnings-accounting-label::after{
    grid-column:2;
}


/*
 * ============================================================
 * INFO BUTTON
 * ============================================================
 *
 * Same physical size and same right edge in every metric cell.
 */

.earnings-maturity-core
.earnings-info-button{
    grid-column:3;

    width:22px;
    height:22px;

    min-width:22px;
    min-height:22px;

    display:grid;
    place-items:center;

    justify-self:end;

    padding:0;
    margin:0;

    border:
        1px solid
        rgba(87,229,255,.58);

    border-radius:50%;

    background:
        rgba(5,22,31,.92);

    color:var(--cyan);

    font-family:inherit;
    font-size:.62rem;
    font-weight:900;

    line-height:1;

    cursor:pointer;

    box-shadow:
        inset 0 0 0 1px rgba(87,229,255,.035);

    transform:none;

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        color .18s ease;
}


.earnings-maturity-core
.earnings-info-button:hover,

.earnings-maturity-core
.earnings-info-button:focus-visible,

.earnings-maturity-core
.earnings-info-button[aria-expanded="true"]{
    color:#ffffff;

    border-color:var(--cyan);

    background:
        rgba(87,229,255,.13);

    box-shadow:
        0 0 0 1px rgba(87,229,255,.08),
        0 0 14px rgba(87,229,255,.16);

    outline:none;

    transform:none;
}


/*
 * ============================================================
 * VALUE ROW
 * ============================================================
 */

.earnings-maturity-core
.earnings-accounting-cell > strong{
    display:flex;
    align-items:baseline;

    gap:6px;

    margin-top:17px;

    color:#f2f8fb;

    font-size:1.32rem;
    font-weight:900;

    line-height:1;
}


/*
 * Token symbol stays compact and visually subordinate.
 */
.earnings-maturity-core
.earnings-accounting-cell > strong em{
    margin:0;

    color:var(--cyan);

    font-size:.50rem;
    font-style:normal;
    font-weight:900;

    letter-spacing:.02em;
}


/*
 * Remaining Maturity remains visually important,
 * but keeps exactly the same geometry as the other five cells.
 */
.earnings-maturity-core
.earnings-accounting-total{
    min-height:118px !important;

    background:
        radial-gradient(
            circle at 100% 50%,
            rgba(87,229,255,.035),
            transparent 60%
        ),
        rgba(5,17,26,.38) !important;
}


/*
 * ============================================================
 * INFO POPOVER POSITION
 * ============================================================
 *
 * Anchor consistently from the right edge of the metric.
 */

.earnings-maturity-core
.earnings-info-popover{
    left:auto;
    right:22px;
    top:53px;

    width:min(
        340px,
        calc(100vw - 64px)
    );
}


/*
 * ============================================================
 * TABLET
 * ============================================================
 */

@media(max-width:1100px){

    .earnings-maturity-core
    .earnings-accounting-cell{
        min-height:112px;

        padding:
            20px 20px;
    }

}


/*
 * ============================================================
 * MOBILE
 * ============================================================
 */

@media(max-width:760px){

    .earnings-maturity-core
    .earnings-accounting-label{
        grid-template-columns:
            auto
            minmax(10px,1fr)
            22px;

        column-gap:9px;
    }

    .earnings-maturity-core
    .earnings-accounting-cell{
        min-height:104px;

        padding:
            18px 18px;
    }

    .earnings-maturity-core
    .earnings-info-popover{
        left:14px;
        right:14px;

        width:auto;
    }

}


/* PREMONEON EARNINGS MATURITY ALIGNMENT V2 END */





/* PREMONEON MATURITY SIX-CARD COLOR NORMALIZATION START */

/*
 * Remove every special visual treatment from the
 * Remaining Maturity Obligation card.
 *
 * It must visually match the other five accounting cells.
 */

.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total{

    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    box-shadow:
        none !important;

    filter:
        none !important;
}


/*
 * Remove any inherited decorative overlay.
 */

.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total::before,

.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total::after{

    content:none !important;

    display:none !important;

    background:none !important;

    box-shadow:none !important;
}


/*
 * Keep text treatment identical to normal cards.
 */

.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total
.earnings-accounting-label small{

    color:#647f8e !important;
}


.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total
> strong{

    color:#f2f8fb !important;
}


/*
 * Preserve PREMO cyan only for the payment-token symbol,
 * exactly like the other cards.
 */

.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total
> strong em{

    color:var(--cyan) !important;
}


/* PREMONEON MATURITY SIX-CARD COLOR NORMALIZATION END */



/* PREMONEON_WALLET_MODAL_CENTER_V3_START */

.wallet-confirm-overlay {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;

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

    padding:
        max(20px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        max(20px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left))
        !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    z-index: 2147483000 !important;
}

@supports (height: 100dvh) {
    .wallet-confirm-overlay {
        height: 100dvh !important;
    }
}

.wallet-confirm-dialog {
    position: relative !important;

    flex: 0 1 510px !important;

    width: min(510px, 100%) !important;
    max-width: 510px !important;

    max-height:
        calc(100vh - 40px) !important;

    margin: auto !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
}

@supports (height: 100dvh) {
    .wallet-confirm-dialog {
        max-height:
            calc(100dvh - 40px) !important;
    }
}

@media (max-width: 620px) {

    .wallet-confirm-overlay {
        padding:
            max(12px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left))
            !important;
    }

    .wallet-confirm-dialog {
        width: 100% !important;
        max-width: 100% !important;

        max-height:
            calc(100vh - 24px) !important;
    }

    @supports (height: 100dvh) {
        .wallet-confirm-dialog {
            max-height:
                calc(100dvh - 24px) !important;
        }
    }
}

/* PREMONEON_WALLET_MODAL_CENTER_V3_END */
/* PREMONEON_EARNINGS_EXACT_V3_START */

.earnings-accounting-grid-v2 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.earnings-accounting-cell {
    position: relative;
    min-width: 0;
}

.earnings-accounting-label {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    min-width: 0;
}

.earnings-info-button {
    flex: 0 0 auto;
}

.earnings-info-popover {
    z-index: 60;
}

@media (max-width: 820px) {

    .earnings-accounting-grid-v2 {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .earnings-page-heading,
    .earnings-maturity-core,
    .earnings-unilevel-core,
    .maturity-schedule-grid,
    .earnings-boundary-grid,
    .table-scroll {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .earnings-info-popover {
        max-width:
            min(320px, calc(100vw - 32px));
    }
}

/* PREMONEON_EARNINGS_EXACT_V3_END */


/* PREMONEON EARNINGS MATURITY CLEAN ALIGNMENT V3 START */

/*
 * LOCKED 6-CARD MATURITY ALIGNMENT
 *
 * - no dotted/dashed connector
 * - info buttons remain fixed on right edge
 * - equal geometry across all six cards
 */

.earnings-maturity-core
.earnings-accounting-label{
    width:100%;
    min-width:0;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        22px;

    align-items:center;

    column-gap:12px;
}


.earnings-maturity-core
.earnings-accounting-label::after{
    content:none !important;
    display:none !important;
}


.earnings-maturity-core
.earnings-accounting-label small{
    grid-column:1;

    min-width:0;

    margin:0;

    white-space:normal;
}


.earnings-maturity-core
.earnings-info-button{
    grid-column:2;

    justify-self:end;

    width:22px;
    height:22px;

    min-width:22px;
    min-height:22px;

    margin:0;
}


/*
 * No maturity card may span the whole grid.
 */

.earnings-maturity-core
.earnings-accounting-total{
    grid-column:auto !important;

    min-height:118px !important;

    box-shadow:none !important;
}


.earnings-maturity-core
.earnings-accounting-total::before,

.earnings-maturity-core
.earnings-accounting-total::after{
    display:none !important;
}


.earnings-maturity-core
.earnings-accounting-total > strong{
    color:#f2f8fb !important;
}


@media(max-width:760px){

    .earnings-maturity-core
    .earnings-accounting-label{

        grid-template-columns:
            minmax(0,1fr)
            22px;

        column-gap:10px;
    }

}

/* PREMONEON EARNINGS MATURITY CLEAN ALIGNMENT V3 END */



/* PREMONEON MATURITY SIX-CARD EXACT COLOR V4 START */

/*
 * Exact match with normal Earnings accounting cells.
 *
 * Base card background:
 * #061019
 */

.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total{

    background:
        #061019 !important;

    background-color:
        #061019 !important;

    background-image:
        none !important;

    box-shadow:
        none !important;

    filter:
        none !important;
}


.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total::before,

.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total::after{

    content:none !important;

    display:none !important;

    background:none !important;

    box-shadow:none !important;
}


.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total
.earnings-accounting-label small{

    color:#627b89 !important;
}


.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total
> strong{

    color:#f2f8fb !important;
}


.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total
> strong em{

    color:var(--cyan) !important;
}

/* PREMONEON MATURITY SIX-CARD EXACT COLOR V4 END */


/* PREMONEON MATURITY FINAL SIX CARD UI V5 START */

/*
 * ============================================================
 * MATURITY CORE — FINAL SIX-CARD VISUAL NORMALIZATION
 * ============================================================
 *
 * INTENDED RESULT:
 *
 *   Principal Entitlement
 *   Passive Entitlement
 *   Maturity Withdrawn
 *
 *   Remaining Principal Obligation
 *   Remaining Passive Obligation
 *   Remaining Maturity Obligation
 *
 * All six:
 * - identical background
 * - identical geometry
 * - identical padding
 * - aligned info buttons
 * - no connector / dotted line
 */


/*
 * ------------------------------------------------------------
 * THREE-COLUMN DESKTOP GRID
 * ------------------------------------------------------------
 */

.earnings-maturity-core
.earnings-accounting-grid-v2{
    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    align-items:stretch;
}


/*
 * ------------------------------------------------------------
 * ALL SIX CARDS — EXACT SAME APPEARANCE
 * ------------------------------------------------------------
 */

.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell,

.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total{

    min-width:0;

    min-height:118px !important;

    padding:
        22px 24px !important;

    background:
        #061019 !important;

    background-color:
        #061019 !important;

    background-image:
        none !important;

    box-shadow:
        none !important;

    filter:
        none !important;
}


/*
 * Remove any special overlays inherited by
 * earnings-accounting-total.
 */

.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell::before,

.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell::after{

    content:none !important;

    display:none !important;

    background:none !important;

    box-shadow:none !important;
}


/*
 * ------------------------------------------------------------
 * LABEL + INFO BUTTON ALIGNMENT
 * ------------------------------------------------------------
 */

.earnings-maturity-core
.earnings-accounting-label{

    width:100%;
    min-width:0;

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        22px !important;

    align-items:center;

    column-gap:12px;
}


/*
 * ------------------------------------------------------------
 * REMOVE OLD DOTTED / DASHED CONNECTOR
 * ------------------------------------------------------------
 */

.earnings-maturity-core
.earnings-accounting-label::after{

    content:none !important;

    display:none !important;

    width:0 !important;

    height:0 !important;

    background:none !important;
}


/*
 * Label remains in left column.
 */

.earnings-maturity-core
.earnings-accounting-label small{

    grid-column:1 !important;

    min-width:0;

    margin:0;

    white-space:normal;
}


/*
 * Info icon remains aligned at far-right.
 */

.earnings-maturity-core
.earnings-info-button{

    grid-column:2 !important;

    justify-self:end !important;

    width:22px;
    height:22px;

    min-width:22px;
    min-height:22px;

    margin:0 !important;
}


/*
 * ------------------------------------------------------------
 * VALUE NORMALIZATION
 * ------------------------------------------------------------
 */

.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell > strong,

.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total > strong{

    color:#f2f8fb !important;
}


.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell > strong em,

.earnings-maturity-core
.earnings-accounting-grid-v2
.earnings-accounting-cell.earnings-accounting-total > strong em{

    color:var(--cyan) !important;
}


/*
 * ------------------------------------------------------------
 * TABLET
 * ------------------------------------------------------------
 */

@media(max-width:1100px){

    .earnings-maturity-core
    .earnings-accounting-grid-v2{

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

}


/*
 * ------------------------------------------------------------
 * MOBILE
 * ------------------------------------------------------------
 */

@media(max-width:760px){

    .earnings-maturity-core
    .earnings-accounting-grid-v2{

        grid-template-columns:
            1fr !important;
    }


    .earnings-maturity-core
    .earnings-accounting-label{

        grid-template-columns:
            minmax(0,1fr)
            22px !important;

        column-gap:10px;
    }

}

/* PREMONEON MATURITY FINAL SIX CARD UI V5 END */


/* PREMONEON EARNINGS BOTTOM SECTION SEPARATION V1 START */

/*
 * ============================================================
 * EARNINGS — BOTTOM DOMAIN SEPARATION
 * ============================================================
 *
 * Intended hierarchy:
 *
 *   Unilevel Reward History
 *
 *        [clear separation]
 *
 *   Transaction State
 *   Accounting Boundary
 *
 * Scope is intentionally limited to the existing
 * Transaction State panel.
 *
 * No Maturity Core selectors.
 * No Unilevel table selectors.
 * No accounting-grid modifications.
 */

.earnings-transaction-state{
    margin-top:42px !important;
}


/*
 * Mobile keeps the separation while reducing unused space.
 */

@media(max-width:760px){

    .earnings-transaction-state{
        margin-top:30px !important;
    }

}

/* PREMONEON EARNINGS BOTTOM SECTION SEPARATION V1 END */


/* ============================================================
   PREMONEON HISTORY FINAL DESIGN V1
   Human-readable canonical history + forensic drill-down
   ============================================================ */

.history-page-heading{
    align-items:flex-end;
}

.history-header-proof{
    display:grid;
    grid-template-columns:repeat(2,minmax(150px,1fr));
    gap:1px;

    min-width:360px;

    border:1px solid rgba(97,221,255,.12);
    background:rgba(97,221,255,.08);
}

.history-header-proof > div{
    min-height:72px;
    padding:14px 16px;

    background:
        linear-gradient(
            180deg,
            rgba(6,20,30,.96),
            rgba(4,13,21,.96)
        );
}

.history-header-proof small{
    display:block;

    color:#607987;
    font-size:.40rem;
    letter-spacing:.10em;
}

.history-header-proof strong{
    display:block;

    margin-top:8px;

    color:#b9d3df;
    font-size:.62rem;
    overflow-wrap:anywhere;
}


/* ============================================================
   ACCOUNT HISTORY SNAPSHOT
   ============================================================ */

.history-overview-panel{
    margin-bottom:16px;
}

.history-section-intro{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:28px;
}

.history-capture-proof{
    min-width:210px;

    padding-left:20px;

    border-left:1px solid rgba(97,221,255,.10);
}

.history-capture-proof small{
    display:block;

    color:#607987;
    font-size:.40rem;
    letter-spacing:.10em;
}

.history-capture-proof strong{
    display:block;

    margin-top:6px;

    color:var(--cyan);
    font-size:.78rem;
}

.history-capture-proof span{
    display:block;

    margin-top:5px;

    color:#6f8794;
    font-size:.47rem;
}


.history-summary-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));

    gap:1px;

    margin-top:20px;

    border:1px solid rgba(97,221,255,.11);
    background:rgba(97,221,255,.08);
}


.history-summary-card{
    position:relative;

    min-height:145px;
    padding:17px;

    background:
        linear-gradient(
            180deg,
            rgba(6,18,28,.98),
            rgba(4,13,21,.98)
        );

    overflow:hidden;
}


.history-summary-card::after{
    content:"";

    position:absolute;
    left:17px;
    right:17px;
    bottom:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            transparent
        );

    opacity:.36;
}


.history-summary-label{
    color:#66808e;

    font-size:.42rem;
    font-weight:900;
    letter-spacing:.09em;
}


.history-summary-main{
    margin-top:18px;
}


.history-summary-main strong{
    display:block;

    color:#d4e5ec;

    font-size:1.34rem;
    line-height:1;
}


.history-summary-main span{
    display:block;

    margin-top:7px;

    color:#79919e;

    font-size:.40rem;
    letter-spacing:.08em;
}


.history-summary-secondary{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:8px;

    margin-top:17px;
    padding-top:10px;

    border-top:1px solid rgba(97,221,255,.08);
}


.history-summary-secondary span{
    color:#607987;

    font-size:.37rem;
    letter-spacing:.07em;
}


.history-summary-secondary strong{
    color:#9bb3bf;

    font-size:.58rem;
}


.history-incentive-strip{
    display:flex;
    align-items:center;

    gap:24px;

    margin-top:1px;
    padding:11px 14px;

    border:1px solid rgba(97,221,255,.08);

    background:rgba(4,14,22,.58);
}


.history-incentive-strip > span{
    margin-right:auto;

    color:#607987;

    font-size:.40rem;
    font-weight:900;
    letter-spacing:.10em;
}


.history-incentive-strip div{
    display:flex;
    align-items:center;

    gap:8px;
}


.history-incentive-strip small{
    color:#607987;
    font-size:.37rem;
}


.history-incentive-strip strong{
    color:#b5cad4;
    font-size:.56rem;
}


/* ============================================================
   ACTIVITY NAVIGATION
   ============================================================ */

.history-activity-heading{
    margin-top:22px;
}

.history-filter-shell{
    overflow:hidden;

    margin-bottom:14px;

    border:1px solid rgba(97,221,255,.11);

    background:rgba(4,14,22,.62);
}


.history-tabs{
    display:flex;

    overflow-x:auto;

    border-bottom:1px solid rgba(97,221,255,.09);
}


.history-tabs button{
    flex:0 0 auto;

    min-height:47px;

    padding:0 17px;

    border:0;
    border-right:1px solid rgba(97,221,255,.07);

    background:transparent;

    color:#617b89;

    font-size:.43rem;
    font-weight:900;
    letter-spacing:.06em;

    cursor:pointer;

    transition:.18s ease;
}


.history-tabs button:hover{
    color:#adc4cf;

    background:rgba(97,221,255,.035);
}


.history-tabs button.active{
    position:relative;

    color:var(--cyan);

    background:rgba(97,221,255,.065);
}


.history-tabs button.active::after{
    content:"";

    position:absolute;
    left:12px;
    right:12px;
    bottom:0;

    height:2px;

    background:var(--cyan);

    box-shadow:
        0 0 12px rgba(97,221,255,.36);
}


.history-controls{
    display:grid;
    grid-template-columns:minmax(0,1fr) 190px 130px;

    gap:8px;

    padding:11px;
}


.history-controls label{
    min-width:0;
}


.history-controls label > span{
    display:block;

    margin-bottom:7px;

    color:#5f7886;

    font-size:.37rem;
    letter-spacing:.08em;
}


.history-controls input,
.history-controls select{
    width:100%;
    height:40px;

    padding:0 11px;

    border:1px solid rgba(97,221,255,.10);

    outline:none;

    background:rgba(2,10,17,.72);

    color:#a9c0cb;

    font:inherit;
    font-size:.51rem;
}


.history-controls input:focus,
.history-controls select:focus{
    border-color:rgba(97,221,255,.32);

    box-shadow:
        0 0 0 1px rgba(97,221,255,.05);
}


/* ============================================================
   LEDGER HEADER
   ============================================================ */

.history-ledger-panel{
    margin-top:0;
}


.history-ledger-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:28px;
}


.history-ledger-source{
    min-width:160px;

    text-align:right;
}


.history-ledger-source small,
.history-ledger-source span{
    display:block;

    color:#607987;
    font-size:.38rem;
    letter-spacing:.08em;
}


.history-ledger-source strong{
    display:block;

    margin:6px 0;

    color:var(--cyan);
    font-size:.58rem;
}


/* ============================================================
   PACKAGE HISTORY CARD
   ============================================================ */

.history-purchase-list{
    display:grid;

    gap:12px;

    margin-top:20px;
}


.history-purchase-card{
    border:1px solid rgba(97,221,255,.11);

    background:
        linear-gradient(
            180deg,
            rgba(5,17,26,.86),
            rgba(3,12,19,.92)
        );

    transition:
        border-color .18s ease,
        transform .18s ease;
}


.history-purchase-card:hover{
    border-color:rgba(97,221,255,.22);
}


.history-purchase-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;

    min-height:86px;

    padding:15px 17px;

    border-bottom:1px solid rgba(97,221,255,.08);
}


.history-purchase-identity{
    display:flex;
    align-items:center;

    gap:14px;
}


.history-sequence{
    display:flex;
    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    flex:0 0 46px;

    border:1px solid rgba(97,221,255,.15);

    color:#688492;

    font-size:.50rem;
    font-weight:900;

    background:rgba(97,221,255,.025);
}


.history-purchase-identity small{
    color:#607987;

    font-size:.37rem;
    letter-spacing:.08em;
}


.history-purchase-identity h3{
    margin:4px 0 0;

    color:#d0e1e8;

    font-size:.88rem;
    font-weight:900;
}


.history-purchase-identity p{
    margin:6px 0 0;

    color:#667f8c;

    font-size:.47rem;
}


.history-purchase-identity p span{
    margin:0 5px;

    color:#3c5663;
}


.history-status-group{
    text-align:right;
}


.history-status-badge{
    display:inline-flex;
    align-items:center;

    min-height:25px;

    padding:0 9px;

    border:1px solid rgba(97,221,255,.16);

    color:var(--cyan);

    background:rgba(97,221,255,.05);

    font-size:.40rem;
    font-weight:900;
    letter-spacing:.06em;
}


.history-status-group small{
    display:block;

    margin-top:7px;

    color:#607987;

    font-size:.36rem;
    letter-spacing:.07em;
}


.history-package-main-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:1px;

    background:rgba(97,221,255,.075);
}


.history-package-metric{
    min-height:98px;

    padding:15px 17px;

    background:
        rgba(4,14,22,.97);
}


.history-package-metric small{
    display:block;

    color:#5d7684;

    font-size:.38rem;
    letter-spacing:.08em;
}


.history-package-metric strong{
    display:block;

    margin-top:11px;

    color:#bdcfd8;

    font-size:.70rem;

    overflow-wrap:anywhere;
}


.history-package-metric strong > span{
    margin-left:4px;

    color:#65808e;

    font-size:.40rem;
    font-weight:800;
}


.history-purchase-proof-strip{
    display:grid;
    grid-template-columns:1.2fr 1fr .8fr;

    gap:1px;

    border-top:1px solid rgba(97,221,255,.07);

    background:rgba(97,221,255,.06);
}


.history-purchase-proof-strip > div{
    min-height:64px;

    padding:12px 16px;

    background:rgba(3,12,19,.96);
}


.history-purchase-proof-strip small{
    display:block;

    color:#536d7b;

    font-size:.35rem;
    letter-spacing:.07em;
}


.history-purchase-proof-strip strong{
    display:block;

    margin-top:7px;

    color:#8da5b1;

    font-size:.50rem;

    overflow-wrap:anywhere;
}


.history-purchase-proof-strip strong span{
    margin-left:3px;

    color:#57717e;

    font-size:.36rem;
}


/* ============================================================
   FORENSIC DETAILS
   ============================================================ */

.history-forensic-details{
    border-top:1px solid rgba(97,221,255,.08);

    background:rgba(2,10,16,.64);
}


.history-forensic-details summary{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:16px;

    min-height:48px;

    padding:0 17px;

    list-style:none;

    cursor:pointer;
}


.history-forensic-details summary::-webkit-details-marker{
    display:none;
}


.history-forensic-details summary small{
    color:#4f6875;

    font-size:.34rem;
    letter-spacing:.07em;
}


.history-forensic-content{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:1px;

    border-top:1px solid rgba(97,221,255,.08);

    background:rgba(97,221,255,.06);
}


.history-forensic-content section{
    padding:15px 17px;

    background:rgba(3,12,19,.98);
}


.history-forensic-heading{
    margin-bottom:10px;

    color:var(--cyan);

    font-size:.40rem;
    font-weight:900;
    letter-spacing:.10em;
}


.history-forensic-row{
    display:grid;
    grid-template-columns:minmax(120px,.8fr) minmax(0,1.2fr);

    gap:15px;

    min-height:35px;

    padding:8px 0;

    border-top:1px solid rgba(97,221,255,.055);
}


.history-forensic-row span{
    color:#57717e;

    font-size:.39rem;
}


.history-forensic-row strong{
    color:#91a9b5;

    font-size:.45rem;
    font-weight:700;

    text-align:right;

    overflow-wrap:anywhere;
}


/* ============================================================
   GENERIC OTHER-DOMAIN RECORDS
   ============================================================ */

.history-record-list{
    display:grid;

    gap:8px;

    margin-top:18px;
}


.history-record{
    display:grid;
    grid-template-columns:86px 1fr;

    min-height:95px;

    border:1px solid rgba(97,221,255,.10);

    background:rgba(5,16,25,.52);
}


.history-record-index{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    border-right:1px solid rgba(97,221,255,.08);
}


.history-record-index span{
    color:#7994a1;
    font-size:.62rem;
    font-weight:900;
}


.history-record-index b{
    margin-top:6px;

    color:#4f6976;

    font-size:.34rem;
    letter-spacing:.06em;
}


.history-record-fields{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
}


.history-record-field{
    min-height:53px;

    padding:11px;

    border-right:1px solid rgba(97,221,255,.055);
    border-bottom:1px solid rgba(97,221,255,.055);
}


.history-record-field small{
    display:block;

    color:#5e7785;

    font-size:.36rem;
    letter-spacing:.07em;
}


.history-record-field strong{
    display:block;

    margin-top:6px;

    color:#a7bec9;

    font-size:.50rem;

    overflow-wrap:anywhere;
}


/* ============================================================
   CLEAN PAGINATION / FOOTER
   ============================================================ */

.history-pagination{
    display:grid;
    grid-template-columns:130px 1fr 130px;

    align-items:center;

    gap:12px;

    margin-top:18px;
}


.history-pagination button{
    min-height:40px;

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

    background:rgba(5,17,26,.72);

    color:var(--cyan);

    font-size:.43rem;
    font-weight:900;

    cursor:pointer;
}


.history-pagination button:disabled{
    opacity:.28;

    cursor:not-allowed;
}


.history-pagination-clean{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:8px;
}


.history-pagination-clean span{
    color:#536d7a;

    font-size:.39rem;
}


.history-pagination-clean strong{
    color:#a8bec8;

    font-size:.56rem;
}


.history-verification-footer{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:10px;

    margin-top:14px;
    padding:11px 3px;

    color:#536d7a;

    font-size:.36rem;
    letter-spacing:.07em;
}


.history-verification-footer strong{
    color:#7994a1;

    font-size:.38rem;
}


.history-verification-footer span:not(.history-verification-dot){
    padding-left:10px;

    border-left:1px solid rgba(97,221,255,.09);
}


.history-verification-dot{
    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--cyan);

    box-shadow:
        0 0 10px rgba(97,221,255,.55);
}


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

@media(max-width:1180px){

    .history-summary-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .history-package-main-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .history-record-fields{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


@media(max-width:850px){

    .history-page-heading{
        align-items:flex-start;
    }

    .history-header-proof{
        width:100%;
        min-width:0;

        margin-top:15px;
    }

    .history-section-intro{
        flex-direction:column;
    }

    .history-capture-proof{
        width:100%;
        min-width:0;

        padding-left:0;
        padding-top:12px;

        border-left:0;
        border-top:1px solid rgba(97,221,255,.09);
    }

    .history-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .history-controls{
        grid-template-columns:1fr 1fr;
    }

    .history-search-control{
        grid-column:1 / -1;
    }

    .history-purchase-proof-strip{
        grid-template-columns:1fr;
    }

    .history-forensic-content{
        grid-template-columns:1fr;
    }
}


@media(max-width:620px){

    .history-header-proof{
        grid-template-columns:1fr;
    }

    .history-summary-grid{
        grid-template-columns:1fr;
    }

    .history-controls{
        grid-template-columns:1fr;
    }

    .history-search-control{
        grid-column:auto;
    }

    .history-ledger-head{
        flex-direction:column;
    }

    .history-ledger-source{
        min-width:0;

        text-align:left;
    }

    .history-purchase-top{
        align-items:flex-start;
        flex-direction:column;
    }

    .history-status-group{
        text-align:left;
    }

    .history-package-main-grid{
        grid-template-columns:1fr;
    }

    .history-record{
        grid-template-columns:1fr;
    }

    .history-record-index{
        min-height:58px;

        border-right:0;
        border-bottom:1px solid rgba(97,221,255,.08);
    }

    .history-record-fields{
        grid-template-columns:1fr;
    }

    .history-forensic-row{
        grid-template-columns:1fr;

        gap:5px;
    }

    .history-forensic-row strong{
        text-align:left;
    }

    .history-pagination{
        grid-template-columns:1fr;
    }
}

/* PREMONEON HISTORY FINAL DESIGN V1 END */

/* ============================================================
   PREMONEON HISTORY FRIENDLY UI V1
   ============================================================ */

.history-tabs button{
    min-height:50px !important;
    padding:0 18px !important;

    font-size:11px !important;
    line-height:1.25 !important;
    letter-spacing:.04em !important;
}

.history-controls label > span{
    font-size:10px !important;
    line-height:1.35 !important;
}

.history-controls input,
.history-controls select{
    min-height:42px !important;
    font-size:12px !important;
}

.history-friendly-card{
    overflow:hidden;

    border:1px solid rgba(97,221,255,.14);

    background:
        linear-gradient(
            180deg,
            rgba(6,18,28,.96),
            rgba(3,12,19,.98)
        );
}

.history-friendly-card +
.history-friendly-card{
    margin-top:14px;
}

.history-friendly-card-head{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:24px;

    padding:20px 22px;

    border-bottom:
        1px solid rgba(97,221,255,.08);
}

.history-friendly-card-head small{
    display:block;

    color:#718b98;

    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
}

.history-friendly-card-head h3{
    margin:5px 0 0;

    color:#d8e8ee;

    font-size:18px;
    line-height:1.2;
}

.history-friendly-card-head p{
    margin:7px 0 0;

    color:#77909c;

    font-size:12px;
    line-height:1.45;
}

.history-friendly-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:30px;

    padding:0 11px;

    border:1px solid rgba(97,221,255,.22);

    background:rgba(97,221,255,.065);

    color:var(--cyan);

    font-size:10px;
    font-weight:900;
    letter-spacing:.06em;

    white-space:nowrap;
}

.history-friendly-primary{
    padding:22px;

    border-bottom:
        1px solid rgba(97,221,255,.075);
}

.history-friendly-primary small{
    display:block;

    color:#66818f;

    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
}

.history-friendly-primary strong{
    display:block;

    margin-top:7px;

    color:#edf8fb;

    font-size:25px;
    line-height:1.15;

    font-weight:900;
}

.history-friendly-primary strong span{
    margin-left:5px;

    color:#74909e;

    font-size:12px;
    font-weight:800;
}

.history-friendly-primary p{
    margin:9px 0 0;

    color:#728b97;

    font-size:12px;
    line-height:1.55;
}

.history-friendly-grid{
    display:grid;

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

    gap:1px;

    background:
        rgba(97,221,255,.075);
}

.history-friendly-metric{
    min-height:102px;

    padding:18px 20px;

    background:
        rgba(4,14,22,.98);
}

.history-friendly-metric small{
    display:block;

    color:#66808d;

    font-size:10px;
    line-height:1.35;

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

.history-friendly-metric strong{
    display:block;

    margin-top:11px;

    color:#c6d9e1;

    font-size:15px;
    line-height:1.4;

    font-weight:800;

    overflow-wrap:anywhere;
}

.history-friendly-metric strong span{
    margin-left:4px;

    color:#6f8996;

    font-size:10px;
}

.history-friendly-meta{
    display:grid;

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

    gap:1px;

    border-top:
        1px solid rgba(97,221,255,.07);

    background:
        rgba(97,221,255,.06);
}

.history-friendly-meta > div{
    padding:15px 20px;

    background:
        rgba(3,12,19,.98);
}

.history-friendly-meta small{
    display:block;

    color:#637d8a;

    font-size:10px;
    font-weight:800;
}

.history-friendly-meta strong{
    display:block;

    margin-top:7px;

    color:#a9c0cb;

    font-size:13px;

    overflow-wrap:anywhere;
}

.history-friendly-details{
    border-top:
        1px solid rgba(97,221,255,.075);

    background:
        rgba(2,9,15,.74);
}

.history-friendly-details summary{
    display:flex;
    justify-content:space-between;
    align-items:center;

    min-height:52px;

    padding:0 20px;

    cursor:pointer;
    list-style:none;
}

.history-friendly-details summary::-webkit-details-marker{
    display:none;
}

.history-friendly-details summary span{
    color:#91abb7;

    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
}

.history-friendly-details summary span::before{
    content:none;
    display:none;
}

.history-friendly-details[open]
summary span::before{
    content:none;
    display:none;
}

.history-friendly-details summary small{
    color:#536d79;
    font-size:9px;
}

.history-friendly-details-body{
    display:grid;

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

    gap:1px;

    border-top:
        1px solid rgba(97,221,255,.07);

    background:
        rgba(97,221,255,.06);
}

.history-friendly-details-body section{
    padding:18px 20px;

    background:
        rgba(3,12,19,.99);
}

.history-friendly-details
.history-forensic-heading{
    font-size:10px !important;
}

.history-friendly-details
.history-forensic-row{
    min-height:39px !important;
    padding:9px 0 !important;
}

.history-friendly-details
.history-forensic-row span{
    font-size:11px !important;
    line-height:1.4 !important;
}

.history-friendly-details
.history-forensic-row strong{
    font-size:11px !important;
    line-height:1.45 !important;
}

.history-ledger-panel .empty-state{
    min-height:150px;

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

    padding:30px;

    color:#7c96a2;

    font-size:13px;
    line-height:1.6;

    text-align:center;
}

.history-pagination button{
    min-height:42px !important;
    font-size:11px !important;
}

.history-pagination-clean strong{
    font-size:13px !important;
}

.history-pagination-clean span{
    font-size:10px !important;
}

@media(max-width:1050px){

    .history-friendly-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }
}

@media(max-width:760px){

    .history-friendly-card-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .history-friendly-grid{
        grid-template-columns:1fr;
    }

    .history-friendly-meta{
        grid-template-columns:1fr;
    }

    .history-friendly-details-body{
        grid-template-columns:1fr;
    }

    .history-friendly-primary strong{
        font-size:22px;
    }
}

/* PREMONEON HISTORY FRIENDLY UI V1 END */

/* =========================================================
   PREMONEON_VESTING_RELEASE_LAYOUT_FINAL_V1
   Locked Vesting allocation + release hierarchy
   Presentation only.
   ========================================================= */


/* ---------------------------------------------------------
   ALLOCATION BREAKDOWN
   --------------------------------------------------------- */

.vesting-allocation-breakdown{
  margin-bottom:14px;
}

.vesting-allocation-breakdown .vesting-command-row{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:20px;
}

.vesting-allocation-breakdown .claim-selection-state{
  min-height:118px;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  background:rgba(6,18,28,.52);
  border:1px solid rgba(97,221,255,.14);
}

.vesting-allocation-breakdown .claim-selection-state small{
  color:#607987;
  font-size:.48rem;
  letter-spacing:.12em;
}

.vesting-allocation-breakdown .claim-selection-state strong{
  display:block;
  color:var(--cyan);
  font-size:1.35rem;
  line-height:1.15;
}

.vesting-allocation-breakdown .claim-selection-state span{
  color:#8298a5;
  font-size:.65rem;
  line-height:1.55;
}


/* ---------------------------------------------------------
   TOKEN RELEASE CORE
   --------------------------------------------------------- */

.vesting-release-head-final{
  align-items:stretch;
  margin-top:6px;
}

.vesting-release-primary{
  flex:1;
  min-width:0;
}

.vesting-release-primary h2{
  margin:8px 0 4px;
}

.vesting-release-primary-value{
  margin:10px 0 7px;
  color:#f2f8fb;
  font-size:2rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.025em;
}

.vesting-release-primary-value small{
  color:var(--cyan);
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.08em;
}

.vesting-release-status-card{
  width:250px;
  min-height:116px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid rgba(97,221,255,.16);
  background:rgba(6,18,28,.62);
}

.vesting-release-status-card small{
  color:#607987;
  font-size:.46rem;
  letter-spacing:.12em;
}

.vesting-release-status-card strong{
  display:block;
  margin:8px 0 4px;
  color:#f2f8fb;
  font-size:1.65rem;
  line-height:1;
}

.vesting-release-status-card span{
  color:#758d9a;
  font-size:.60rem;
}


.vesting-release-selection-grid{
  display:grid;
  grid-template-columns:
    minmax(150px,.75fr)
    minmax(220px,1.1fr)
    minmax(260px,1.25fr);
  gap:10px;
  margin-top:18px;
}

.vesting-release-selection-card,
.vesting-release-action-card{
  min-height:100px;
  border:1px solid rgba(97,221,255,.11);
  background:rgba(4,14,22,.50);
}

.vesting-release-selection-card{
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.vesting-release-selection-card small{
  color:#607987;
  font-size:.46rem;
  letter-spacing:.12em;
}

.vesting-release-selection-card strong{
  display:block;
  margin:7px 0 4px;
  color:var(--cyan);
  font-size:1.35rem;
  line-height:1.1;
}

.vesting-release-selection-card strong em{
  font-size:.52rem;
  font-style:normal;
}

.vesting-release-selection-card span{
  color:#758d9a;
  font-size:.60rem;
  line-height:1.45;
}

.vesting-release-action-card{
  display:flex;
}

.vesting-release-claim-button{
  width:100%;
  min-height:100%;
  border:0;
}

.vesting-release-claim-button strong{
  overflow-wrap:anywhere;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1000px){

  .vesting-release-selection-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .vesting-release-action-card{
    grid-column:1 / -1;
  }

}


@media(max-width:760px){

  .vesting-allocation-breakdown .vesting-command-row{
    grid-template-columns:1fr;
  }

  .vesting-release-head-final{
    flex-direction:column;
  }

  .vesting-release-status-card{
    width:100%;
  }

  .vesting-release-selection-grid{
    grid-template-columns:1fr;
  }

  .vesting-release-action-card{
    grid-column:auto;
  }

}


/* ============================================================
   PREMONEON HISTORY PACKAGES FRIENDLY UI V2
   Presentation-only override.
   Canonical History data/runtime untouched.
   ============================================================ */


/* ------------------------------------------------------------
   PURCHASE CARD
   ------------------------------------------------------------ */

.history-purchase-card{
    border-radius:14px;
    overflow:hidden;
}


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

.history-purchase-top{
    min-height:104px;
    padding:20px 22px;
}

.history-purchase-identity{
    gap:16px;
}

.history-purchase-identity small{
    font-size:.72rem;
    line-height:1.35;
    font-weight:800;
    letter-spacing:.10em;
}

.history-purchase-identity h3{
    margin-top:6px;
    font-size:1.18rem;
    line-height:1.25;
    font-weight:900;
}

.history-purchase-identity p{
    margin-top:7px;
    font-size:.78rem;
    line-height:1.5;
}


/* Purchase sequence */

.history-sequence{
    min-width:48px;
    min-height:48px;

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

    font-size:.78rem;
    font-weight:900;

    border-radius:10px;
}


/* ------------------------------------------------------------
   STATUS
   ------------------------------------------------------------ */

.history-status-group{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:7px;
}

.history-status-badge{
    padding:7px 11px;

    font-size:.70rem;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.05em;

    border-radius:999px;
}

.history-status-group small{
    font-size:.68rem;
    line-height:1.3;
    font-weight:800;
}


/* ------------------------------------------------------------
   PRIMARY PACKAGE INFORMATION
   ------------------------------------------------------------ */

.history-package-main-grid{
    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:1px;
}

.history-package-metric{
    min-height:112px;
    padding:18px 20px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.history-package-metric small{
    font-size:.68rem;
    line-height:1.35;
    font-weight:800;
    letter-spacing:.08em;
}

.history-package-metric strong{
    margin-top:10px;

    font-size:1.02rem;
    line-height:1.35;
    font-weight:900;

    overflow-wrap:anywhere;
}

.history-package-metric strong > span{
    margin-left:5px;

    font-size:.68rem;
    line-height:1;
    font-weight:800;
}


/* Give financial figures stronger visual hierarchy */

.history-package-metric:nth-child(2) strong,
.history-package-metric:nth-child(3) strong,
.history-package-metric:nth-child(4) strong{
    font-size:1.12rem;
}


/* ------------------------------------------------------------
   SOURCE / ACCOUNT PROOF STRIP
   ------------------------------------------------------------ */

.history-purchase-proof-strip{
    grid-template-columns:
        1.2fr 1fr .8fr;
}

.history-purchase-proof-strip > div{
    min-height:78px;
    padding:15px 18px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.history-purchase-proof-strip small{
    font-size:.64rem;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.07em;
}

.history-purchase-proof-strip strong{
    margin-top:7px;

    font-size:.80rem;
    line-height:1.4;
    font-weight:800;

    overflow-wrap:anywhere;
}

.history-purchase-proof-strip strong span{
    margin-left:4px;

    font-size:.65rem;
    font-weight:800;
}


/* ------------------------------------------------------------
   FORENSIC DETAILS
   Keep technical information secondary but readable.
   ------------------------------------------------------------ */

.history-purchase-card .history-forensic-details{
    font-size:.78rem;
}

.history-purchase-card .history-forensic-details summary{
    min-height:48px;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.05em;
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width:1100px){

    .history-package-main-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .history-purchase-proof-strip{
        grid-template-columns:
            1fr 1fr;
    }
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width:700px){

    .history-purchase-top{
        padding:18px;
        align-items:flex-start;
        flex-direction:column;
    }

    .history-status-group{
        align-items:flex-start;
        text-align:left;
    }

    .history-package-main-grid{
        grid-template-columns:1fr;
    }

    .history-package-metric{
        min-height:92px;
        padding:16px 18px;
    }

    .history-package-metric strong{
        font-size:1rem;
    }

    .history-package-metric:nth-child(2) strong,
    .history-package-metric:nth-child(3) strong,
    .history-package-metric:nth-child(4) strong{
        font-size:1.08rem;
    }

    .history-purchase-proof-strip{
        grid-template-columns:1fr;
    }

    .history-purchase-proof-strip > div{
        min-height:70px;
    }
}


/* PREMONEON HISTORY PACKAGES FRIENDLY UI V2 END */


/* ============================================================
   PREMONEON HISTORY PACKAGE FORENSIC DETAILS UI V1
   Presentation-only override.
   ============================================================ */


/* ------------------------------------------------------------
   DROPDOWN CONTAINER
   ------------------------------------------------------------ */

.history-purchase-card .history-forensic-details{
    font-size:.82rem;
    line-height:1.5;
}


/* ------------------------------------------------------------
   VIEW FORENSIC DETAILS BUTTON / SUMMARY
   ------------------------------------------------------------ */

.history-purchase-card .history-forensic-details summary{
    min-height:52px;
    padding:15px 18px;

    display:flex;
    align-items:center;
    gap:10px;

    font-size:.76rem;
    line-height:1.35;
    font-weight:900;
    letter-spacing:.055em;

    cursor:pointer;
}


/* ------------------------------------------------------------
   OPENED FORENSIC CONTENT
   ------------------------------------------------------------ */

.history-purchase-card .history-forensic-details[open]{
    padding-bottom:4px;
}


/* ------------------------------------------------------------
   ALL LABELS INSIDE FORENSIC DETAILS
   ------------------------------------------------------------ */

.history-purchase-card .history-forensic-details small{
    font-size:.68rem;
    line-height:1.4;
    font-weight:800;
    letter-spacing:.06em;
}


/* ------------------------------------------------------------
   ALL VALUES INSIDE FORENSIC DETAILS
   ------------------------------------------------------------ */

.history-purchase-card .history-forensic-details strong{
    font-size:.82rem;
    line-height:1.5;
    font-weight:800;

    overflow-wrap:anywhere;
    word-break:break-word;
}


/* ------------------------------------------------------------
   NORMAL TEXT
   ------------------------------------------------------------ */

.history-purchase-card .history-forensic-details p,
.history-purchase-card .history-forensic-details span{
    font-size:.76rem;
    line-height:1.5;
}


/* ------------------------------------------------------------
   MONOSPACE / HASH / REFERENCE VALUES
   ------------------------------------------------------------ */

.history-purchase-card .history-forensic-details code{
    font-size:.75rem;
    line-height:1.55;

    overflow-wrap:anywhere;
    word-break:break-all;
}


/* ------------------------------------------------------------
   GRID CELLS
   Give forensic information breathing room.
   ------------------------------------------------------------ */

.history-purchase-card .history-forensic-details > div{
    line-height:1.5;
}

.history-purchase-card .history-forensic-details [class*="grid"] > div{
    min-height:72px;
    padding:14px 16px;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width:700px){

    .history-purchase-card .history-forensic-details summary{
        min-height:50px;
        padding:14px 16px;

        font-size:.74rem;
    }

    .history-purchase-card .history-forensic-details small{
        font-size:.66rem;
    }

    .history-purchase-card .history-forensic-details strong{
        font-size:.79rem;
    }

    .history-purchase-card .history-forensic-details code{
        font-size:.72rem;
    }
}


/* PREMONEON HISTORY PACKAGE FORENSIC DETAILS UI V1 END */


/* ============================================================
   PREMONEON ACCOUNT HISTORY FRIENDLY UI V1
   Presentation-only override.
   ============================================================ */


/* ------------------------------------------------------------
   ACCOUNT HISTORY SECTION
   ------------------------------------------------------------ */

.history-account-panel,
.history-account-summary,
.history-account-card{
    line-height:1.5;
}


/* ------------------------------------------------------------
   ACCOUNT HISTORY TITLE
   ------------------------------------------------------------ */

.history-account-panel h2,
.history-account-summary h2,
.history-account-card h2{
    font-size:1.15rem;
    line-height:1.25;
    font-weight:900;
    letter-spacing:.01em;
}


/* ------------------------------------------------------------
   SECTION EYEBROW / SMALL HEADING
   ------------------------------------------------------------ */

.history-account-panel > small,
.history-account-summary > small,
.history-account-card > small{
    font-size:.70rem;
    line-height:1.4;
    font-weight:800;
    letter-spacing:.08em;
}


/* ------------------------------------------------------------
   DESCRIPTION
   ------------------------------------------------------------ */

.history-account-panel p,
.history-account-summary p,
.history-account-card p{
    font-size:.78rem;
    line-height:1.55;
}


/* ------------------------------------------------------------
   FIELD LABELS
   ------------------------------------------------------------ */

.history-account-panel small,
.history-account-summary small,
.history-account-card small{
    font-size:.68rem;
    line-height:1.4;
    font-weight:800;
    letter-spacing:.055em;
}


/* ------------------------------------------------------------
   FIELD VALUES
   ------------------------------------------------------------ */

.history-account-panel strong,
.history-account-summary strong,
.history-account-card strong{
    font-size:.84rem;
    line-height:1.45;
    font-weight:850;

    overflow-wrap:anywhere;
}


/* ------------------------------------------------------------
   ACCOUNT ADDRESS / HASH STYLE VALUES
   ------------------------------------------------------------ */

.history-account-panel code,
.history-account-summary code,
.history-account-card code{
    font-size:.76rem;
    line-height:1.5;

    overflow-wrap:anywhere;
    word-break:break-all;
}


/* ------------------------------------------------------------
   ACCOUNT HISTORY CELLS
   ------------------------------------------------------------ */

.history-account-panel [class*="grid"] > div,
.history-account-summary [class*="grid"] > div,
.history-account-card [class*="grid"] > div{
    min-height:76px;
    padding:15px 17px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}


/* ------------------------------------------------------------
   IMPORTANT NUMERIC VALUES
   ------------------------------------------------------------ */

.history-account-panel [class*="metric"] strong,
.history-account-summary [class*="metric"] strong,
.history-account-card [class*="metric"] strong{
    font-size:1rem;
    font-weight:900;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width:700px){

    .history-account-panel h2,
    .history-account-summary h2,
    .history-account-card h2{
        font-size:1.05rem;
    }

    .history-account-panel p,
    .history-account-summary p,
    .history-account-card p{
        font-size:.76rem;
    }

    .history-account-panel strong,
    .history-account-summary strong,
    .history-account-card strong{
        font-size:.80rem;
    }

    .history-account-panel code,
    .history-account-summary code,
    .history-account-card code{
        font-size:.72rem;
    }

    .history-account-panel [class*="grid"] > div,
    .history-account-summary [class*="grid"] > div,
    .history-account-card [class*="grid"] > div{
        min-height:70px;
        padding:14px 15px;
    }
}


/* PREMONEON ACCOUNT HISTORY FRIENDLY UI V1 END */


/* ============================================================
   PREMONEON HISTORY DESKTOP CATEGORY NAV V1
   Presentation only.
   Runtime/data bindings untouched.
   ============================================================ */


/* ------------------------------------------------------------
   ACTIVITY HISTORY HEADING
   ------------------------------------------------------------ */

.history-activity-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:24px;

    margin-top:28px;
    margin-bottom:14px;

    padding:0 2px;
}

.history-activity-heading > div{
    display:flex;
    flex-direction:column;

    gap:5px;
}

.history-activity-heading span{
    color:#7f9aa7;

    font-size:12px;
    line-height:1.25;

    font-weight:700;
    letter-spacing:.06em;
}

.history-activity-heading strong{
    color:#dceaf0;

    font-size:19px;
    line-height:1.25;

    font-weight:900;
    letter-spacing:.015em;
}


/* ------------------------------------------------------------
   FILTER SHELL
   ------------------------------------------------------------ */

.history-filter-shell{
    overflow:hidden;

    border:
        1px solid
        rgba(97,221,255,.13);

    border-radius:14px;

    background:
        linear-gradient(
            180deg,
            rgba(5,17,27,.94),
            rgba(3,12,20,.96)
        );
}


/* ============================================================
   DESKTOP CATEGORY TILES
   ============================================================ */

@media(min-width:901px){

    .history-tabs{
        display:grid !important;

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

        width:100%;

        overflow:visible !important;

        border-bottom:
            1px solid
            rgba(97,221,255,.10);

        background:
            rgba(97,221,255,.025);
    }


    .history-tabs button{
        position:relative;

        min-width:0 !important;
        width:auto !important;

        min-height:108px !important;

        padding:
            18px
            14px
            14px !important;

        display:flex !important;
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-end;

        gap:8px;

        border:0 !important;

        border-right:
            1px solid
            rgba(97,221,255,.075) !important;

        border-bottom:
            1px solid
            rgba(97,221,255,.075) !important;

        background:
            rgba(3,13,21,.56) !important;

        color:#819aa6 !important;

        text-align:left !important;

        font-size:11px !important;
        line-height:1.35 !important;

        font-weight:850 !important;

        letter-spacing:.045em !important;

        white-space:normal !important;

        cursor:pointer;

        transition:
            background .18s ease,
            color .18s ease,
            border-color .18s ease,
            transform .18s ease,
            box-shadow .18s ease;
    }


    /*
     * Remove old underline-tab behavior.
     */

    .history-tabs button::after{
        display:none !important;
    }


    /*
     * Domain icon.
     */

    .history-tabs button::before{
        display:flex;

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

        width:34px;
        height:34px;

        margin-bottom:auto;

        border:
            1px solid
            rgba(97,221,255,.13);

        border-radius:10px;

        background:
            rgba(97,221,255,.035);

        color:#78929f;

        font-size:16px;
        line-height:1;

        font-weight:700;

        transition:
            color .18s ease,
            background .18s ease,
            border-color .18s ease,
            box-shadow .18s ease;
    }


    /* --------------------------------------------------------
       DOMAIN ICONS
       -------------------------------------------------------- */

    .history-tabs
    button[data-history-domain="purchases"]::before{
        content:"â—‡";
    }

    .history-tabs
    button[data-history-domain="maturity-schedules"]::before{
        content:"â—·";
    }

    .history-tabs
    button[data-history-domain="maturity-withdrawals"]::before{
        content:"↓";
    }

    .history-tabs
    button[data-history-domain="unilevel-rewards"]::before{
        content:"⇄";
    }

    .history-tabs
    button[data-history-domain="unilevel-withdrawals"]::before{
        content:"↧";
    }

    .history-tabs
    button[data-history-domain="vesting-schedules"]::before{
        content:"⌛";
    }

    .history-tabs
    button[data-history-domain="token-claims"]::before{
        content:"✓";
    }

    .history-tabs
    button[data-history-domain="special-account-lifecycle"]::before{
        content:"â—Ž";
    }

    .history-tabs
    button[data-history-domain="special-account-payouts"]::before{
        content:"$";
    }

    .history-tabs
    button[data-history-domain="sales-incentive-lifecycle"]::before{
        content:"★";
    }


    /* --------------------------------------------------------
       HOVER
       -------------------------------------------------------- */

    .history-tabs button:hover{
        color:#c3d7df !important;

        background:
            rgba(97,221,255,.055) !important;
    }

    .history-tabs button:hover::before{
        color:#b7d9e4;

        border-color:
            rgba(97,221,255,.24);

        background:
            rgba(97,221,255,.07);
    }


    /* --------------------------------------------------------
       ACTIVE CATEGORY
       -------------------------------------------------------- */

    .history-tabs button.active{
        z-index:2;

        color:var(--cyan) !important;

        background:
            linear-gradient(
                180deg,
                rgba(97,221,255,.115),
                rgba(97,221,255,.035)
            ) !important;

        box-shadow:
            inset 0 -2px 0 var(--cyan),
            inset 0 0 0 1px rgba(97,221,255,.14),
            0 0 20px rgba(97,221,255,.035);
    }


    .history-tabs button.active::before{
        color:var(--cyan);

        border-color:
            rgba(97,221,255,.42);

        background:
            rgba(97,221,255,.105);

        box-shadow:
            0 0 14px
            rgba(97,221,255,.10);
    }


    /*
     * Remove right border from end of each row.
     */

    .history-tabs button:nth-child(5n){
        border-right:0 !important;
    }


    /*
     * Second row has no bottom border.
     */

    .history-tabs button:nth-child(n+6){
        border-bottom:0 !important;
    }

}


/* ============================================================
   FILTER CONTROLS — DESKTOP
   ============================================================ */

@media(min-width:901px){

    .history-controls{
        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            210px
            145px !important;

        gap:12px !important;

        padding:16px !important;
    }


    .history-controls label{
        padding:0 !important;
    }


    .history-controls label > span{
        display:block;

        margin-bottom:8px !important;

        color:#718b98;

        font-size:10px !important;
        line-height:1.25;

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


    .history-controls input,
    .history-controls select{
        min-height:46px !important;

        padding:
            0
            14px !important;

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

        border-radius:8px;

        background:
            rgba(1,9,15,.72);

        color:#bfd1d9;

        font-size:12px !important;
    }


    .history-controls input:focus,
    .history-controls select:focus{
        border-color:
            rgba(97,221,255,.34);

        box-shadow:
            0 0 0 2px
            rgba(97,221,255,.045);
    }

}


/* PREMONEON HISTORY DESKTOP CATEGORY NAV V1 END */


/* ============================================================
   PREMONEON HISTORY CATEGORY SVG ICONS V1
   ============================================================ */


/* remove old text pseudo-icons */
.history-tabs button::before{
    content:none !important;
}


/* icon holder */
.history-tab-icon{
    width:34px;
    height:34px;

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

    flex:0 0 34px;

    border:
        1px solid
        rgba(97,221,255,.14);

    border-radius:10px;

    background:
        linear-gradient(
            180deg,
            rgba(97,221,255,.055),
            rgba(97,221,255,.018)
        );

    color:#6f8996;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


/* svg itself */
.history-tab-icon svg{
    width:19px;
    height:19px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;

    vector-effect:
        non-scaling-stroke;
}


/* label */
.history-tab-label{
    display:block;

    min-width:0;

    color:inherit;

    font:inherit;

    line-height:inherit;

    letter-spacing:inherit;
}


/* hover */
.history-tabs button:hover .history-tab-icon{
    color:#abd4e0;

    border-color:
        rgba(97,221,255,.28);

    background:
        linear-gradient(
            180deg,
            rgba(97,221,255,.09),
            rgba(97,221,255,.025)
        );

    transform:
        translateY(-1px);
}


/* active */
.history-tabs button.active .history-tab-icon{
    color:var(--cyan);

    border-color:
        rgba(97,221,255,.46);

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(97,221,255,.16),
            rgba(97,221,255,.055) 68%,
            rgba(97,221,255,.02)
        );

    box-shadow:
        0 0 15px
        rgba(97,221,255,.10),
        inset 0 0 0 1px
        rgba(97,221,255,.04);
}


/* subtle active icon highlight */
.history-tabs button.active .history-tab-icon svg{
    filter:
        drop-shadow(
            0 0 3px
            rgba(97,221,255,.24)
        );
}


/* mobile keeps same size */
@media(max-width:700px){

    .history-tab-icon{
        width:34px;
        height:34px;

        flex-basis:34px;
    }

    .history-tab-icon svg{
        width:18px;
        height:18px;
    }

}


/* PREMONEON HISTORY CATEGORY SVG ICONS V1 END */


/* ============================================================
   PREMONEON HISTORY CATEGORY HORIZONTAL V1
   Icon left + category label right.
   Card size and runtime untouched.
   ============================================================ */

@media(min-width:901px){

    .history-tabs button{
        flex-direction:row !important;

        align-items:center !important;
        justify-content:flex-start !important;

        gap:12px !important;

        padding:
            0
            18px !important;

        min-height:78px !important;

        text-align:left !important;
    }


    .history-tab-icon{
        flex:0 0 34px;

        margin:0 !important;
    }


    .history-tab-label{
        display:flex;

        align-items:center;

        min-width:0;

        font-size:11px !important;
        line-height:1.3 !important;

        font-weight:850 !important;

        letter-spacing:.045em !important;
    }

}


/* ------------------------------------------------------------
   TABLET / MOBILE
   Same horizontal structure
   ------------------------------------------------------------ */

@media(max-width:900px){

    .history-tabs button{
        flex-direction:row !important;

        align-items:center !important;
        justify-content:flex-start !important;

        gap:10px !important;

        text-align:left !important;
    }


    .history-tab-icon{
        margin:0 !important;
    }


    .history-tab-label{
        text-align:left !important;
    }

}


/* PREMONEON HISTORY CATEGORY HORIZONTAL V1 END */


/* ============================================================
   PREMONEON HISTORY FILTER PROPORTION V1
   ============================================================ */


/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

@media(min-width:901px){

    .history-controls{
        display:grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            220px
            150px !important;

        align-items:stretch !important;

        gap:0 !important;

        padding:0 !important;

        min-height:92px !important;
    }


    .history-controls > label{
        display:flex !important;

        flex-direction:column !important;

        justify-content:center !important;

        gap:11px !important;

        min-width:0 !important;

        padding:
            15px
            16px !important;

        margin:0 !important;

        border:0 !important;
        border-right:
            1px solid
            rgba(99,219,255,.10) !important;

        background:
            rgba(2,13,20,.18) !important;
    }


    .history-controls > label:last-child{
        border-right:0 !important;
    }


    /* control labels */

    .history-controls > label > span{
        display:block !important;

        margin:0 !important;
        padding:0 !important;

        font-size:10px !important;
        line-height:1 !important;

        font-weight:800 !important;

        letter-spacing:.055em !important;

        color:#718d9a !important;
    }


    /* input + selects */

    .history-controls input,
    .history-controls select{
        width:100% !important;
        height:48px !important;

        min-height:48px !important;

        margin:0 !important;

        padding:
            0
            15px !important;

        box-sizing:border-box !important;

        border:
            1px solid
            rgba(99,219,255,.13) !important;

        border-radius:4px !important;

        background:
            rgba(1,10,16,.48) !important;

        color:#b8cbd3 !important;

        font-size:12px !important;
        line-height:48px !important;

        outline:none !important;
    }


    .history-controls input::placeholder{
        color:#627680 !important;
        opacity:.82 !important;
    }


    .history-controls input:focus,
    .history-controls select:focus{
        border-color:
            rgba(78,224,255,.48) !important;

        box-shadow:
            0 0 0 2px
            rgba(78,224,255,.045) !important;
    }


    /* search gets slightly more breathing room */

    .history-search-control{
        padding-left:18px !important;
        padding-right:14px !important;
    }

}


/* ------------------------------------------------------------
   MOBILE / TABLET
   ------------------------------------------------------------ */

@media(max-width:900px){

    .history-controls{
        display:grid !important;

        grid-template-columns:1fr !important;

        gap:10px !important;

        padding:12px !important;
    }


    .history-controls > label{
        display:flex !important;

        flex-direction:column !important;

        gap:9px !important;

        padding:12px !important;

        margin:0 !important;

        border:
            1px solid
            rgba(99,219,255,.10) !important;
    }


    .history-controls > label > span{
        margin:0 !important;

        font-size:10px !important;
        line-height:1.2 !important;
    }


    .history-controls input,
    .history-controls select{
        width:100% !important;

        height:48px !important;
        min-height:48px !important;

        margin:0 !important;

        padding:
            0
            14px !important;

        box-sizing:border-box !important;
    }

}


/* PREMONEON HISTORY FILTER PROPORTION V1 END */


/* ============================================================
   PREMONEON HISTORY ACTIVITY OVERVIEW TYPOGRAPHY V2
   Presentation only.
   ============================================================ */


/* ------------------------------------------------------------
   SECTION INTRO
   ------------------------------------------------------------ */

.history-overview-panel
.history-section-intro{
    gap:24px;
}

.history-overview-panel
.panel-kicker{
    font-size:11px !important;
    line-height:1.3 !important;

    font-weight:850 !important;
    letter-spacing:.10em !important;
}

.history-overview-panel
.section-title{
    margin-top:10px !important;

    font-size:24px !important;
    line-height:1.2 !important;

    font-weight:900 !important;
}

.history-overview-panel
.section-copy{
    margin-top:10px !important;

    font-size:13px !important;
    line-height:1.6 !important;

    color:#8199a5 !important;
}


/* ------------------------------------------------------------
   CAPTURE BLOCK
   ------------------------------------------------------------ */

.history-capture-proof{
    min-width:170px;

    padding-left:20px !important;
}

.history-capture-proof small{
    font-size:9px !important;
    line-height:1.3 !important;

    font-weight:800 !important;
    letter-spacing:.08em !important;
}

.history-capture-proof strong{
    margin-top:7px !important;

    font-size:15px !important;
    line-height:1.2 !important;

    font-weight:900 !important;
}

.history-capture-proof span{
    margin-top:6px !important;

    font-size:10px !important;
    line-height:1.4 !important;
}


/* ------------------------------------------------------------
   SUMMARY GRID
   ------------------------------------------------------------ */

.history-summary-grid{
    margin-top:28px !important;
}

.history-summary-card{
    min-height:150px !important;

    padding:20px 18px !important;
}


/* category heading */

.history-summary-label{
    font-size:10px !important;
    line-height:1.3 !important;

    font-weight:850 !important;
    letter-spacing:.075em !important;

    color:#78929e !important;
}


/* main numeric value */

.history-summary-main{
    margin-top:17px !important;
}

.history-summary-main strong{
    font-size:24px !important;
    line-height:1 !important;

    font-weight:900 !important;

    color:#d9e8ee !important;
}

.history-summary-main span{
    display:block;

    margin-top:8px !important;

    font-size:10px !important;
    line-height:1.35 !important;

    font-weight:800 !important;
    letter-spacing:.06em !important;

    color:#68818d !important;
}


/* ------------------------------------------------------------
   SECONDARY VALUE
   ------------------------------------------------------------ */

.history-summary-secondary{
    margin-top:18px !important;
    padding-top:13px !important;

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

    gap:12px;
}

.history-summary-secondary span{
    font-size:9px !important;
    line-height:1.3 !important;

    font-weight:800 !important;
    letter-spacing:.055em !important;

    color:#5f7884 !important;
}

.history-summary-secondary strong{
    font-size:12px !important;
    line-height:1 !important;

    font-weight:900 !important;

    color:#a9bec7 !important;
}


/* ------------------------------------------------------------
   SALES INCENTIVES STRIP
   ------------------------------------------------------------ */

.history-incentive-strip{
    min-height:58px !important;

    padding:
        0
        18px !important;

    align-items:center !important;
}

.history-incentive-strip > span{
    font-size:10px !important;
    line-height:1.3 !important;

    font-weight:850 !important;
    letter-spacing:.075em !important;

    color:#78929e !important;
}

.history-incentive-strip > div{
    gap:8px !important;
}

.history-incentive-strip small{
    font-size:9px !important;
    line-height:1.3 !important;

    font-weight:800 !important;

    color:#617985 !important;
}

.history-incentive-strip strong{
    font-size:12px !important;
    line-height:1 !important;

    font-weight:900 !important;

    color:#b4c9d1 !important;
}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media(max-width:1000px){

    .history-overview-panel
    .section-title{
        font-size:22px !important;
    }

    .history-summary-main strong{
        font-size:22px !important;
    }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media(max-width:700px){

    .history-overview-panel
    .history-section-intro{
        flex-direction:column;
        align-items:flex-start;
    }

    .history-overview-panel
    .section-title{
        font-size:20px !important;
    }

    .history-overview-panel
    .section-copy{
        font-size:12px !important;
    }

    .history-capture-proof{
        min-width:0;
        padding-left:0 !important;
    }

    .history-summary-card{
        min-height:125px !important;
        padding:17px !important;
    }

    .history-summary-main strong{
        font-size:21px !important;
    }

}


/* PREMONEON HISTORY ACTIVITY OVERVIEW TYPOGRAPHY V2 END */


/* ============================================================
   PREMONEON HISTORY HEADER SOURCE PROOF V1
   Presentation only.
   ============================================================ */


/* ------------------------------------------------------------
   SOURCE / CAPTURE BLOCK PROOF AREA
   ------------------------------------------------------------ */

.history-header-proof{
    display:grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(130px,auto)
        ) !important;

    gap:0 !important;

    min-width:300px;

    border:
        1px solid
        rgba(97,221,255,.10);

    border-radius:10px;

    overflow:hidden;

    background:
        rgba(3,13,21,.45);
}


.history-header-proof > div{
    min-height:78px;

    padding:
        15px
        18px !important;

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

    gap:7px;

    border-right:
        1px solid
        rgba(97,221,255,.08);
}


.history-header-proof > div:last-child{
    border-right:0;
}


/* ------------------------------------------------------------
   SMALL LABEL
   SOURCE / CAPTURE BLOCK
   ------------------------------------------------------------ */

.history-header-proof small{
    display:block;

    margin:0 !important;

    color:#69838f !important;

    font-size:10px !important;
    line-height:1.2 !important;

    font-weight:850 !important;

    letter-spacing:.075em !important;
}


/* ------------------------------------------------------------
   MAIN VALUE
   HISTORYVIEWER / BLOCK NUMBER
   ------------------------------------------------------------ */

.history-header-proof strong{
    display:block;

    margin:0 !important;

    color:#d0e0e6 !important;

    font-size:14px !important;
    line-height:1.25 !important;

    font-weight:900 !important;

    letter-spacing:.015em !important;

    overflow-wrap:anywhere;
}


/* Highlight canonical source slightly */

.history-header-proof > div:first-child strong{
    color:var(--cyan) !important;
}


/* Keep block numeric value prominent */

.history-header-proof > div:last-child strong{
    font-size:15px !important;
    letter-spacing:.02em !important;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media(max-width:900px){

    .history-header-proof{
        min-width:0;

        width:100%;

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

}


@media(max-width:520px){

    .history-header-proof{
        grid-template-columns:1fr !important;
    }

    .history-header-proof > div{
        min-height:68px;

        border-right:0;

        border-bottom:
            1px solid
            rgba(97,221,255,.08);
    }

    .history-header-proof > div:last-child{
        border-bottom:0;
    }

}


/* PREMONEON HISTORY HEADER SOURCE PROOF V1 END */


/* =========================================================
   PREMONEON_VESTING_READABLE_SCHEDULE_V1
   User-readable Vesting schedule hierarchy
   ========================================================= */

.vesting-card-available{
  margin:18px 0 12px;
}

.vesting-card-available small{
  display:block;
  color:#607987;
  font-size:.46rem;
  letter-spacing:.12em;
  margin-bottom:5px;
}

.vesting-card-available strong{
  color:#f3f8fb;
  font-size:1.75rem;
  line-height:1;
}

.vesting-card-available span{
  color:var(--cyan);
  font-size:.52rem;
  font-weight:700;
  margin-left:4px;
}


.vesting-detail-section{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(97,221,255,.09);
}

.vesting-detail-title{
  margin-bottom:11px;
  color:#718b99;
  font-size:.47rem;
  font-weight:700;
  letter-spacing:.13em;
}


.vesting-readable-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.vesting-readable-grid > div{
  min-height:62px;
  padding:10px 11px;
  border:1px solid rgba(97,221,255,.08);
  background:rgba(4,14,22,.40);
}

.vesting-readable-grid small{
  display:block;
  margin-bottom:6px;
  color:#5f7886;
  font-size:.42rem;
  line-height:1.35;
  letter-spacing:.08em;
}

.vesting-readable-grid strong{
  display:block;
  color:#e8f1f5;
  font-size:.74rem;
  line-height:1.25;
}


.vesting-readable-timeline{
  display:grid;
  gap:7px;
}

.vesting-readable-timeline > div{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:10px;
  align-items:center;
  min-height:42px;
  padding:8px 10px;
  border-left:2px solid rgba(97,221,255,.15);
  background:rgba(4,14,22,.34);
}

.vesting-readable-timeline span{
  color:#607987;
  font-size:.42rem;
  letter-spacing:.09em;
}

.vesting-readable-timeline b{
  color:#c8d7de;
  font-size:.61rem;
  font-weight:600;
  line-height:1.4;
}


@media(max-width:760px){

  .vesting-readable-grid{
    grid-template-columns:1fr;
  }

  .vesting-readable-timeline > div{
    grid-template-columns:1fr;
    gap:4px;
  }

}


/* =========================================================
   PREMONEON_VESTING_PREMIUM_SCHEDULE_LAYOUT_V1
   User-friendly premium Vesting schedule presentation
   ========================================================= */

.vesting-premium-section{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid rgba(97,221,255,.10);
}

.vesting-premium-heading{
  margin-bottom:16px;
}

.vesting-premium-heading small{
  display:block;
  color:#718b99;
  font-size:.48rem;
  font-weight:800;
  letter-spacing:.14em;
}

.vesting-premium-heading h3{
  margin:5px 0 0;
  color:#eaf3f7;
  font-size:.78rem;
  font-weight:600;
}


/* ---------------------------------------------------------
   YOUR VESTING
   --------------------------------------------------------- */

.vesting-premium-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.vesting-premium-summary-card{
  min-height:150px;
  padding:18px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid rgba(97,221,255,.14);
  background:
    linear-gradient(
      145deg,
      rgba(8,25,37,.72),
      rgba(3,12,20,.70)
    );
}

.vesting-premium-summary-card small{
  color:#6f8794;
  font-size:.46rem;
  letter-spacing:.08em;
}

.vesting-premium-summary-card strong{
  display:block;
  margin-top:10px;
  color:#f3f8fb;
  font-size:1.45rem;
  line-height:1;
}

.vesting-premium-summary-card > span{
  margin-top:5px;
  color:var(--cyan);
  font-size:.50rem;
  font-weight:800;
}

.vesting-premium-summary-card p{
  margin:12px 0 0;
  color:#8599a4;
  font-size:.58rem;
  line-height:1.5;
}

.vesting-premium-summary-card-locked{
  border-color:rgba(255,105,105,.16);
}


/* ---------------------------------------------------------
   RELEASE PLAN
   --------------------------------------------------------- */

.vesting-premium-release-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.vesting-premium-release-card{
  min-height:142px;
  padding:17px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border:1px solid rgba(97,221,255,.13);
  background:rgba(4,15,24,.54);
}

.vesting-premium-release-card small{
  color:#718b99;
  font-size:.46rem;
  letter-spacing:.08em;
}

.vesting-premium-release-card strong{
  display:block;
  margin-top:10px;
  color:#eaf3f7;
  font-size:1.35rem;
  line-height:1;
}

.vesting-premium-release-card > span{
  display:block;
  margin-top:5px;
  color:var(--cyan);
  font-size:.50rem;
  font-weight:800;
}

.vesting-premium-release-card p{
  margin:12px 0 0;
  color:#8297a3;
  font-size:.58rem;
  line-height:1.45;
}

.vesting-premium-progress-card strong{
  color:var(--cyan);
}


.vesting-premium-info{
  margin-top:12px;
  padding:14px 16px;
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid rgba(65,218,255,.20);
  background:rgba(4,22,31,.62);
}

.vesting-premium-info-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  border:1px solid var(--cyan);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--cyan);
  font-size:.7rem;
  font-weight:800;
}

.vesting-premium-info p{
  margin:0;
  color:#9aadb7;
  font-size:.62rem;
  line-height:1.55;
}

.vesting-premium-info strong{
  color:#dbe7ec;
}


/* ---------------------------------------------------------
   TIMELINE
   --------------------------------------------------------- */

.vesting-premium-timeline{
  position:relative;
  display:grid;
  gap:8px;
  padding-left:18px;
}

.vesting-premium-timeline:before{
  content:"";
  position:absolute;
  left:5px;
  top:18px;
  bottom:18px;
  width:1px;
  background:rgba(87,229,255,.32);
}

.vesting-premium-timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:minmax(190px,.9fr) 1fr;
  gap:12px;
  align-items:center;
  min-height:62px;
  padding:11px 12px 11px 18px;
  border:1px solid rgba(97,221,255,.10);
  background:rgba(4,15,23,.48);
}

.vesting-premium-timeline-dot{
  position:absolute;
  left:-18px;
  width:12px;
  height:12px;
  border:2px solid var(--cyan);
  border-radius:50%;
  background:#07141d;
}

.vesting-premium-timeline-main small{
  display:block;
  color:var(--cyan);
  font-size:.46rem;
  font-weight:800;
  letter-spacing:.09em;
}

.vesting-premium-timeline-main strong{
  display:block;
  margin-top:4px;
  color:#e9f1f5;
  font-size:.68rem;
}

.vesting-premium-timeline-note{
  padding:9px 11px;
  color:#8da1ab;
  font-size:.60rem;
  border:1px solid rgba(97,221,255,.08);
  background:rgba(8,23,33,.46);
}


/* ---------------------------------------------------------
   CLAIM REMINDER
   --------------------------------------------------------- */

.vesting-premium-reminder{
  margin-top:14px;
  padding:14px 16px;
  display:flex;
  gap:13px;
  align-items:center;
  border:1px solid rgba(65,218,255,.20);
  background:rgba(5,23,31,.58);
}

.vesting-premium-reminder-icon{
  color:#7cff77;
  font-size:1.1rem;
}

.vesting-premium-reminder strong{
  color:#eaf3f7;
  font-size:.66rem;
}

.vesting-premium-reminder p{
  margin:4px 0 0;
  color:#849aa5;
  font-size:.59rem;
  line-height:1.45;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1150px){

  .vesting-premium-summary-grid,
  .vesting-premium-release-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}

@media(max-width:760px){

  .vesting-premium-summary-grid,
  .vesting-premium-release-grid{
    grid-template-columns:1fr;
  }

  .vesting-premium-timeline-item{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   PREMONEON_VESTING_PREMIUM_VISUAL_V2_FIXED
   Final value sizing + SVG visual hierarchy
   ========================================================= */

.vesting-premium-heading-with-icon{
  display:flex;
  align-items:center;
  gap:10px;
}

.vesting-premium-heading-with-icon > div{
  min-width:0;
}

.vesting-premium-heading-with-icon small{
  color:#e2edf1;
  font-size:.61rem;
  font-weight:800;
  letter-spacing:.07em;
}

.vesting-premium-heading-with-icon h3{
  margin:3px 0 0;
  color:#90a6b1;
  font-size:.58rem;
  font-weight:500;
}


/* ICON SYSTEM */

.vesting-premium-icon{
  width:30px;
  height:30px;

  flex:0 0 30px;

  display:grid;
  place-items:center;

  color:#46dfff;

  border:1px solid rgba(73,211,255,.27);
  border-radius:7px;

  background:
    linear-gradient(
      145deg,
      rgba(16,52,71,.55),
      rgba(4,18,27,.80)
    );
}

.vesting-premium-icon svg{
  width:18px;
  height:18px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.vesting-premium-summary-card > .vesting-premium-icon,
.vesting-premium-release-card > .vesting-premium-icon{
  margin:0 auto 9px;
}


/* YOUR VESTING */

.vesting-premium-summary-card{
  min-height:190px;
  padding:17px 10px;
}

.vesting-premium-summary-card small{
  min-height:28px;

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

  font-size:.50rem;
  font-weight:800;
  line-height:1.35;
}

.vesting-premium-summary-card strong{
  display:block;

  margin-top:9px;

  font-size:1.72rem;
  font-weight:850;
  line-height:1;

  letter-spacing:-.025em;
}

.vesting-premium-summary-card > span{
  display:block;

  margin-top:6px;

  font-size:.48rem;
  font-weight:800;

  letter-spacing:.06em;
}

.vesting-premium-summary-card p{
  max-width:130px;

  margin:13px auto 0;

  font-size:.57rem;
  line-height:1.52;
}


/* COLORS */

.vesting-summary-allocation > .vesting-premium-icon{
  color:#3ce88d;
}

.vesting-summary-allocation small{
  color:#6edfab;
}

.vesting-summary-claimed > .vesting-premium-icon{
  color:#62aaff;
}

.vesting-summary-claimed small{
  color:#77b4ff;
}

.vesting-summary-remaining > .vesting-premium-icon{
  color:#ffc538;
}

.vesting-summary-remaining small{
  color:#e7bb3c;
}

.vesting-summary-locked{
  border-color:rgba(255,91,91,.21);
}

.vesting-summary-locked > .vesting-premium-icon{
  color:#ff6262;
}

.vesting-summary-locked small{
  color:#e36b6b;
}


/* RELEASE PLAN */

.vesting-premium-release-card{
  min-height:190px;
  padding:17px 10px;
}

.vesting-premium-release-card small{
  min-height:28px;

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

  font-size:.49rem;
  font-weight:800;
  line-height:1.32;
}

.vesting-premium-release-card strong{
  margin-top:9px;

  font-size:1.66rem;
  font-weight:850;
  line-height:1;

  letter-spacing:-.025em;
}

.vesting-premium-release-card > span{
  display:block;

  margin-top:6px;

  font-size:.47rem;
  font-weight:800;
}

.vesting-premium-release-card p{
  max-width:132px;

  margin:13px auto 0;

  font-size:.57rem;
  line-height:1.5;
}


.vesting-release-immediate > .vesting-premium-icon{
  color:#45e780;
}

.vesting-release-periodic > .vesting-premium-icon{
  color:#62aaff;
}

.vesting-release-next > .vesting-premium-icon{
  color:#c66dff;
}

.vesting-release-progress > .vesting-premium-icon{
  color:#3adfff;
}

.vesting-release-progress strong{
  color:#45dfff;
}


/* RELEASE INFO */

.vesting-premium-info{
  min-height:54px;
  padding:11px 15px;
}

.vesting-premium-info p{
  font-size:.58rem;
}


/* TIMELINE */

.vesting-premium-timeline{
  padding-left:22px;
}

.vesting-premium-timeline:before{
  left:6px;
}

.vesting-premium-timeline-item{
  min-height:63px;

  grid-template-columns:
    minmax(180px,.95fr)
    minmax(125px,.70fr);

  padding:10px 11px 10px 20px;
}

.vesting-premium-timeline-dot{
  left:-23px;

  width:14px;
  height:14px;

  border-width:2px;
}

.vesting-premium-timeline-main small{
  font-size:.47rem;
}

.vesting-premium-timeline-main strong{
  font-size:.67rem;
}

.vesting-premium-timeline-note{
  font-size:.56rem;
}


/* REMINDER */

.vesting-premium-reminder{
  min-height:72px;
  padding:13px 15px;
}

.vesting-premium-reminder-icon{
  width:32px;
  flex:0 0 32px;

  font-size:1.18rem;

  color:#ff963b;
}

.vesting-premium-reminder strong{
  font-size:.64rem;
}

.vesting-premium-reminder p{
  font-size:.57rem;
}


/* CLAIM BUTTON */

.vesting-claim-button{
  min-height:43px;
  margin-top:15px;

  font-size:.58rem;
  font-weight:800;
  letter-spacing:.065em;
}


@media(max-width:1150px){

  .vesting-premium-summary-card,
  .vesting-premium-release-card{
    min-height:170px;
  }

}


@media(max-width:760px){

  .vesting-premium-summary-card strong,
  .vesting-premium-release-card strong{
    font-size:1.48rem;
  }

  .vesting-premium-timeline-item{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   PREMONEON_VESTING_ALIGNMENT_V3_FINAL
   Final structural alignment for premium Vesting cards
   CSS ONLY — no runtime or accounting changes
   ========================================================= */


/* =========================================================
   1. MASTER SCHEDULE CARD ALIGNMENT
   ========================================================= */

.vesting-schedule-grid{
  align-items:stretch;
}

.vesting-schedule-card{
  min-width:0;
  height:100%;

  display:flex;
  flex-direction:column;

  padding:18px;

  overflow:hidden;
}


/* Keep claim action at the same bottom position across cards */

.vesting-schedule-card > .vesting-claim-button{
  margin-top:auto;
}


/* =========================================================
   2. SECTION RHYTHM
   ========================================================= */

.vesting-premium-section{
  margin-top:22px;
  padding-top:18px;
}

.vesting-premium-section:first-of-type{
  margin-top:18px;
}


/* =========================================================
   3. SECTION HEADERS
   ========================================================= */

.vesting-premium-heading-with-icon{
  min-height:42px;

  display:flex;
  align-items:center;

  gap:10px;

  margin-bottom:14px;
}

.vesting-premium-heading-with-icon > div{
  min-width:0;

  display:flex;
  flex-direction:column;

  justify-content:center;
}

.vesting-premium-heading-with-icon small{
  margin:0;

  font-size:.60rem;
  line-height:1.15;

  white-space:nowrap;
}

.vesting-premium-heading-with-icon h3{
  margin:4px 0 0;

  font-size:.58rem;
  line-height:1.3;

  white-space:normal;
}


/* =========================================================
   4. ICON CONSISTENCY
   ========================================================= */

.vesting-premium-icon{
  width:30px;
  height:30px;

  flex:0 0 30px;

  display:grid;
  place-items:center;

  margin:0;
}

.vesting-premium-icon svg{
  width:17px;
  height:17px;

  display:block;
}

.vesting-premium-summary-card > .vesting-premium-icon,
.vesting-premium-release-card > .vesting-premium-icon{
  margin:
    0 auto
    10px;
}


/* =========================================================
   5. YOUR VESTING — PERFECT 4-CARD GRID
   ========================================================= */

.vesting-premium-summary-grid{
  display:grid;

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

  grid-auto-rows:1fr;

  gap:10px;

  align-items:stretch;
}

.vesting-premium-summary-card{
  min-width:0;
  min-height:198px;
  height:100%;

  padding:
    16px
    10px;

  display:grid;

  grid-template-rows:
    30px
    32px
    auto
    18px
    1fr;

  align-items:center;

  text-align:center;
}


/* ICON ROW */

.vesting-premium-summary-card > .vesting-premium-icon{
  grid-row:1;
}


/* LABEL ROW */

.vesting-premium-summary-card > small{
  grid-row:2;

  min-height:0;

  margin:0;

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

  padding:0 3px;

  font-size:.49rem;
  line-height:1.28;

  text-align:center;
}


/* VALUE ROW */

.vesting-premium-summary-card > strong{
  grid-row:3;

  display:block;

  margin:8px 0 0;

  width:100%;

  font-size:
    clamp(
      1.25rem,
      1.55vw,
      1.72rem
    );

  line-height:1;

  font-weight:850;

  letter-spacing:-.025em;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:clip;
}


/* PREMO ROW */

.vesting-premium-summary-card > span{
  grid-row:4;

  display:block;

  margin:5px 0 0;

  font-size:.47rem;
  line-height:1;

  white-space:nowrap;
}


/* DESCRIPTION ROW */

.vesting-premium-summary-card > p{
  grid-row:5;

  align-self:start;

  width:100%;
  max-width:130px;

  margin:
    12px auto
    0;

  padding:0 2px;

  font-size:.56rem;
  line-height:1.48;

  text-align:center;
}


/* =========================================================
   6. RELEASE PLAN — PERFECT 4-CARD GRID
   ========================================================= */

.vesting-premium-release-grid{
  display:grid;

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

  grid-auto-rows:1fr;

  gap:10px;

  align-items:stretch;
}

.vesting-premium-release-card{
  min-width:0;
  min-height:198px;
  height:100%;

  padding:
    16px
    10px;

  display:grid;

  grid-template-rows:
    30px
    32px
    auto
    18px
    1fr;

  align-items:center;

  text-align:center;
}


/* ICON */

.vesting-premium-release-card > .vesting-premium-icon{
  grid-row:1;
}


/* LABEL */

.vesting-premium-release-card > small{
  grid-row:2;

  min-height:0;

  margin:0;

  padding:0 3px;

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

  font-size:.48rem;
  line-height:1.28;

  text-align:center;
}


/* VALUE */

.vesting-premium-release-card > strong{
  grid-row:3;

  display:block;

  width:100%;

  margin:8px 0 0;

  font-size:
    clamp(
      1.20rem,
      1.48vw,
      1.64rem
    );

  line-height:1;

  font-weight:850;

  letter-spacing:-.025em;

  white-space:nowrap;
}


/* PREMO */

.vesting-premium-release-card > span{
  grid-row:4;

  display:block;

  margin:5px 0 0;

  font-size:.47rem;
  line-height:1;

  white-space:nowrap;
}


/* DESCRIPTION */

.vesting-premium-release-card > p{
  grid-row:5;

  align-self:start;

  width:100%;
  max-width:130px;

  margin:
    12px auto
    0;

  padding:0 2px;

  font-size:.56rem;
  line-height:1.48;

  text-align:center;
}


/* =========================================================
   7. RELEASE PROGRESS SPECIAL FIX
   ========================================================= */

.vesting-premium-progress-card{
  grid-template-rows:
    30px
    32px
    auto
    1fr;
}

.vesting-premium-progress-card > strong{
  grid-row:3;

  display:block;

  margin-top:8px;

  font-size:
    clamp(
      1.15rem,
      1.35vw,
      1.45rem
    );

  line-height:1;

  white-space:nowrap;

  color:#45dfff;
}

.vesting-premium-progress-card > p{
  grid-row:4;

  align-self:start;

  margin-top:14px;
}


/* =========================================================
   8. RELEASE INFO STRIP
   ========================================================= */

.vesting-premium-info{
  min-height:54px;

  margin-top:12px;

  padding:
    10px
    14px;

  display:grid;

  grid-template-columns:
    28px
    minmax(0,1fr);

  align-items:center;

  gap:11px;
}

.vesting-premium-info-icon{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  margin:0;
}

.vesting-premium-info p{
  margin:0;

  font-size:.57rem;
  line-height:1.48;
}


/* =========================================================
   9. VESTING TIMELINE HEADER
   ========================================================= */

.vesting-premium-section:has(.vesting-premium-timeline)
.vesting-premium-heading-with-icon{
  margin-bottom:12px;
}


/* =========================================================
   10. TIMELINE MASTER ALIGNMENT
   ========================================================= */

.vesting-premium-timeline{
  position:relative;

  display:grid;

  gap:8px;

  padding-left:20px;
}

.vesting-premium-timeline:before{
  left:5px;

  top:14px;
  bottom:14px;
}


/* =========================================================
   11. TIMELINE ROWS
   ========================================================= */

.vesting-premium-timeline-item{
  position:relative;

  min-width:0;
  min-height:64px;

  display:grid;

  grid-template-columns:
    minmax(0,1.25fr)
    minmax(120px,.75fr);

  align-items:center;

  gap:12px;

  padding:
    10px
    10px
    10px
    18px;
}


/* TIMELINE DOT */

.vesting-premium-timeline-dot{
  top:50%;
  left:-21px;

  width:13px;
  height:13px;

  transform:translateY(-50%);
}


/* DATE COLUMN */

.vesting-premium-timeline-main{
  min-width:0;
}

.vesting-premium-timeline-main small{
  display:block;

  margin:0;

  font-size:.46rem;
  line-height:1.15;

  white-space:nowrap;
}

.vesting-premium-timeline-main strong{
  display:block;

  margin-top:5px;

  font-size:.65rem;
  line-height:1.25;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


/* NOTE COLUMN */

.vesting-premium-timeline-note{
  min-width:0;
  min-height:34px;

  display:flex;
  align-items:center;

  padding:
    7px
    10px;

  font-size:.54rem;
  line-height:1.35;
}


/* =========================================================
   12. REMINDER STRIP
   ========================================================= */

.vesting-premium-reminder{
  min-height:70px;

  margin-top:14px;

  padding:
    12px
    14px;

  display:grid;

  grid-template-columns:
    32px
    minmax(0,1fr);

  align-items:center;

  gap:12px;
}

.vesting-premium-reminder-icon{
  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  margin:0;

  line-height:1;
}

.vesting-premium-reminder > div{
  min-width:0;
}

.vesting-premium-reminder strong{
  display:block;

  margin:0;

  font-size:.62rem;
  line-height:1.3;
}

.vesting-premium-reminder p{
  margin:4px 0 0;

  font-size:.55rem;
  line-height:1.42;
}


/* =========================================================
   13. CLAIM BUTTON ALIGNMENT
   ========================================================= */

.vesting-claim-button{
  width:100%;

  min-height:42px;

  margin-top:14px;

  display:flex;

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

  padding:
    0
    12px;

  font-size:.57rem;
  line-height:1.15;

  text-align:center;

  white-space:nowrap;
}


/* =========================================================
   14. THREE-COLUMN DESKTOP TUNING
   ========================================================= */

@media(min-width:1200px){

  .vesting-schedule-grid{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }

}


/* =========================================================
   15. MEDIUM DESKTOP / TABLET
   ========================================================= */

@media(max-width:1250px){

  .vesting-premium-summary-grid,
  .vesting-premium-release-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .vesting-premium-summary-card,
  .vesting-premium-release-card{
    min-height:165px;
  }

}


/* =========================================================
   16. MOBILE
   ========================================================= */

@media(max-width:760px){

  .vesting-premium-summary-grid,
  .vesting-premium-release-grid{
    grid-template-columns:1fr;
  }

  .vesting-premium-summary-card,
  .vesting-premium-release-card{
    min-height:155px;
  }

  .vesting-premium-timeline-item{
    grid-template-columns:1fr;
  }

  .vesting-premium-timeline-main strong{
    white-space:normal;
  }

  .vesting-claim-button{
    white-space:normal;
  }

}


/* =========================================================
   PREMONEON_VESTING_FORENSIC_ICON_CENTER_V1

   Forensic audit:
   - card icon wrapper computed as display:block
   - card SVG deltaY approximately -5.54px
   - SVG geometry itself is already centered
   ========================================================= */


/* ---------------------------------------------------------
   CARD ICON BOXES
   Force the actual wrapper to remain a centering container.
   --------------------------------------------------------- */

.vesting-premium-summary-card > .vesting-premium-icon,
.vesting-premium-release-card > .vesting-premium-icon {

  width:30px !important;
  height:30px !important;

  min-width:30px !important;
  min-height:30px !important;

  max-width:30px !important;
  max-height:30px !important;

  display:grid !important;

  place-items:center !important;
  align-items:center !important;
  justify-items:center !important;

  align-self:center !important;
  justify-self:center !important;

  box-sizing:border-box !important;

  padding:0 !important;

  margin:
    0 auto
    10px !important;

  line-height:0 !important;

  overflow:hidden;
}


/* ---------------------------------------------------------
   SVG CANVAS
   No translate hacks.
   Center the existing canonical SVG geometry.
   --------------------------------------------------------- */

.vesting-premium-summary-card > .vesting-premium-icon > svg,
.vesting-premium-release-card > .vesting-premium-icon > svg {

  width:17px !important;
  height:17px !important;

  min-width:17px !important;
  min-height:17px !important;

  max-width:17px !important;
  max-height:17px !important;

  display:block !important;

  position:static !important;

  margin:0 !important;
  padding:0 !important;

  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  transform:none !important;

  vertical-align:middle !important;

  line-height:0 !important;

  flex:none !important;

  grid-area:auto !important;
}


/* ---------------------------------------------------------
   HEADER ICONS
   They already measured correctly, so preserve their behavior.
   --------------------------------------------------------- */

.vesting-premium-heading-with-icon > .vesting-premium-icon {

  display:grid !important;

  place-items:center !important;

  align-self:center !important;

  margin:0 !important;
}

.vesting-premium-heading-with-icon > .vesting-premium-icon > svg {

  display:block !important;

  margin:0 !important;

  transform:none !important;
}


/* =========================================================
   PREMONEON_VESTING_TIMELINE_REFERENCE_FINAL_V1
   Locked compact Vesting Timeline presentation
   CSS ONLY
   ========================================================= */


/* =========================================================
   TIMELINE SECTION
   ========================================================= */

.vesting-premium-section:has(.vesting-premium-timeline){
  margin-top:20px;
  padding-top:16px;
}


/* =========================================================
   TIMELINE HEADER
   ========================================================= */

.vesting-premium-section:has(.vesting-premium-timeline)
.vesting-premium-heading-with-icon{
  min-height:auto;

  margin:
    0
    0
    12px;

  gap:9px;

  align-items:center;
}


.vesting-premium-section:has(.vesting-premium-timeline)
.vesting-premium-heading-with-icon > .vesting-premium-icon{
  width:27px !important;
  height:27px !important;

  min-width:27px !important;
  min-height:27px !important;

  flex:0 0 27px !important;

  border-radius:7px;
}


.vesting-premium-section:has(.vesting-premium-timeline)
.vesting-premium-heading-with-icon > .vesting-premium-icon svg{
  width:15px !important;
  height:15px !important;
}


.vesting-premium-section:has(.vesting-premium-timeline)
.vesting-premium-heading-with-icon small{
  color:#eef6f8;

  font-size:.62rem;
  font-weight:800;

  line-height:1.1;

  letter-spacing:.07em;
}


.vesting-premium-section:has(.vesting-premium-timeline)
.vesting-premium-heading-with-icon h3{
  margin-top:3px;

  color:#8ba0aa;

  font-size:.53rem;
  font-weight:500;

  line-height:1.25;
}


/* =========================================================
   TIMELINE WRAPPER
   ========================================================= */

.vesting-premium-timeline{
  position:relative;

  display:grid;

  gap:6px;

  margin:0;

  padding:
    0
    0
    0
    26px;
}


/* =========================================================
   VERTICAL LINE
   ========================================================= */

.vesting-premium-timeline:before{
  content:"";

  position:absolute;

  left:10px;

  top:15px;
  bottom:15px;

  width:2px;

  background:
    linear-gradient(
      to bottom,
      #43e98d 0%,
      #f0bf2f 34%,
      #57a9ff 68%,
      #47e58b 100%
    );

  opacity:.62;
}


/* =========================================================
   TIMELINE ROW
   ========================================================= */

.vesting-premium-timeline-item{
  position:relative;

  min-width:0;
  min-height:48px;

  display:grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(135px,.95fr);

  align-items:center;

  gap:12px;

  padding:
    7px
    9px
    7px
    15px;

  border:
    1px solid
    rgba(97,221,255,.10);

  border-radius:5px;

  background:
    linear-gradient(
      90deg,
      rgba(5,21,31,.78),
      rgba(5,18,27,.58)
    );

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


/* remove oversized previous spacing */

.vesting-premium-timeline-item + .vesting-premium-timeline-item{
  margin-top:0;
}


/* =========================================================
   MILESTONE DOT / ICON NODE
   ========================================================= */

.vesting-premium-timeline-dot{
  position:absolute;

  left:-24px;
  top:50%;

  width:18px;
  height:18px;

  transform:
    translateY(-50%);

  border:
    2px solid
    #43dfff;

  border-radius:50%;

  background:#04131c;

  box-shadow:
    0 0 0 3px
    rgba(67,223,255,.035);
}


/* START */

.vesting-premium-timeline-item:nth-child(1)
.vesting-premium-timeline-dot{
  border-color:#45e788;

  box-shadow:
    0 0 0 3px
    rgba(69,231,136,.05);
}


/* CLIFF */

.vesting-premium-timeline-item:nth-child(2)
.vesting-premium-timeline-dot{
  border-color:#f5bf2e;

  box-shadow:
    0 0 0 3px
    rgba(245,191,46,.05);
}


/* NEXT */

.vesting-premium-timeline-item:nth-child(3)
.vesting-premium-timeline-dot{
  border-color:#5ba8ff;

  box-shadow:
    0 0 0 3px
    rgba(91,168,255,.05);
}


/* COMPLETE */

.vesting-premium-timeline-item:nth-child(4)
.vesting-premium-timeline-dot{
  border-color:#46df82;

  box-shadow:
    0 0 0 3px
    rgba(70,223,130,.05);
}


/* =========================================================
   PRIMARY DATE COLUMN
   ========================================================= */

.vesting-premium-timeline-main{
  min-width:0;

  display:flex;
  flex-direction:column;

  justify-content:center;

  padding-left:1px;
}


.vesting-premium-timeline-main small{
  display:block;

  margin:0;

  font-size:.43rem;
  font-weight:850;

  line-height:1;

  letter-spacing:.055em;
}


/* START */

.vesting-premium-timeline-item:nth-child(1)
.vesting-premium-timeline-main small{
  color:#49e891;
}


/* CLIFF */

.vesting-premium-timeline-item:nth-child(2)
.vesting-premium-timeline-main small{
  color:#f4be31;
}


/* NEXT */

.vesting-premium-timeline-item:nth-child(3)
.vesting-premium-timeline-main small{
  color:#62aaff;
}


/* COMPLETE */

.vesting-premium-timeline-item:nth-child(4)
.vesting-premium-timeline-main small{
  color:#4ae18a;
}


/* DATE */

.vesting-premium-timeline-main strong{
  display:block;

  margin-top:4px;

  color:#f2f6f8;

  font-size:.59rem;
  font-weight:800;

  line-height:1.15;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


/* =========================================================
   RIGHT-SIDE EXPLANATION
   ========================================================= */

.vesting-premium-timeline-note{
  min-width:0;
  min-height:30px;

  display:flex;

  align-items:center;

  padding:
    6px
    10px;

  border:
    1px solid
    rgba(97,221,255,.07);

  border-radius:4px;

  background:
    rgba(7,27,38,.55);

  color:#9aadb5;

  font-size:.51rem;

  line-height:1.25;
}


/* =========================================================
   CLAIM REMINDER
   ========================================================= */

.vesting-premium-reminder{
  min-height:54px;

  margin-top:10px;

  padding:
    9px
    12px;

  display:grid;

  grid-template-columns:
    28px
    minmax(0,1fr);

  align-items:center;

  gap:9px;

  border:
    1px solid
    rgba(71,217,255,.15);

  border-radius:5px;

  background:
    linear-gradient(
      90deg,
      rgba(7,30,39,.70),
      rgba(4,20,29,.56)
    );
}


/* reminder icon */

.vesting-premium-reminder-icon{
  width:27px;
  height:27px;

  display:grid;
  place-items:center;

  margin:0;

  color:#75e66f;

  font-size:.92rem;

  line-height:1;
}


/* reminder text */

.vesting-premium-reminder > div{
  min-width:0;
}


.vesting-premium-reminder strong{
  display:block;

  margin:0;

  color:#eef6f8;

  font-size:.56rem;
  font-weight:800;

  line-height:1.2;
}


.vesting-premium-reminder p{
  margin:
    3px
    0
    0;

  color:#8398a2;

  font-size:.49rem;

  line-height:1.25;
}


/* =========================================================
   CLAIM BUTTON
   ========================================================= */

.vesting-claim-button{
  width:100%;

  min-height:40px;

  margin-top:10px;

  display:flex;

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

  padding:
    0
    12px;

  border-radius:4px;

  font-size:.55rem;
  font-weight:850;

  line-height:1;

  letter-spacing:.055em;

  white-space:nowrap;
}


/* ACTIVE */

.vesting-claim-button:not(:disabled){
  border:
    1px solid
    rgba(67,223,255,.72);

  color:#ffffff;

  background:
    linear-gradient(
      90deg,
      rgba(8,40,54,.82),
      rgba(5,25,35,.80)
    );

  box-shadow:
    inset 0 -2px 0
    rgba(67,223,255,.48);
}


/* DISABLED */

.vesting-claim-button:disabled{
  border:
    1px solid
    rgba(97,221,255,.09);

  color:#4e626d;

  background:
    rgba(4,15,22,.50);

  opacity:.75;
}


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

@media(max-width:1200px){

  .vesting-premium-timeline-item{
    grid-template-columns:
      minmax(0,1fr)
      minmax(115px,.8fr);
  }

}


@media(max-width:760px){

  .vesting-premium-timeline{
    padding-left:25px;
  }

  .vesting-premium-timeline-item{
    grid-template-columns:1fr;

    gap:5px;
  }

  .vesting-premium-timeline-note{
    min-height:0;

    padding:
      5px
      0
      0;

    border:0;
    border-top:
      1px solid
      rgba(97,221,255,.07);

    border-radius:0;

    background:transparent;
  }

  .vesting-premium-timeline-main strong{
    white-space:normal;
  }

}


/* =========================================================
   PREMONEON_VESTING_TIMELINE_ICONS_V1
   Real milestone icons inside timeline nodes
   ========================================================= */


/* ---------------------------------------------------------
   COMMON NODE
   --------------------------------------------------------- */

.vesting-premium-timeline-dot{
  width:22px !important;
  height:22px !important;

  left:-27px !important;

  display:grid !important;
  place-items:center !important;

  padding:0 !important;

  border-width:2px !important;

  border-radius:50% !important;

  background:#04131c !important;

  line-height:0 !important;

  box-sizing:border-box !important;

  z-index:2;
}


/* ---------------------------------------------------------
   SVG CANVAS
   --------------------------------------------------------- */

.vesting-premium-timeline-dot > svg{
  width:13px;
  height:13px;

  display:block;

  margin:0;
  padding:0;

  fill:none;

  stroke:currentColor;
  stroke-width:2;

  stroke-linecap:round;
  stroke-linejoin:round;

  pointer-events:none;
}


/* START play icon needs fill */

.vesting-timeline-node-start > svg{
  width:12px;
  height:12px;

  fill:currentColor;
  stroke:currentColor;
  stroke-width:1.5;

  transform:translateX(.7px);
}


/* ---------------------------------------------------------
   START
   --------------------------------------------------------- */

.vesting-timeline-node-start{
  color:#45e88b !important;

  border-color:#45e88b !important;

  box-shadow:
    0 0 0 3px rgba(69,232,139,.055) !important;
}


/* ---------------------------------------------------------
   CLIFF
   --------------------------------------------------------- */

.vesting-timeline-node-cliff{
  color:#f5bf2f !important;

  border-color:#f5bf2f !important;

  box-shadow:
    0 0 0 3px rgba(245,191,47,.055) !important;
}

.vesting-timeline-node-cliff > svg{
  width:12px;
  height:12px;
}


/* ---------------------------------------------------------
   NEXT RELEASE
   --------------------------------------------------------- */

.vesting-timeline-node-next{
  color:#5daaff !important;

  border-color:#5daaff !important;

  box-shadow:
    0 0 0 3px rgba(93,170,255,.055) !important;
}

.vesting-timeline-node-next > svg{
  width:13px;
  height:13px;
}


/* ---------------------------------------------------------
   COMPLETE
   --------------------------------------------------------- */

.vesting-timeline-node-complete{
  color:#47e38a !important;

  border-color:#47e38a !important;

  box-shadow:
    0 0 0 3px rgba(71,227,138,.055) !important;
}

.vesting-timeline-node-complete > svg{
  width:13px;
  height:13px;
  stroke-width:2.3;
}


/* ---------------------------------------------------------
   ALIGN RAIL THROUGH CENTER OF 22PX NODES
   Current timeline wrapper padding places node center at ~10px.
   --------------------------------------------------------- */

.vesting-premium-timeline:before{
  left:10px !important;

  width:1px !important;

  z-index:0;
}


/* node stays over rail */

.vesting-premium-timeline-item{
  z-index:1;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:760px){

  .vesting-premium-timeline-dot{
    left:-27px !important;
  }

}


/* =========================================================
   PREMONEON_NETWORK_GENEALOGY_CRYSTAL_FIXED_V1
   Neo Mining visual for Genealogy Identity
   ========================================================= */


/* ---------------------------------------------------------
   IDENTITY LAYOUT
   --------------------------------------------------------- */

.network-identity{
  grid-template-columns:
    minmax(300px,350px)
    minmax(0,1fr);

  gap:36px;

  align-items:center;
}


/* ---------------------------------------------------------
   VISUAL
   --------------------------------------------------------- */

.network-genealogy-visual{
  width:100%;
  min-width:0;

  display:flex;
  flex-direction:column;

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

  position:relative;
}


/* ---------------------------------------------------------
   CRYSTAL STAGE
   --------------------------------------------------------- */

.network-genealogy-art{
  position:relative;

  width:320px;
  max-width:100%;

  height:250px;

  display:grid;
  place-items:center;

  isolation:isolate;

  overflow:visible;
}


/* atmospheric glow */

.network-genealogy-art::before{
  content:"";

  position:absolute;

  left:50%;
  top:47%;

  width:78%;

  aspect-ratio:1;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  z-index:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      rgba(72,225,255,.18) 0%,
      rgba(19,132,255,.075) 40%,
      transparent 70%
    );

  filter:blur(11px);

  animation:
    genealogyMiningCorePulse
    3.8s
    ease-in-out
    infinite;
}


/* platform/base glow */

.network-genealogy-art::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:15px;

  width:54%;
  height:20px;

  transform:
    translateX(-50%);

  border-radius:50%;

  z-index:1;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse,
      rgba(76,229,255,.28),
      rgba(19,142,255,.10) 45%,
      transparent 74%
    );

  filter:blur(6px);
}


/* ---------------------------------------------------------
   CRYSTAL
   --------------------------------------------------------- */

.network-genealogy-crystal{
  position:relative !important;

  z-index:3;

  display:block;

  width:245px;
  max-width:86%;

  height:225px;

  object-fit:contain;

  transform-origin:center;

  will-change:
    transform,
    filter;

  animation:
    genealogyMiningCrystalFloat
    5s
    ease-in-out
    infinite !important;

  filter:
    drop-shadow(
      0 0 15px
      rgba(105,235,255,.54)
    )
    drop-shadow(
      0 0 38px
      rgba(21,143,255,.29)
    );
}


/* ---------------------------------------------------------
   SVG ORBITS
   --------------------------------------------------------- */

.network-genealogy-orbit{
  position:absolute;

  left:50%;
  top:58%;

  width:82%;
  height:auto;

  aspect-ratio:
    420 / 180;

  overflow:visible;

  pointer-events:none;

  transform:
    translate(-50%,-50%)
    rotate(-7deg);

  transform-origin:center;
}


.network-genealogy-orbit-back{
  z-index:2;

  opacity:.58;
}


.network-genealogy-orbit-front{
  z-index:6;
}


/* ---------------------------------------------------------
   REAR PATH
   --------------------------------------------------------- */

.network-genealogy-orbit-path-back{
  fill:none;

  stroke:
    rgba(75,211,255,.55);

  stroke-width:2;

  stroke-linecap:round;

  stroke-dasharray:
    18 7 4 8;

  stroke-dashoffset:0;

  animation:
    genealogyMiningSvgDashBack
    8s
    linear
    infinite;
}


/* ---------------------------------------------------------
   FRONT PATH
   --------------------------------------------------------- */

.network-genealogy-orbit-path-front{
  fill:none;

  stroke:#63e8ff;

  stroke-width:3;

  stroke-linecap:round;

  stroke-dasharray:
    34 8 7 9;

  stroke-dashoffset:0;

  animation:
    genealogyMiningSvgDashFront
    5.5s
    linear
    infinite;
}


/* ---------------------------------------------------------
   PARTICLES
   --------------------------------------------------------- */

.network-genealogy-particle{
  pointer-events:none;
}


.network-genealogy-particle-large{
  fill:#effeff;

  stroke:#8af2ff;

  stroke-width:1.5;
}


.network-genealogy-particle-small{
  fill:#56dfff;

  stroke:#b3f7ff;

  stroke-width:1;
}


/* ---------------------------------------------------------
   ACCOUNT PLATE
   --------------------------------------------------------- */

.network-genealogy-account{
  width:250px;
  max-width:90%;

  margin-top:-3px;

  padding:
    10px
    13px;

  text-align:center;

  border:
    1px solid
    rgba(97,221,255,.15);

  background:
    linear-gradient(
      90deg,
      rgba(7,26,38,.72),
      rgba(4,16,25,.68)
    );
}


.network-genealogy-account small{
  display:block;

  color:#607c8b;

  font-size:.41rem;
  font-weight:800;

  letter-spacing:.10em;
}


.network-genealogy-account strong{
  display:block;

  margin-top:5px;

  color:#edf7fa;

  font-size:.65rem;
  font-weight:850;
}


.network-genealogy-account em{
  display:block;

  margin-top:5px;

  color:var(--cyan);

  font-style:normal;

  font-size:.40rem;
  font-weight:800;

  letter-spacing:.10em;
}


/* ---------------------------------------------------------
   ANIMATION
   --------------------------------------------------------- */

@keyframes genealogyMiningCrystalFloat{

  0%,
  100%{
    transform:
      translateY(7px)
      rotate(-.6deg)
      scale(1);
  }

  50%{
    transform:
      translateY(-13px)
      rotate(.6deg)
      scale(1.025);
  }

}


@keyframes genealogyMiningSvgDashBack{

  from{
    stroke-dashoffset:0;
  }

  to{
    stroke-dashoffset:-100;
  }

}


@keyframes genealogyMiningSvgDashFront{

  from{
    stroke-dashoffset:0;
  }

  to{
    stroke-dashoffset:100;
  }

}


@keyframes genealogyMiningCorePulse{

  0%,
  100%{
    opacity:.48;

    transform:
      translate(-50%,-50%)
      scale(.88);
  }

  50%{
    opacity:1;

    transform:
      translate(-50%,-50%)
      scale(1.08);
  }

}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1100px){

  .network-identity{
    grid-template-columns:1fr;
  }

  .network-genealogy-art{
    width:340px;
    max-width:100%;

    height:260px;
  }

}


@media(max-width:760px){

  .network-genealogy-art{
    width:290px;

    height:225px;
  }

  .network-genealogy-crystal{
    width:215px;

    height:200px;
  }

  .network-genealogy-orbit{
    top:57%;

    width:86%;
  }

}


/* =========================================================
   PREMONEON_NETWORK_GENEALOGY_LAYOUT_CLEAN_V1
   Crystal visual + 4 canonical genealogy fact cards
   ========================================================= */


/* ---------------------------------------------------------
   MAIN IDENTITY LAYOUT
   --------------------------------------------------------- */

.network-identity{
  min-height:285px;

  grid-template-columns:
    minmax(280px,340px)
    minmax(0,1fr);

  align-items:center;

  gap:42px;
}


/* ---------------------------------------------------------
   CRYSTAL COLUMN
   --------------------------------------------------------- */

.network-genealogy-visual{
  height:100%;

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

  padding:8px 0;
}

.network-genealogy-art{
  margin:0 auto;
}


/* ---------------------------------------------------------
   4 FACT CARDS
   --------------------------------------------------------- */

.network-identity-data{
  width:100%;

  display:grid;

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

  align-items:stretch;

  border:
    1px solid
    rgba(97,221,255,.13);

  background:
    rgba(3,13,20,.32);
}


.network-identity-data > div{
  min-width:0;
  min-height:102px;

  padding:
    18px
    16px;

  display:flex;
  flex-direction:column;

  justify-content:center;
}


.network-identity-data > div + div{
  border-left:
    1px solid
    rgba(97,221,255,.10);
}


.network-identity-data small{
  display:block;

  margin:0;

  color:#627b89;

  font-size:.46rem;
  font-weight:800;

  line-height:1.2;

  letter-spacing:.09em;
}


.network-identity-data strong{
  display:block;

  margin-top:10px;

  color:#eef5f7;

  font-size:.76rem;
  font-weight:850;

  line-height:1.25;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


/* Sponsor address gets slightly more room visually */

.network-identity-data > div:first-child strong{
  font-size:.70rem;
}


/* ---------------------------------------------------------
   REMOVE ANY LEGACY ACCOUNT-PLATE STYLING EFFECT
   --------------------------------------------------------- */

.network-genealogy-account{
  display:none !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1100px){

  .network-identity{
    grid-template-columns:1fr;

    gap:20px;
  }

  .network-identity-data{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .network-identity-data > div:nth-child(3){
    border-left:0;
    border-top:
      1px solid
      rgba(97,221,255,.10);
  }

  .network-identity-data > div:nth-child(4){
    border-top:
      1px solid
      rgba(97,221,255,.10);
  }

}


@media(max-width:760px){

  .network-identity-data{
    grid-template-columns:1fr;
  }

  .network-identity-data > div{
    min-height:82px;
  }

  .network-identity-data > div + div{
    border-left:0;

    border-top:
      1px solid
      rgba(97,221,255,.10);
  }

}


/* =========================================================
   PREMONEON_NETWORK_IDENTITY_PREMIUM_FACTS_V1
   Open premium genealogy identity facts
   ========================================================= */


/* =========================================================
   MAIN COMPOSITION
   ========================================================= */

.network-identity{
  min-height:320px;

  grid-template-columns:
    minmax(300px,350px)
    minmax(0,1fr);

  gap:46px;

  align-items:center;
}


/* =========================================================
   FACT GROUP
   Remove previous outer box.
   ========================================================= */

.network-identity-data-premium{
  position:relative;

  width:100%;

  min-height:205px;

  display:grid;

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

  align-items:stretch;

  border:0 !important;

  background:transparent !important;
}


/* Remove old inherited border/card styling */

.network-identity-data-premium > div,
.network-identity-data-premium > article{
  border:0;
  background:transparent;
}


/* =========================================================
   FACT COLUMN
   ========================================================= */

.network-identity-fact{
  position:relative;

  min-width:0;

  min-height:205px;

  padding:
    20px
    20px
    24px;

  display:flex;

  flex-direction:column;

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

  text-align:center;

  background:
    linear-gradient(
      180deg,
      rgba(5,20,30,.12),
      rgba(5,20,30,.01)
    );
}


/* subtle separators only */

.network-identity-fact + .network-identity-fact::before{
  content:"";

  position:absolute;

  left:0;

  top:18%;

  bottom:18%;

  width:1px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(73,211,255,.13) 20%,
      rgba(73,211,255,.20) 50%,
      rgba(73,211,255,.13) 80%,
      transparent
    );
}


/* =========================================================
   ICON
   ========================================================= */

.network-identity-fact-icon{
  width:42px;
  height:42px;

  flex:0 0 42px;

  display:grid;
  place-items:center;

  margin-bottom:20px;

  color:#46dfff;
}


.network-identity-fact-icon svg{
  width:34px;
  height:34px;

  display:block;

  fill:none;

  stroke:currentColor;

  stroke-width:1.55;

  stroke-linecap:round;
  stroke-linejoin:round;

  filter:
    drop-shadow(
      0 0 6px
      rgba(70,223,255,.23)
    );
}


/* =========================================================
   LABEL
   ========================================================= */

.network-identity-fact small{
  display:block;

  margin:0;

  color:#7d939f;

  font-size:.50rem;
  font-weight:800;

  line-height:1.2;

  letter-spacing:.11em;

  white-space:nowrap;
}


/* =========================================================
   VALUE
   ========================================================= */

.network-identity-fact strong{
  display:block;

  width:100%;

  margin-top:15px;

  color:#f3f7f9;

  font-size:1.12rem;
  font-weight:900;

  line-height:1.12;

  letter-spacing:-.015em;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


/* sponsor address slightly smaller */

.network-identity-fact-sponsor strong{
  font-size:.94rem;
}


/* =========================================================
   CYAN UNDERSCORE / ENERGY MARK
   ========================================================= */

.network-identity-fact-glow{
  position:relative;

  display:block;

  width:54px;
  height:2px;

  margin-top:27px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #48e5ff 24%,
      #48e5ff 76%,
      transparent
    );

  box-shadow:
    0 0 7px
    rgba(72,229,255,.45);
}


.network-identity-fact-glow::before{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:88px;
  height:16px;

  transform:
    translate(-50%,-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(72,229,255,.11),
      transparent 68%
    );

  pointer-events:none;
}


/* =========================================================
   PER-FACT SUBTLE ICON COLOR VARIATION
   ========================================================= */

.network-identity-fact-sponsor
.network-identity-fact-icon{
  color:#43dfff;
}


.network-identity-fact-children
.network-identity-fact-icon{
  color:#49e6ff;
}


.network-identity-fact-account
.network-identity-fact-icon{
  color:#43dfff;
}


.network-identity-fact-registration
.network-identity-fact-icon{
  color:#52e7ff;
}


/* =========================================================
   HOVER — VERY SUBTLE
   ========================================================= */

.network-identity-fact{
  transition:
    background .18s ease,
    transform .18s ease;
}


.network-identity-fact:hover{
  background:
    linear-gradient(
      180deg,
      rgba(11,39,52,.22),
      rgba(4,18,27,.03)
    );

  transform:
    translateY(-2px);
}


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

@media(max-width:1100px){

  .network-identity{
    grid-template-columns:1fr;

    gap:22px;
  }

  .network-identity-data-premium{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .network-identity-fact:nth-child(3)::before{
    display:none;
  }

  .network-identity-fact:nth-child(3),
  .network-identity-fact:nth-child(4){
    border-top:
      1px solid
      rgba(73,211,255,.08);
  }

}


@media(max-width:760px){

  .network-identity-data-premium{
    grid-template-columns:1fr;
  }

  .network-identity-fact{
    min-height:155px;
  }

  .network-identity-fact + .network-identity-fact::before{
    display:none;
  }

  .network-identity-fact + .network-identity-fact{
    border-top:
      1px solid
      rgba(73,211,255,.08);
  }

}


/* =========================================================
   PREMONEON_ACCOUNT_ENERGY_PLANET_V1

   Locked design:
   - blockchain planet image is completely STATIC
   - animation exists ONLY around the image
   - dual elliptical energy field
   - moving network nodes
   - segmented data arcs
   - bottom energy pulse
   ========================================================= */


/* =========================================================
   ACCOUNT ENERGY CORE
   ========================================================= */

.account-energy-core{
  min-height:430px;

  display:flex;

  flex-direction:column;

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

  gap:5px;

  padding:
    8px
    16px
    18px;
}


/* =========================================================
   VISUAL STAGE
   ========================================================= */

.account-energy-stage{
  position:relative;

  width:min(100%,620px);

  height:330px;

  display:grid;
  place-items:center;

  isolation:isolate;

  overflow:visible;
}


/* ---------------------------------------------------------
   LARGE BACKGROUND ENERGY ATMOSPHERE
   --------------------------------------------------------- */

.account-energy-stage::before{
  content:"";

  position:absolute;

  left:50%;
  top:54%;

  width:76%;
  height:64%;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  z-index:0;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse,
      rgba(54,215,255,.15) 0%,
      rgba(20,135,255,.055) 42%,
      transparent 72%
    );

  filter:blur(18px);

  animation:
    accountEnergyAtmospherePulse
    4.6s
    ease-in-out
    infinite;
}


/* ---------------------------------------------------------
   BOTTOM ENERGY PULSE
   --------------------------------------------------------- */

.account-energy-stage::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:19px;

  width:55%;
  height:27px;

  transform:
    translateX(-50%);

  border-radius:50%;

  z-index:1;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse,
      rgba(82,233,255,.30) 0%,
      rgba(21,139,255,.12) 38%,
      transparent 72%
    );

  filter:blur(7px);

  animation:
    accountEnergyBasePulse
    4s
    ease-in-out
    infinite;
}


/* =========================================================
   PLANET IMAGE
   ABSOLUTELY STATIC
   ========================================================= */

.account-energy-planet{
  position:relative;

  z-index:3;

  display:block;

  width:min(94%,560px);

  max-width:none;

  height:305px;

  object-fit:contain;

  margin:0;

  padding:0;

  transform:none !important;

  animation:none !important;

  transition:none !important;

  will-change:auto !important;

  filter:
    drop-shadow(
      0 0 18px
      rgba(67,214,255,.24)
    )
    drop-shadow(
      0 0 45px
      rgba(14,122,255,.12)
    );
}


/* =========================================================
   SVG ORBIT LAYERS
   ========================================================= */

.account-energy-orbit{
  position:absolute;

  left:50%;
  top:55%;

  width:96%;
  height:auto;

  transform:
    translate(-50%,-50%);

  pointer-events:none;

  overflow:visible;
}


/* rear */

.account-energy-orbit-back{
  z-index:2;

  opacity:.56;
}


/* front */

.account-energy-orbit-front{
  z-index:6;
}


/* =========================================================
   REAR ORBIT
   ========================================================= */

.account-energy-orbit-line{
  fill:none;

  vector-effect:
    non-scaling-stroke;
}


.account-energy-orbit-line-back{
  stroke:
    rgba(74,214,255,.44);

  stroke-width:1.7;

  stroke-linecap:round;

  stroke-dasharray:
    18 7 4 11;

  stroke-dashoffset:0;

  animation:
    accountEnergyBackDataFlow
    13s
    linear
    infinite;
}


/* =========================================================
   FRONT DATA ARCS
   ========================================================= */

.account-energy-data-arc{
  fill:none;

  vector-effect:
    non-scaling-stroke;

  stroke-linecap:round;
}


/* brighter front arc */

.account-energy-data-arc-a{
  stroke:#62e8ff;

  stroke-width:2.4;

  stroke-dasharray:
    22 7 5 14;

  stroke-dashoffset:0;

  animation:
    accountEnergyFrontDataFlow
    8s
    linear
    infinite;
}


/* secondary arc */

.account-energy-data-arc-b{
  stroke:
    rgba(90,166,255,.60);

  stroke-width:1.5;

  stroke-dasharray:
    12 13 3 17;

  stroke-dashoffset:0;

  animation:
    accountEnergyReverseDataFlow
    12s
    linear
    infinite;
}


/* =========================================================
   MOVING NETWORK NODES
   ========================================================= */

.account-energy-node{
  pointer-events:none;
}


/* primary node */

.account-energy-node-primary{
  fill:#effeff;

  stroke:#7deeff;

  stroke-width:1.4;
}


/* secondary */

.account-energy-node-secondary{
  fill:#51dfff;

  stroke:#b4f7ff;

  stroke-width:1;
}


/* tertiary */

.account-energy-node-tertiary{
  fill:#759fff;

  stroke:#b6c9ff;

  stroke-width:.8;

  opacity:.78;
}


/* =========================================================
   FIELD MARKS
   ========================================================= */

.account-energy-field-mark{
  position:absolute;

  z-index:7;

  width:5px;
  height:5px;

  border-radius:50%;

  background:#67eaff;

  box-shadow:
    0 0 7px #67eaff,
    0 0 17px
    rgba(67,218,255,.60);

  pointer-events:none;

  animation:
    accountEnergyNodePulse
    3.2s
    ease-in-out
    infinite;
}


.account-energy-field-mark-a{
  left:13%;
  top:48%;

  animation-delay:0s;
}


.account-energy-field-mark-b{
  right:14%;
  top:60%;

  width:3px;
  height:3px;

  opacity:.72;

  animation-delay:-1.2s;
}


.account-energy-field-mark-c{
  left:50%;
  top:10%;

  width:4px;
  height:4px;

  animation-delay:-2.2s;
}


/* =========================================================
   WALLET BALANCE PLATE
   ========================================================= */

.account-energy-balance{
  width:min(100%,430px);

  min-height:66px;

  display:grid;

  grid-template-columns:
    34px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:13px;

  padding:
    11px
    14px;

  border:
    1px solid
    rgba(87,229,255,.16);

  background:
    linear-gradient(
      90deg,
      rgba(6,25,36,.78),
      rgba(3,14,22,.68)
    );

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


/* status signal */

.account-energy-balance-signal{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(73,224,255,.28);

  border-radius:50%;

  background:
    rgba(45,216,255,.035);
}


.account-energy-balance-signal span{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#4ce5ff;

  box-shadow:
    0 0 6px #4ce5ff,
    0 0 15px
    rgba(76,229,255,.65);

  animation:
    accountEnergySignalPulse
    2.6s
    ease-in-out
    infinite;
}


/* balance copy */

.account-energy-balance-copy{
  min-width:0;
}


.account-energy-balance-copy small{
  display:block;

  color:#68828f;

  font-size:.44rem;
  font-weight:800;

  letter-spacing:.10em;
}


.account-energy-balance-copy strong{
  display:inline-block;

  margin-top:5px;

  color:#f2f8fa;

  font-size:1.12rem;
  font-weight:900;

  line-height:1;
}


.account-energy-balance-copy em{
  margin-left:6px;

  color:var(--cyan);

  font-style:normal;

  font-size:.49rem;
  font-weight:850;

  letter-spacing:.08em;
}


/* live state */

.account-energy-balance-state{
  color:#4fe4ff;

  font-size:.42rem;
  font-weight:850;

  letter-spacing:.10em;

  white-space:nowrap;
}


/* =========================================================
   ANIMATIONS
   ONLY DECORATIVE ELEMENTS MOVE.
   ========================================================= */

@keyframes accountEnergyBackDataFlow{

  from{
    stroke-dashoffset:0;
  }

  to{
    stroke-dashoffset:-100;
  }

}


@keyframes accountEnergyFrontDataFlow{

  from{
    stroke-dashoffset:0;
  }

  to{
    stroke-dashoffset:100;
  }

}


@keyframes accountEnergyReverseDataFlow{

  from{
    stroke-dashoffset:0;
  }

  to{
    stroke-dashoffset:-100;
  }

}


@keyframes accountEnergyAtmospherePulse{

  0%,
  100%{
    opacity:.42;
  }

  50%{
    opacity:.82;
  }

}


@keyframes accountEnergyBasePulse{

  0%,
  100%{
    opacity:.42;

    transform:
      translateX(-50%)
      scaleX(.90);
  }

  50%{
    opacity:.92;

    transform:
      translateX(-50%)
      scaleX(1.08);
  }

}


@keyframes accountEnergyNodePulse{

  0%,
  100%{
    opacity:.28;
  }

  50%{
    opacity:1;
  }

}


@keyframes accountEnergySignalPulse{

  0%,
  100%{
    opacity:.50;

    box-shadow:
      0 0 5px #4ce5ff,
      0 0 11px
      rgba(76,229,255,.48);
  }

  50%{
    opacity:1;

    box-shadow:
      0 0 8px #4ce5ff,
      0 0 19px
      rgba(76,229,255,.86);
  }

}


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

@media(max-width:900px){

  .account-energy-core{
    min-height:390px;
  }

  .account-energy-stage{
    width:min(100%,540px);

    height:300px;
  }

  .account-energy-planet{
    width:min(94%,500px);

    height:280px;
  }

}


@media(max-width:620px){

  .account-energy-core{
    min-height:340px;

    padding-left:4px;
    padding-right:4px;
  }

  .account-energy-stage{
    width:100%;

    height:245px;
  }

  .account-energy-planet{
    width:min(100%,410px);

    height:225px;
  }

  .account-energy-orbit{
    width:103%;
  }

  .account-energy-balance{
    grid-template-columns:
      30px
      minmax(0,1fr);

    width:96%;
  }

  .account-energy-balance-state{
    display:none;
  }

}


/* =========================================================
   PREMONEON_ACCOUNT_ENERGY_COMPACT_RINGS_V1

   Locked visual:
   - flat-earth image static
   - one large ring close under earth
   - one smaller ring close under first
   - compact base energy glow
   - no orbiting balls / moving nodes
   ========================================================= */


/* =========================================================
   CORE HEIGHT
   Reduce unnecessary vertical height
   ========================================================= */

.account-energy-core{
  min-height:390px !important;

  gap:0 !important;

  padding:
    4px
    16px
    14px !important;
}


/* =========================================================
   STAGE
   ========================================================= */

.account-energy-stage{
  width:min(100%,620px) !important;

  height:305px !important;

  overflow:visible !important;
}


/* =========================================================
   PLANET
   Completely static
   ========================================================= */

.account-energy-planet{
  width:min(94%,560px) !important;

  height:255px !important;

  transform:none !important;

  animation:none !important;

  transition:none !important;
}


/* =========================================================
   ORBIT SYSTEM
   Use the two existing SVG layers as two separate rings.
   ========================================================= */

.account-energy-orbit{
  left:50% !important;

  width:100% !important;

  height:auto !important;

  transform:
    translateX(-50%) !important;

  overflow:visible !important;
}


/* ---------------------------------------------------------
   BIG FIRST RING

   Closest to the underside of the planet.
   Approx 75% visual width relative to planet.
   --------------------------------------------------------- */

.account-energy-orbit-back{
  top:218px !important;

  width:76% !important;

  z-index:5 !important;

  opacity:1 !important;
}


/* remove original giant ellipse behavior */

.account-energy-orbit-line-back{
  stroke:#55e7ff !important;

  stroke-width:2.4 !important;

  stroke-dasharray:
    28 5 10 7 !important;

  opacity:.94 !important;

  animation:
    accountEnergyCompactRingOne
    8s
    linear
    infinite !important;

  filter:
    drop-shadow(
      0 0 5px
      rgba(80,230,255,.80)
    );
}


/* ---------------------------------------------------------
   SECOND RING
   25% smaller than first.
   Very small vertical spacing.
   --------------------------------------------------------- */

.account-energy-orbit-front{
  top:244px !important;

  width:57% !important;

  z-index:5 !important;

  opacity:.90 !important;
}


/* front arc A becomes ring 2 */

.account-energy-data-arc-a{
  stroke:#48dfff !important;

  stroke-width:2 !important;

  stroke-dasharray:
    18 6 5 7 !important;

  opacity:.90 !important;

  animation:
    accountEnergyCompactRingTwo
    6.8s
    linear
    infinite !important;
}


/* Disable second half / duplicate visual arc.
   We want only one visible second ring. */

.account-energy-data-arc-b{
  display:none !important;
}


/* =========================================================
   NO MOVING DOTS / NODE PARTICLES
   ========================================================= */

.account-energy-node,
.account-energy-field-mark{
  display:none !important;
}


/* =========================================================
   BASE ENERGY
   Compact base directly below second ring
   ========================================================= */

.account-energy-stage::after{
  left:50% !important;

  bottom:12px !important;

  width:25% !important;

  height:13px !important;

  transform:
    translateX(-50%) !important;

  opacity:.80 !important;

  border-radius:50% !important;

  background:
    radial-gradient(
      ellipse,
      rgba(98,235,255,.52) 0%,
      rgba(34,161,255,.22) 38%,
      rgba(20,94,180,.08) 58%,
      transparent 76%
    ) !important;

  filter:
    blur(5px) !important;

  animation:
    accountEnergyCompactBasePulse
    3.5s
    ease-in-out
    infinite !important;
}


/* small base ring */

.account-energy-stage{
  --account-base-ring-width:24%;
}


.account-energy-stage::before{
  content:"" !important;

  position:absolute !important;

  left:50% !important;

  top:auto !important;

  bottom:18px !important;

  width:var(--account-base-ring-width) !important;

  height:19px !important;

  aspect-ratio:auto !important;

  transform:
    translateX(-50%) !important;

  border:
    1px solid
    rgba(76,224,255,.32) !important;

  border-radius:50% !important;

  background:transparent !important;

  filter:none !important;

  z-index:5 !important;

  opacity:.72 !important;

  animation:
    accountEnergyCompactBaseRing
    5.5s
    linear
    infinite !important;

  box-shadow:
    0 0 7px
    rgba(67,219,255,.19) !important;
}


/* =========================================================
   COMPACT SPACING
   Planet -> big ring -> second ring -> base
   ========================================================= */

/*

Approx vertical relation:

Planet underside
      ↓ ~8px
BIG RING
      ↓ ~10px
SECOND RING
      ↓ ~10px
BASE

*/


/* =========================================================
   ANIMATION
   Only dash motion / glow changes.
   Physical ring positions remain fixed.
   ========================================================= */

@keyframes accountEnergyCompactRingOne{

  from{
    stroke-dashoffset:0;
  }

  to{
    stroke-dashoffset:100;
  }

}


@keyframes accountEnergyCompactRingTwo{

  from{
    stroke-dashoffset:0;
  }

  to{
    stroke-dashoffset:-100;
  }

}


@keyframes accountEnergyCompactBaseRing{

  0%{
    opacity:.42;
    box-shadow:
      0 0 4px
      rgba(65,220,255,.14);
  }

  50%{
    opacity:.84;
    box-shadow:
      0 0 10px
      rgba(65,220,255,.34);
  }

  100%{
    opacity:.42;
    box-shadow:
      0 0 4px
      rgba(65,220,255,.14);
  }

}


@keyframes accountEnergyCompactBasePulse{

  0%,
  100%{
    opacity:.36;
  }

  50%{
    opacity:.88;
  }

}


/* =========================================================
   BALANCE PLATE
   Bring slightly closer to visual stage
   ========================================================= */

.account-energy-balance{
  margin-top:-2px !important;
}


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

@media(max-width:900px){

  .account-energy-stage{
    height:285px !important;
  }

  .account-energy-planet{
    height:240px !important;
  }

  .account-energy-orbit-back{
    top:205px !important;
  }

  .account-energy-orbit-front{
    top:229px !important;
  }

}


@media(max-width:620px){

  .account-energy-core{
    min-height:330px !important;
  }

  .account-energy-stage{
    height:245px !important;
  }

  .account-energy-planet{
    height:205px !important;
  }

  .account-energy-orbit-back{
    top:175px !important;
    width:78% !important;
  }

  .account-energy-orbit-front{
    top:196px !important;
    width:59% !important;
  }

  .account-energy-stage::before{
    bottom:13px !important;
  }

  .account-energy-stage::after{
    bottom:8px !important;
  }

}


/* =========================================================
   PREMONEON_ACCOUNT_ENERGY_ANIMATION_POSITION_V2

   POSITION ADJUSTMENT ONLY

   IMPORTANT:
   - planet image untouched
   - planet size untouched
   - planet position untouched
   - wallet balance untouched
   - animation stack moved upward
   - ring spacing compressed
   ========================================================= */


/* ---------------------------------------------------------
   LARGE FIRST RING

   Previous position was too low because top referred
   to the top of the full SVG viewBox.

   Move substantially upward so the visible ellipse
   sits directly below the planet.
   --------------------------------------------------------- */

.account-energy-orbit-back{
  top:158px !important;

  width:76% !important;

  transform:
    translateX(-50%) !important;
}


/* ---------------------------------------------------------
   SECOND RING

   Keep only a compact visual gap below first ring.
   --------------------------------------------------------- */

.account-energy-orbit-front{
  top:184px !important;

  width:57% !important;

  transform:
    translateX(-50%) !important;
}


/* ---------------------------------------------------------
   BASE RING

   Raise slightly and keep close to second ring.
   Do NOT move the planet.
   --------------------------------------------------------- */

.account-energy-stage::before{
  top:auto !important;

  bottom:28px !important;

  width:24% !important;

  height:17px !important;

  transform:
    translateX(-50%) !important;
}


/* ---------------------------------------------------------
   BASE ENERGY GLOW
   --------------------------------------------------------- */

.account-energy-stage::after{
  top:auto !important;

  bottom:22px !important;

  width:25% !important;

  height:12px !important;

  transform:
    translateX(-50%) !important;
}


/* ---------------------------------------------------------
   Keep balance panel where it is.
   No negative positioning caused by animation.
   --------------------------------------------------------- */

.account-energy-balance{
  position:relative;

  z-index:10;

  margin-top:0 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

  .account-energy-orbit-back{
    top:148px !important;
  }

  .account-energy-orbit-front{
    top:171px !important;
  }

  .account-energy-stage::before{
    bottom:25px !important;
  }

  .account-energy-stage::after{
    bottom:19px !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:620px){

  .account-energy-orbit-back{
    top:124px !important;
  }

  .account-energy-orbit-front{
    top:144px !important;
  }

  .account-energy-stage::before{
    bottom:22px !important;
  }

  .account-energy-stage::after{
    bottom:17px !important;
  }

}


/* =========================================================
   PREMONEON_ACCOUNT_ENERGY_STACK_FINAL_V1

   Final positioning:
   - planet untouched
   - first ring remains safely below planet
   - second ring compressed upward
   - base compressed upward
   ========================================================= */


/* ---------------------------------------------------------
   FIRST / LARGE RING

   Only a very small upward adjustment.
   Do not let this touch the planet artwork.
   --------------------------------------------------------- */

.account-energy-orbit-back{
  top:154px !important;

  width:76% !important;
}


/* ---------------------------------------------------------
   SECOND RING

   Move closer to first ring.
   --------------------------------------------------------- */

.account-energy-orbit-front{
  top:172px !important;

  width:57% !important;
}


/* ---------------------------------------------------------
   BASE RING

   Pull upward closer to second ring.
   --------------------------------------------------------- */

.account-energy-stage::before{
  top:auto !important;

  bottom:46px !important;

  width:24% !important;

  height:15px !important;
}


/* ---------------------------------------------------------
   BASE GLOW
   Keep directly underneath base ring.
   --------------------------------------------------------- */

.account-energy-stage::after{
  top:auto !important;

  bottom:41px !important;

  width:24% !important;

  height:10px !important;
}


/* ---------------------------------------------------------
   Keep visual layers cleanly separated from planet.
   --------------------------------------------------------- */

.account-energy-orbit-back,
.account-energy-orbit-front{
  pointer-events:none !important;
}


/* ---------------------------------------------------------
   PLANET IS LOCKED
   --------------------------------------------------------- */

.account-energy-planet{
  transform:none !important;

  animation:none !important;

  transition:none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

  .account-energy-orbit-back{
    top:144px !important;
  }

  .account-energy-orbit-front{
    top:161px !important;
  }

  .account-energy-stage::before{
    bottom:42px !important;
  }

  .account-energy-stage::after{
    bottom:37px !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:620px){

  .account-energy-orbit-back{
    top:121px !important;
  }

  .account-energy-orbit-front{
    top:136px !important;
  }

  .account-energy-stage::before{
    bottom:37px !important;
  }

  .account-energy-stage::after{
    bottom:32px !important;
  }

}


/* =============================================================
   PREMONEON_ACCOUNT_ENERGY_TRUE_DEPTH_FINAL_V1

   AUTHORITATIVE FINAL ENERGY FIELD

   LOCKED:
   - blockchain planet remains static
   - planet dimensions remain controlled by existing layout
   - rear big-ring arc passes BEHIND planet
   - front big-ring arc passes IN FRONT
   - second ring is complete 360-degree ellipse
   - no moving balls
   - compact animated base
   - wallet panel untouched
   ============================================================= */


/* -------------------------------------------------------------
   STAGE
   ------------------------------------------------------------- */

.account-energy-depth-stage{
    position:relative !important;

    overflow:visible !important;

    isolation:isolate;

    height:290px !important;
}


/* -------------------------------------------------------------
   PLANET

   Do not move or animate.
   Only establish stacking context.
   ------------------------------------------------------------- */

.account-energy-depth-stage
.account-energy-planet{

    position:relative !important;

    z-index:4 !important;

    transform:none !important;

    animation:none !important;

    transition:none !important;
}


/* =============================================================
   BIG PRIMARY ENERGY RING

   BOTH SVGs occupy EXACTLY the same geometry.

   Back SVG = rear half behind planet.
   Front SVG = front half above planet.
   ============================================================= */

.account-energy-depth-orbit{

    position:absolute !important;

    left:50% !important;

    top:139px !important;

    width:76% !important;

    height:auto !important;

    transform:
        translateX(-50%) !important;

    overflow:visible !important;

    pointer-events:none !important;
}


/* rear half */

.account-energy-depth-back{

    z-index:3 !important;

    opacity:.68;
}


/* front half */

.account-energy-depth-front{

    z-index:5 !important;

    opacity:1;
}


/* shared line */

.account-energy-depth-line{

    fill:none;

    vector-effect:
        non-scaling-stroke;

    stroke-linecap:round;
}


/* -------------------------------------------------------------
   REAR ARC

   Slightly dimmer because it is visually behind the planet.
   ------------------------------------------------------------- */

.account-energy-depth-line-back{

    stroke:
        rgba(68,211,255,.70);

    stroke-width:2;

    stroke-dasharray:
        18 5 7 8;

    animation:
        accountEnergyDepthBackFlow
        11s
        linear
        infinite;

    filter:
        drop-shadow(
            0 0 4px
            rgba(45,211,255,.72)
        )
        drop-shadow(
            0 0 9px
            rgba(0,150,255,.28)
        );
}


/* -------------------------------------------------------------
   FRONT ARC

   Brighter because it is physically in front.
   ------------------------------------------------------------- */

.account-energy-depth-line-front{

    stroke:#63ebff;

    stroke-width:2.5;

    stroke-dasharray:
        25 5 9 7;

    animation:
        accountEnergyDepthFrontFlow
        7.5s
        linear
        infinite;

    filter:
        drop-shadow(
            0 0 4px
            rgba(103,235,255,.96)
        )
        drop-shadow(
            0 0 10px
            rgba(0,190,255,.55)
        )
        drop-shadow(
            0 0 18px
            rgba(0,130,255,.24)
        );
}


/* =============================================================
   SECOND RING

   Complete ellipse.
   Approximately 25% visually smaller than primary ring.

   Close underneath primary ring.
   ============================================================= */

.account-energy-second-ring{

    position:absolute !important;

    left:50% !important;

    top:220px !important;

    width:57% !important;

    height:auto !important;

    transform:
        translateX(-50%) !important;

    z-index:5 !important;

    overflow:visible !important;

    pointer-events:none !important;
}


.account-energy-second-ring-line{

    fill:none;

    stroke:
        rgba(62,221,255,.84);

    stroke-width:1.8;

    stroke-linecap:round;

    vector-effect:
        non-scaling-stroke;

    stroke-dasharray:
        13 5 4 7;

    animation:
        accountEnergySecondRingFlow
        8.5s
        linear
        infinite;

    filter:
        drop-shadow(
            0 0 3px
            rgba(75,229,255,.90)
        )
        drop-shadow(
            0 0 8px
            rgba(0,174,255,.38)
        );
}


/* =============================================================
   BASE RING

   ::before = thin base ellipse
   ::after  = center energy glow

   This replaces the older generic field pseudo-elements.
   ============================================================= */

.account-energy-depth-stage::before{

    content:"" !important;

    position:absolute !important;

    left:50% !important;

    top:267px !important;

    bottom:auto !important;

    width:24% !important;

    height:13px !important;

    transform:
        translateX(-50%) !important;

    border:
        1px solid
        rgba(52,211,255,.64) !important;

    border-radius:50% !important;

    background:
        transparent !important;

    box-shadow:
        0 0 5px
        rgba(51,221,255,.42),
        inset 0 0 6px
        rgba(26,168,255,.16) !important;

    opacity:.82 !important;

    z-index:5 !important;

    pointer-events:none !important;

    animation:
        accountEnergyBaseRingPulse
        3.4s
        ease-in-out
        infinite !important;
}


.account-energy-depth-stage::after{

    content:"" !important;

    position:absolute !important;

    left:50% !important;

    top:270px !important;

    bottom:auto !important;

    width:17% !important;

    height:10px !important;

    transform:
        translateX(-50%) !important;

    border:0 !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            ellipse,
            rgba(78,232,255,.64) 0%,
            rgba(0,181,255,.28) 28%,
            rgba(0,128,255,.09) 58%,
            transparent 76%
        ) !important;

    filter:
        blur(2px);

    opacity:.88 !important;

    z-index:5 !important;

    pointer-events:none !important;

    animation:
        accountEnergyBaseGlowPulse
        2.8s
        ease-in-out
        infinite !important;
}


/* =============================================================
   REMOVE OLD ORBIT SYSTEM

   Old elements should no longer exist in new markup, but these
   rules guarantee that stale markup cannot appear.
   ============================================================= */

.account-energy-depth-stage
.account-energy-orbit-back,

.account-energy-depth-stage
.account-energy-orbit-front,

.account-energy-depth-stage
.account-energy-node,

.account-energy-depth-stage
.account-energy-field-mark{

    display:none !important;
}


/* =============================================================
   ANIMATIONS
   ============================================================= */

@keyframes accountEnergyDepthBackFlow{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-100;
    }
}


@keyframes accountEnergyDepthFrontFlow{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:100;
    }
}


@keyframes accountEnergySecondRingFlow{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-100;
    }
}


@keyframes accountEnergyBaseRingPulse{

    0%,
    100%{
        opacity:.58;

        transform:
            translateX(-50%)
            scaleX(.96);
    }

    50%{
        opacity:.94;

        transform:
            translateX(-50%)
            scaleX(1.035);
    }
}


@keyframes accountEnergyBaseGlowPulse{

    0%,
    100%{
        opacity:.52;

        transform:
            translateX(-50%)
            scale(.92);
    }

    50%{
        opacity:.96;

        transform:
            translateX(-50%)
            scale(1.08);
    }
}


/* =============================================================
   TABLET
   ============================================================= */

@media(max-width:900px){

    .account-energy-depth-stage{
        height:250px !important;
    }

    .account-energy-depth-orbit{
        top:121px !important;
        width:77% !important;
    }

    .account-energy-second-ring{
        top:190px !important;
        width:58% !important;
    }

    .account-energy-depth-stage::before{
        top:229px !important;
    }

    .account-energy-depth-stage::after{
        top:232px !important;
    }
}


/* =============================================================
   MOBILE
   ============================================================= */

@media(max-width:620px){

    .account-energy-depth-stage{
        height:215px !important;
    }

    .account-energy-depth-orbit{
        top:102px !important;
        width:79% !important;
    }

    .account-energy-second-ring{
        top:159px !important;
        width:60% !important;
    }

    .account-energy-depth-stage::before{
        top:193px !important;
        width:25% !important;
    }

    .account-energy-depth-stage::after{
        top:196px !important;
        width:18% !important;
    }
}


/* =============================================================
   PREMONEON_ACCOUNT_ENERGY_DEPTH_V2_25PCT_UP

   FINAL REFINEMENT:
   - animation stack ~25% higher
   - PLANET position unchanged
   - primary ring remains true-depth
   - second ring now also true-depth
   - strong controlled glow
   - compact base follows stack upward
   ============================================================= */


/* =============================================================
   PLANET — ABSOLUTELY LOCKED
   ============================================================= */

.account-energy-depth-stage
.account-energy-planet{

    position:relative !important;

    z-index:4 !important;

    transform:none !important;

    animation:none !important;

    transition:none !important;
}


/* =============================================================
   PRIMARY BIG RING
   Previous top: ~139px
   New target: ~104px
   ============================================================= */

.account-energy-depth-orbit{

    top:104px !important;

    width:76% !important;
}


.account-energy-depth-back{
    z-index:3 !important;
}


.account-energy-depth-front{
    z-index:6 !important;
}


/* stronger but controlled rear glow */

.account-energy-depth-line-back{

    stroke:
        rgba(66,218,255,.72) !important;

    stroke-width:2 !important;

    filter:
        drop-shadow(
            0 0 4px
            rgba(62,220,255,.78)
        )
        drop-shadow(
            0 0 10px
            rgba(0,160,255,.32)
        ) !important;
}


/* stronger foreground glow */

.account-energy-depth-line-front{

    stroke:#68efff !important;

    stroke-width:2.5 !important;

    filter:
        drop-shadow(
            0 0 4px
            rgba(104,239,255,1)
        )
        drop-shadow(
            0 0 10px
            rgba(0,196,255,.60)
        )
        drop-shadow(
            0 0 20px
            rgba(0,125,255,.25)
        ) !important;
}


/* =============================================================
   SECOND RING

   Previous overall top: ~220px
   New target: ~165px

   IMPORTANT:
   rear portion goes BEHIND planet
   front portion goes ABOVE planet
   ============================================================= */

.account-energy-second-ring{

    position:absolute !important;

    left:50% !important;

    top:165px !important;

    width:57% !important;

    height:auto !important;

    transform:
        translateX(-50%) !important;

    overflow:visible !important;

    pointer-events:none !important;
}


/* rear half */

.account-energy-second-ring-back{

    z-index:3 !important;

    opacity:.66 !important;
}


/* front half */

.account-energy-second-ring-front{

    z-index:6 !important;

    opacity:.94 !important;
}


/* common second-ring path */

.account-energy-second-depth-line{

    fill:none;

    vector-effect:
        non-scaling-stroke;

    stroke-linecap:round;
}


/* -------------------------------------------------------------
   SECOND RING REAR
   ------------------------------------------------------------- */

.account-energy-second-depth-back-line{

    stroke:
        rgba(55,205,255,.66);

    stroke-width:1.55;

    stroke-dasharray:
        15 5 5 7;

    animation:
        accountEnergySecondDepthBackFlow
        10s
        linear
        infinite;

    filter:
        drop-shadow(
            0 0 3px
            rgba(70,220,255,.62)
        )
        drop-shadow(
            0 0 8px
            rgba(0,145,255,.24)
        );
}


/* -------------------------------------------------------------
   SECOND RING FRONT
   ------------------------------------------------------------- */

.account-energy-second-depth-front-line{

    stroke:#4fe6ff;

    stroke-width:1.9;

    stroke-dasharray:
        18 5 7 6;

    animation:
        accountEnergySecondDepthFrontFlow
        7.4s
        linear
        infinite;

    filter:
        drop-shadow(
            0 0 4px
            rgba(79,230,255,.94)
        )
        drop-shadow(
            0 0 9px
            rgba(0,181,255,.45)
        );
}


/* =============================================================
   DISABLE OLD COMPLETE SECOND RING STYLE
   ============================================================= */

.account-energy-second-ring-line{
    display:none !important;
}


/* =============================================================
   BASE

   Previous:
   ~267px

   New:
   ~200px
   ============================================================= */

.account-energy-depth-stage::before{

    top:200px !important;

    bottom:auto !important;

    width:24% !important;

    height:13px !important;

    z-index:6 !important;
}


.account-energy-depth-stage::after{

    top:203px !important;

    bottom:auto !important;

    width:17% !important;

    height:10px !important;

    z-index:6 !important;
}


/* =============================================================
   STAGE HEIGHT

   Animation is now more compact, so remove dead vertical space.
   ============================================================= */

.account-energy-depth-stage{

    height:235px !important;
}


/* =============================================================
   SECOND RING ANIMATIONS
   ============================================================= */

@keyframes accountEnergySecondDepthBackFlow{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-100;
    }
}


@keyframes accountEnergySecondDepthFrontFlow{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:100;
    }
}


/* =============================================================
   TABLET
   ============================================================= */

@media(max-width:900px){

    .account-energy-depth-stage{
        height:215px !important;
    }

    .account-energy-depth-orbit{
        top:91px !important;
    }

    .account-energy-second-ring{
        top:144px !important;
    }

    .account-energy-depth-stage::before{
        top:178px !important;
    }

    .account-energy-depth-stage::after{
        top:181px !important;
    }
}


/* =============================================================
   MOBILE
   ============================================================= */

@media(max-width:620px){

    .account-energy-depth-stage{
        height:185px !important;
    }

    .account-energy-depth-orbit{
        top:76px !important;
        width:79% !important;
    }

    .account-energy-second-ring{
        top:121px !important;
        width:60% !important;
    }

    .account-energy-depth-stage::before{
        top:151px !important;
        width:25% !important;
    }

    .account-energy-depth-stage::after{
        top:154px !important;
        width:18% !important;
    }
}


/* =============================================================
   PREMONEON_EARTH_TWO_RINGS_UNIFORM_UP25_V2

   MOVE ONLY:
   - Earth + Earth image glow
   - Primary ring rear/front
   - Second ring rear/front

   SAME DELTA FOR ALL:
   -32px desktop

   DO NOT MOVE:
   - base ring
   - base glow
   - wallet panel

   No resize.
   No layering changes.
   No SVG changes.
   ============================================================= */


.account-energy-depth-stage{
    --account-energy-upper-shift:-32px;
}


/* =============================================================
   EARTH + ITS OWN FILTER/DROP-SHADOW GLOW
   ============================================================= */

.account-energy-depth-stage
.account-energy-planet{

    transform:
        translateY(
            var(--account-energy-upper-shift)
        ) !important;

    animation:none !important;
    transition:none !important;
}


/* =============================================================
   PRIMARY RING
   Rear and front share this geometry.
   Existing z-index layering remains unchanged.
   ============================================================= */

.account-energy-depth-orbit{

    transform:
        translate(
            -50%,
            var(--account-energy-upper-shift)
        ) !important;
}


/* =============================================================
   SECOND RING
   Rear and front receive exactly the same displacement.
   Existing z-index layering remains unchanged.
   ============================================================= */

.account-energy-second-ring{

    transform:
        translate(
            -50%,
            var(--account-energy-upper-shift)
        ) !important;
}


/* =============================================================
   BASE INTENTIONALLY NOT TARGETED.

   DO NOT add rules here for:

   account-energy-depth-stage::before
   account-energy-depth-stage::after

   Those remain exactly where they are.
   ============================================================= */


/* =============================================================
   TABLET
   Slightly smaller rigid shift.
   ============================================================= */

@media(max-width:900px){

    .account-energy-depth-stage{
        --account-energy-upper-shift:-28px;
    }

}


/* =============================================================
   MOBILE
   Slightly smaller rigid shift.
   ============================================================= */

@media(max-width:620px){

    .account-energy-depth-stage{
        --account-energy-upper-shift:-22px;
    }

}


/* === DASHBOARD TOP CARDS COMPACT V1 START === */

/*
 * TOP DASHBOARD ROW
 *
 * Prevent the Account Core / Energy Core pair from carrying
 * unnecessary vertical dead space below their useful content.
 */

.dashboard-header{
    align-items:start !important;
}


/*
 * LEFT — ACCOUNT CORE
 *
 * Old base rule:
 * min-height:210px
 *
 * Content no longer needs to reserve that much vertical space.
 */

.dashboard-header .account-core{
    min-height:0 !important;

    align-items:flex-start !important;
}


/*
 * RIGHT — ACCOUNT ENERGY CORE
 *
 * IMPORTANT:
 * Do NOT modify:
 *
 * .account-energy-stage
 * .account-energy-planet
 * .account-energy-depth-orbit
 * .account-energy-base
 *
 * Those retain the finalized visual geometry.
 *
 * We only remove excess minimum-height pressure from the wrapper.
 */

.dashboard-header .account-energy-core{
    min-height:0 !important;
}


/*
 * Keep the two actual outer panels naturally sized.
 *
 * This prevents grid stretching from producing artificial
 * empty space below the content.
 */

.dashboard-header > .neo-panel{
    align-self:start !important;
    height:auto !important;
}


/*
 * Preserve normal panel padding.
 */

.dashboard-header > .neo-panel > .neo-panel-inner{
    height:auto !important;
}

/* =========================================================
   PURCHASE HISTORY PREMIUM META V3
   Desktop + Mobile
========================================================= */

.history-pagination{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:16px;
}


.premium-history-meta{

  display:flex;
  align-items:center;
  gap:28px;

  flex:1;

  padding:12px 16px;

  border:1px solid var(--line);

  background:
    linear-gradient(
      90deg,
      rgba(0,240,255,.04),
      rgba(255,255,255,.015)
    );

}


.premium-history-meta span{

  display:flex;
  flex-direction:column;

  gap:5px;

  min-width:90px;

  color:#607987;

  font-size:.42rem;

  letter-spacing:.14em;

}


.premium-history-meta strong{

  color:#d6e6ef;

  font-size:.72rem;

  letter-spacing:.05em;

}


.history-pagination-actions{

  display:flex;

  gap:10px;

}

@media(max-width:700px){

  .history-pagination{
    flex-direction:column;
    align-items:stretch;
  }


  .premium-history-meta{
    justify-content:space-between;
    gap:10px;
  }

}

/* =========================================================
   HISTORY FORENSIC DETAIL TERMINAL
   Canonical readable forensic expansion
========================================================= */

.history-forensic-details {
    margin-top:20px;
    border:1px solid rgba(87,229,255,.18);
    background:
        linear-gradient(
            145deg,
            rgba(8,22,34,.92),
            rgba(3,10,17,.88)
        );
}


.history-forensic-details summary {
    list-style:none;
    cursor:pointer;
    padding:16px 18px;
}


.history-forensic-details summary::-webkit-details-marker {
    display:none;
}


.history-forensic-toggle {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}


.history-forensic-title {
    display:flex;
    align-items:center;
    gap:14px;
}


.forensic-toggle-icon {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;

    border:1px solid rgba(87,229,255,.25);
    color:var(--cyan);

    font-size:.9rem;
}


.history-forensic-title strong {

    display:block;

    font-size:.75rem;
    letter-spacing:.12em;
}


.history-forensic-title small {

    display:block;

    margin-top:5px;

    color:#728894;

    font-size:.55rem;
    letter-spacing:.08em;
}


.forensic-toggle-action {

    color:var(--cyan);

    font-size:.60rem;

    font-weight:900;

    letter-spacing:.12em;

}


/* CONTENT */

.history-forensic-content {

    padding:18px;

    display:grid;

    gap:16px;

}


/* SECTION CARD */

.history-forensic-content section {

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

    background:
    rgba(4,15,24,.55);

    padding:16px;

}


.history-forensic-heading {

    color:var(--cyan);

    font-size:.58rem;

    font-weight:900;

    letter-spacing:.15em;

    margin-bottom:14px;

    border-bottom:
    1px solid rgba(97,221,255,.12);

    padding-bottom:8px;

}


/* forensic rows */

.history-forensic-row {

    display:flex;

    justify-content:space-between;

    gap:20px;

    padding:10px 0;

    border-bottom:
    1px solid rgba(97,221,255,.08);

}


.history-forensic-row:last-child {

    border-bottom:none;

}


.history-forensic-row span {

    color:#718895;

    font-size:.65rem;

}


.history-forensic-row strong {

    color:#e8f8ff;

    font-size:.68rem;

    text-align:right;

    overflow-wrap:anywhere;

}

/* Human-readable forensic row refinements */

.history-forensic-row-label{
    color:#718895;
    font-size:.65rem;
    line-height:1.45;
}


.history-forensic-row strong{
    min-width:0;
    color:#e8f8ff;
    text-align:right;
    overflow-wrap:anywhere;
    line-height:1.45;
}


.history-forensic-row strong.is-address,
.history-forensic-row strong.is-reference{
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    color:#9fc4d3;
}


.history-forensic-details[open]
.forensic-toggle-action{
    color:#9fb4c0;
}


.history-forensic-details[open]
.forensic-toggle-action::after{
    content:" / OPEN";
    color:var(--cyan);
}


@media(max-width:700px){

    .history-forensic-toggle{
        align-items:flex-start;
    }

    .forensic-toggle-action{
        white-space:nowrap;
    }

    .history-forensic-content{
        grid-template-columns:1fr;
    }

    .history-forensic-row{
        flex-direction:column;
        gap:5px;
    }

    .history-forensic-row strong{
        text-align:left;
    }

}
/* === DASHBOARD TOP CARDS COMPACT V1 END === */


/* SPECIAL ACCOUNT HISTORY - SIMPLE USER ACTIVITY TEXT */

.history-sa-activity-text{
    margin:8px 0 0;
    color:#91abb7;
    font-size:12px;
    line-height:1.6;
}
/* =========================================================
   PREMONEON SA HISTORY 3-CARD ROW V1
   Presentation only
   ========================================================= */

/*
 * If the active History list contains SA lifecycle cards,
 * convert that list into a compact 3-column activity grid.
 */
.history-ledger-panel:has(.history-sa-simple-card)
.history-friendly-list,

.history-ledger-panel:has(.history-sa-simple-card)
.history-ledger-list,

.history-ledger-panel:has(.history-sa-simple-card)
.history-list{
    display:grid !important;

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

    gap:1px !important;

    align-items:stretch;
}


/*
 * Tight connected-card appearance.
 */
.history-sa-simple-card{
    margin:0 !important;

    min-width:0;

    height:100%;

    border-radius:0 !important;

    border:
        1px solid
        rgba(97,221,255,.09) !important;

    box-shadow:none !important;
}


/*
 * Restore outer corner rounding for the visual group.
 */
.history-sa-simple-card:nth-child(3n + 1){
    border-radius:
        12px 0 0 12px !important;
}

.history-sa-simple-card:nth-child(3n){
    border-radius:
        0 12px 12px 0 !important;
}


/*
 * Simple activity content.
 */
.history-sa-simple-main{
    min-height:150px;

    padding:
        22px 20px 18px;

    display:flex;
    flex-direction:column;
}

.history-sa-simple-main h3{
    margin:0;

    font-size:20px;

    line-height:1.15;

    letter-spacing:.03em;
}

.history-sa-activity-text{
    margin:
        12px 0 0 !important;

    flex:1;

    font-size:12px !important;

    line-height:1.6 !important;
}

.history-sa-simple-date{
    margin:
        18px 0 0 !important;

    font-size:10px;

    color:#657f8a;
}


/*
 * Keep View Details aligned at the bottom
 * so all three cards look uniform.
 */
.history-sa-simple-card
.history-friendly-details{
    margin-top:auto;

    border-top:
        1px solid
        rgba(97,221,255,.075);
}


/*
 * Tablet:
 * two cards per row.
 */
@media (max-width:1100px){

    .history-ledger-panel:has(.history-sa-simple-card)
    .history-friendly-list,

    .history-ledger-panel:has(.history-sa-simple-card)
    .history-ledger-list,

    .history-ledger-panel:has(.history-sa-simple-card)
    .history-list{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }

    .history-sa-simple-card{
        border-radius:0 !important;
    }
}


/*
 * Mobile:
 * one card per row.
 */
@media (max-width:680px){

    .history-ledger-panel:has(.history-sa-simple-card)
    .history-friendly-list,

    .history-ledger-panel:has(.history-sa-simple-card)
    .history-ledger-list,

    .history-ledger-panel:has(.history-sa-simple-card)
    .history-list{
        grid-template-columns:
            1fr !important;
    }

    .history-sa-simple-card{
        border-radius:
            10px !important;
    }
}

/* =========================================================
   PREMONEON SA HISTORY EXACT GRID SELECTOR V2
   Actual active container: .history-record-list
   ========================================================= */

.history-record-list:has(.history-sa-simple-card){
    display:grid !important;
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

    gap:1px !important;
    align-items:stretch;
}


/* Remove old vertical sibling spacing inside SA grid */
.history-record-list:has(.history-sa-simple-card)
.history-friendly-card +
.history-friendly-card{
    margin-top:0 !important;
}


/* Desktop connected cards */
.history-record-list:has(.history-sa-simple-card)
.history-sa-simple-card{
    margin:0 !important;
    min-width:0;
    height:100%;
}


/* Tablet */
@media (max-width:1100px){

    .history-record-list:has(.history-sa-simple-card){
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }
}


/* Mobile */
@media (max-width:680px){

    .history-record-list:has(.history-sa-simple-card){
        grid-template-columns:
            1fr !important;
    }
}


/* =========================================================
   PREMONEON SA DETAILS COMPACT FULL WIDTH V1
   Special Account lifecycle only.
   Presentation only.
   ========================================================= */


/*
 * Generic friendly details uses a 2-column section grid.
 * SA lifecycle currently has only one detail section.
 * Make that single section consume the complete card width.
 */
.history-sa-simple-card
.history-friendly-details-body{
    display:block !important;

    background:
        rgba(3,12,19,.99) !important;
}


/*
 * Full-width SA detail section.
 */
.history-sa-simple-card
.history-friendly-details-body > section{
    width:100% !important;

    min-width:0;

    padding:
        16px 18px 14px !important;

    background:
        rgba(3,12,19,.99) !important;
}


/*
 * Compact section heading.
 */
.history-sa-simple-card
.history-forensic-heading{
    margin:0 0 6px !important;

    padding:0 0 8px !important;

    font-size:9px !important;

    line-height:1.2;

    letter-spacing:.13em;

    border-bottom:
        1px solid
        rgba(97,221,255,.10);
}


/*
 * Compact SA canonical rows.
 *
 * Keep every canonical field available,
 * but reduce unnecessary vertical height.
 */
.history-sa-simple-card
.history-forensic-row{
    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        minmax(90px,auto) !important;

    align-items:center;

    gap:12px !important;

    min-height:31px !important;

    padding:
        6px 0 !important;

    border-bottom:
        1px solid
        rgba(97,221,255,.065) !important;
}


.history-sa-simple-card
.history-forensic-row:last-child{
    border-bottom:none !important;
}


/*
 * Labels.
 */
.history-sa-simple-card
.history-forensic-row-label{
    min-width:0;

    color:#718895;

    font-size:9px !important;

    line-height:1.35 !important;
}


/*
 * Values.
 */
.history-sa-simple-card
.history-forensic-row strong{
    min-width:0;

    color:#e8f8ff;

    font-size:10px !important;

    font-weight:700;

    line-height:1.35 !important;

    text-align:right !important;

    overflow-wrap:anywhere;
}


/*
 * Address remains visually distinct.
 */
.history-sa-simple-card
.history-forensic-row strong.is-address{
    color:#9fc4d3;

    font-size:9px !important;
}


/*
 * Slightly tighter View Details control
 * specifically for SA lifecycle cards.
 */
.history-sa-simple-card
.history-friendly-details summary{
    min-height:48px !important;

    padding:
        0 18px !important;
}


/*
 * Mobile:
 * keep label/value relationship readable.
 */
@media (max-width:680px){

    .history-sa-simple-card
    .history-friendly-details-body > section{
        padding:
            15px 16px 13px !important;
    }

    .history-sa-simple-card
    .history-forensic-row{
        grid-template-columns:
            minmax(0,1fr)
            minmax(82px,auto) !important;

        gap:10px !important;
    }

}


/* PREMONEON SA DETAILS COMPACT FULL WIDTH V1 */

/* ============================================================
   SALES INCENTIVE - PREMIUM MASTER MILESTONE SYSTEM
   Presentation-only enhancement.
   Canonical milestone state remains runtime-owned.
   ============================================================ */
/* ============================================================
   SALES INCENTIVE - PREMIUM MASTER MILESTONE SYSTEM
   Presentation-only enhancement.
   Canonical milestone state remains runtime-owned.
   ============================================================ */

.sales-milestone-system{
  margin-top:22px;
}

.sales-master-progress{
  position:relative;
  overflow:hidden;

  padding:22px 22px 18px;

  border:1px solid rgba(87,229,255,.20);
  border-radius:4px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(87,229,255,.075),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(7,24,36,.88),
      rgba(3,12,20,.92)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    inset 0 0 35px rgba(87,229,255,.018);
}

.sales-master-progress::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  opacity:.22;

  background-image:
    linear-gradient(
      rgba(87,229,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(87,229,255,.035) 1px,
      transparent 1px
    );

  background-size:28px 28px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 82%
    );
}

.sales-master-progress-head{
  position:relative;
  z-index:2;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:20px;

  padding-bottom:22px;

  border-bottom:
    1px solid rgba(97,221,255,.09);
}

.sales-master-progress-head small{
  display:block;

  color:#66818f;

  font-size:.43rem;
  font-weight:900;

  letter-spacing:.13em;
}

.sales-master-progress-head strong{
  display:block;

  margin-top:7px;

  color:#f1f9fc;

  font-size:1.05rem;
  line-height:1;
}

.sales-master-progress-head strong span{
  color:#728c99;

  font-size:.48rem;
  font-weight:800;

  letter-spacing:.07em;
}

.sales-master-progress-state{
  padding:8px 11px;

  color:var(--cyan);

  font-size:.43rem;
  font-weight:900;

  letter-spacing:.10em;

  border:
    1px solid rgba(87,229,255,.18);

  background:
    rgba(87,229,255,.035);
}


/* MASTER RAIL */

.sales-master-rail{
  position:relative;
  z-index:2;

  padding:
    39px 12px
    22px;
}

.sales-master-track{
  position:absolute;

  top:53px;
  left:8%;
  right:8%;

  height:3px;

  overflow:hidden;

  background:
    rgba(87,229,255,.10);

  box-shadow:
    inset 0 0 5px rgba(0,0,0,.65);
}

.sales-master-fill{
  position:absolute;
  inset:0 auto 0 0;

  width:
    clamp(
      0%,
      var(--sales-master-progress,0%),
      100%
    );

  background:
    linear-gradient(
      90deg,
      #278fff,
      var(--cyan),
      #9ff7ff
    );

  box-shadow:
    0 0 13px rgba(87,229,255,.55);

  transition:
    width .85s
    cubic-bezier(.22,.75,.18,1);
}

.sales-master-energy{
  position:absolute;

  top:0;
  bottom:0;

  width:90px;

  left:
    calc(
      clamp(
        0%,
        var(--sales-master-progress,0%),
        100%
      ) - 45px
    );

  opacity:.75;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.85),
      transparent
    );

  filter:blur(2px);

  animation:
    salesMasterEnergy
    2.8s ease-in-out infinite;
}

@keyframes salesMasterEnergy{
  0%,100%{
    opacity:.25;
  }

  50%{
    opacity:.9;
  }
}


/* NODES */

.sales-master-nodes{
  position:relative;

  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(105px,1fr)
    );

  align-items:start;

  gap:8px;
}

.sales-master-node{
  min-width:0;

  position:relative;

  display:grid;
  justify-items:center;

  text-align:center;
}

.sales-master-node-core{
  width:31px;
  height:31px;

  position:relative;

  display:grid;
  place-items:center;

  z-index:3;

  border:
    1px solid rgba(87,229,255,.24);

  border-radius:50%;

  color:#6f8793;

  background:
    #07141e;

  box-shadow:
    0 0 0 5px rgba(5,17,26,.96);
}

.sales-master-node-core span{
  position:relative;
  z-index:3;

  font-size:.48rem;
  font-weight:900;
}

.sales-master-node-core i{
  position:absolute;
  inset:5px;

  border:
    1px solid rgba(87,229,255,.08);

  border-radius:50%;
}


/* ACHIEVED */

.sales-master-node.done
.sales-master-node-core{
  color:#021016;

  border-color:var(--cyan);

  background:
    radial-gradient(
      circle,
      #d7fbff,
      var(--cyan) 55%,
      #36bfe4
    );

  box-shadow:
    0 0 0 5px rgba(5,17,26,.96),
    0 0 17px rgba(87,229,255,.38);
}


/* ACTIVE NEXT TARGET */

.sales-master-node.next
.sales-master-node-core{
  color:#dce0ff;

  border-color:
    var(--violet-premium);

  background:
    radial-gradient(
      circle,
      rgba(127,139,255,.26),
      #08131f 72%
    );

  box-shadow:
    0 0 0 5px rgba(5,17,26,.96),
    0 0 18px rgba(127,139,255,.28);
}

.sales-master-node.next
.sales-master-node-core::before{
  content:"";

  position:absolute;
  inset:-7px;

  border:
    1px solid rgba(127,139,255,.34);

  border-radius:50%;

  animation:
    salesTargetPulse
    2.2s ease-out infinite;
}

@keyframes salesTargetPulse{
  0%{
    transform:scale(.82);
    opacity:.85;
  }

  70%,100%{
    transform:scale(1.28);
    opacity:0;
  }
}


/* NODE COPY */

.sales-master-node-copy{
  width:100%;
  min-width:0;

  margin-top:15px;
}

.sales-master-node-copy > small{
  display:block;

  min-height:13px;

  color:#5f7885;

  font-size:.38rem;
  font-weight:900;

  letter-spacing:.10em;
}

.sales-master-node.done
.sales-master-node-copy > small{
  color:var(--cyan);
}

.sales-master-node.next
.sales-master-node-copy > small{
  color:#aeb5ff;
}

.sales-master-node-copy > strong{
  display:block;

  min-height:29px;

  margin-top:5px;

  overflow:hidden;

  color:#b7c9d2;

  font-size:.54rem;
  line-height:1.35;

  text-overflow:ellipsis;
}

.sales-master-node-copy > b{
  display:block;

  margin-top:5px;

  color:#f0f7fa;

  font-size:.61rem;
}

.sales-master-node-copy > b em{
  color:var(--cyan);

  font-size:.36rem;
  font-style:normal;

  letter-spacing:.07em;
}


/* NEXT TARGET MINI PROGRESS */

.sales-next-progress{
  display:grid;
  gap:5px;

  margin-top:9px;
}

.sales-next-progress > span{
  color:#aeb5ff;

  font-size:.42rem;
  font-weight:900;
}

.sales-next-progress > div{
  width:100%;
  height:3px;

  overflow:hidden;

  background:
    rgba(127,139,255,.10);
}

.sales-next-progress > div > i{
  display:block;

  width:
    clamp(
      0%,
      var(--sales-progress,0%),
      100%
    );

  height:100%;

  background:
    linear-gradient(
      90deg,
      var(--violet-premium),
      var(--cyan)
    );

  box-shadow:
    0 0 8px rgba(127,139,255,.35);
}


/* LEGEND */

.sales-master-legend{
  position:relative;
  z-index:2;

  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;

  gap:16px;

  padding-top:14px;

  border-top:
    1px solid rgba(97,221,255,.07);
}

.sales-master-legend span{
  display:flex;
  align-items:center;

  gap:6px;

  color:#5f7885;

  font-size:.37rem;
  font-weight:900;

  letter-spacing:.08em;
}

.sales-master-legend i{
  width:6px;
  height:6px;

  border-radius:50%;

  border:
    1px solid rgba(87,229,255,.28);

  background:#07141e;
}

.sales-master-legend
.achieved i{
  border-color:var(--cyan);
  background:var(--cyan);

  box-shadow:
    0 0 7px rgba(87,229,255,.4);
}

.sales-master-legend
.active i{
  border-color:
    var(--violet-premium);

  background:
    rgba(127,139,255,.45);
}


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

@media(max-width:760px){

  .sales-master-progress{
    padding:18px 15px;
  }

  .sales-master-progress-head{
    display:grid;
  }

  .sales-master-progress-state{
    width:max-content;
  }

  .sales-master-rail{
    padding:
      24px 0
      8px;
  }

  .sales-master-track{
    top:0;
    bottom:0;

    left:15px;
    right:auto;

    width:2px;
    height:auto;
  }

  .sales-master-fill{
    width:100%;

    height:
      clamp(
        0%,
        var(--sales-master-progress,0%),
        100%
      );
  }

  .sales-master-energy{
    display:none;
  }

  .sales-master-nodes{
    display:grid;
    grid-template-columns:1fr;

    gap:14px;
  }

  .sales-master-node{
    grid-template-columns:
      31px minmax(0,1fr);

    justify-items:start;
    align-items:start;

    gap:15px;

    text-align:left;
  }

  .sales-master-node-copy{
    margin-top:0;
  }

  .sales-master-node-copy > strong{
    min-height:0;
  }

  .sales-next-progress{
    max-width:240px;
  }

  .sales-master-legend{
    justify-content:flex-start;
  }
}

@media(prefers-reduced-motion:reduce){

  .sales-master-energy,
  .sales-master-node.next
  .sales-master-node-core::before{
    animation:none;
  }

  .sales-master-fill{
    transition:none;
  }
}

/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V2
   PRESENTATION ONLY
   ============================================================ */

:root{
  --sl-cyan:#43e7ff;
  --sl-blue:#2598ff;
  --sl-violet:#9b5cff;
  --sl-green:#49f2a1;
  --sl-amber:#ffc865;
  --sl-text:#eefaff;
  --sl-muted:#708a98;
  --sl-line:rgba(79,224,255,.13);
  --sl-panel:rgba(4,15,24,.82);
}

[class^="sales-locked-"],
[class*=" sales-locked-"],
[class^="sales-locked-"]::before,
[class^="sales-locked-"]::after,
[class*=" sales-locked-"]::before,
[class*=" sales-locked-"]::after{
  box-sizing:border-box;
}


/* ============================================================
   HERO
   ============================================================ */

.sales-locked-hero{
  position:relative;
  overflow:hidden;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    360px;

  gap:42px;

  align-items:center;

  min-height:220px;

  margin-bottom:26px;

  padding:
    26px
    30px;

  border-bottom:
    1px solid rgba(71,220,255,.10);

  background:
    radial-gradient(
      circle at 78% 45%,
      rgba(40,185,255,.10),
      transparent 27%
    );
}

.sales-locked-hero::after{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.22;

  background-image:
    linear-gradient(
      rgba(59,210,255,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(59,210,255,.035) 1px,
      transparent 1px
    );

  background-size:
    34px 34px;

  mask-image:
    linear-gradient(
      90deg,
      transparent 30%,
      black
    );
}

.sales-locked-hero-copy{
  position:relative;
  z-index:2;
}

.sales-locked-hero h1{
  margin:
    10px 0
    14px;

  color:
    var(--sl-text);

  font-size:
    clamp(
      2rem,
      4vw,
      3.7rem
    );

  line-height:.98;

  letter-spacing:-.045em;
}

.sales-locked-hero h1 em{
  color:
    var(--sl-cyan);

  font-style:normal;

  text-shadow:
    0 0 28px
    rgba(67,231,255,.28);
}

.sales-locked-hero p{
  max-width:720px;

  margin:0;

  color:#7893a1;

  font-size:.72rem;

  line-height:1.75;
}

.sales-locked-hero-side{
  position:relative;
  z-index:2;

  min-height:165px;

  display:grid;

  grid-template-columns:
    150px
    1fr;

  align-items:center;

  gap:18px;
}

.sales-locked-data-mode small{
  display:block;

  margin-bottom:7px;

  color:#5f7a88;

  font-size:.42rem;
  font-weight:900;

  letter-spacing:.13em;
}

.sales-locked-data-mode strong{
  display:block;

  color:
    var(--sl-cyan);

  font-size:.56rem;

  line-height:1.45;

  letter-spacing:.08em;
}


/* ============================================================
   BLOCKCHAIN VISUAL
   ============================================================ */

.sales-locked-chain-core{
  position:relative;

  width:150px;
  height:150px;

  justify-self:center;

  animation:
    salesLockedFloat
    5s ease-in-out infinite;
}

.sales-locked-chain-core .core{
  position:absolute;

  left:50%;
  top:50%;

  width:34px;
  height:34px;

  transform:
    translate(-50%,-50%)
    rotate(45deg);

  border:
    1px solid
    rgba(113,239,255,.85);

  background:
    linear-gradient(
      135deg,
      rgba(61,218,255,.33),
      rgba(93,91,255,.16)
    );

  box-shadow:
    0 0 22px
    rgba(67,231,255,.38),
    inset 0 0 12px
    rgba(120,243,255,.18);
}

.sales-locked-chain-core .orbit{
  position:absolute;

  left:50%;
  top:50%;

  border:
    1px solid
    rgba(63,217,255,.17);

  border-radius:50%;
}

.sales-locked-chain-core .orbit-a{
  width:104px;
  height:104px;

  transform:
    translate(-50%,-50%);

  animation:
    salesLockedSpin
    18s linear infinite;
}

.sales-locked-chain-core .orbit-b{
  width:142px;
  height:68px;

  transform:
    translate(-50%,-50%)
    rotate(-25deg);

  animation:
    salesLockedSpinReverse
    24s linear infinite;
}

.sales-locked-chain-core .node{
  position:absolute;

  width:10px;
  height:10px;

  border:
    1px solid
    var(--sl-cyan);

  transform:
    rotate(45deg);

  background:#061722;

  box-shadow:
    0 0 12px
    rgba(67,231,255,.50);
}

.sales-locked-chain-core .n1{
  left:19px;
  top:41px;
}

.sales-locked-chain-core .n2{
  right:20px;
  top:29px;
}

.sales-locked-chain-core .n3{
  left:26px;
  bottom:25px;
}

.sales-locked-chain-core .n4{
  right:22px;
  bottom:37px;
}

.sales-locked-chain-core .link{
  position:absolute;

  left:50%;
  top:50%;

  width:56px;
  height:1px;

  transform-origin:
    left center;

  background:
    linear-gradient(
      90deg,
      rgba(62,224,255,.45),
      transparent
    );
}

.sales-locked-chain-core .l1{
  transform:rotate(210deg);
}

.sales-locked-chain-core .l2{
  transform:rotate(320deg);
}

.sales-locked-chain-core .l3{
  transform:rotate(140deg);
}

.sales-locked-chain-core .l4{
  transform:rotate(35deg);
}

@keyframes salesLockedFloat{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-8px);
  }
}

@keyframes salesLockedSpin{
  to{
    transform:
      translate(-50%,-50%)
      rotate(360deg);
  }
}

@keyframes salesLockedSpinReverse{
  to{
    transform:
      translate(-50%,-50%)
      rotate(-385deg);
  }
}


/* ============================================================
   SUMMARY CARDS
   ============================================================ */

.sales-locked-summary{
  display:grid;

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

  gap:12px;

  margin:
    0 0 26px;
}

.sales-locked-stat{
  position:relative;
  overflow:hidden;

  min-height:166px;

  padding:
    19px 18px 16px;

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

  background:
    linear-gradient(
      150deg,
      rgba(6,21,31,.92),
      rgba(3,12,19,.94)
    );

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

.sales-locked-stat::before{
  content:"";

  position:absolute;

  width:90px;
  height:90px;

  right:-30px;
  top:-35px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(52,215,255,.09),
      transparent 70%
    );
}

.sales-locked-stat-top{
  display:flex;

  align-items:center;

  gap:12px;
}

.sales-locked-stat-icon{
  position:relative;

  width:34px;
  height:34px;

  flex:
    0 0 34px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(65,226,255,.22);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(57,218,255,.11),
      transparent 70%
    );
}

.sales-locked-stat-icon span{
  width:12px;
  height:12px;

  display:block;

  border:
    1px solid
    rgba(86,234,255,.65);

  transform:
    rotate(45deg);

  box-shadow:
    0 0 8px
    rgba(66,227,255,.24);
}

.sales-locked-stat-icon.review span{
  border-radius:50%;
}

.sales-locked-stat-icon.shield span{
  border-radius:
    2px 2px 6px 6px;
}

.sales-locked-stat-icon.award span{
  border-radius:50%;
}

.sales-locked-stat-head small{
  display:block;

  color:#6f8996;

  font-size:.41rem;
  font-weight:900;

  letter-spacing:.08em;
}

.sales-locked-stat-head strong{
  display:block;

  margin-top:4px;

  color:#b8ccd5;

  font-size:.44rem;

  letter-spacing:.08em;
}

.sales-locked-stat-value{
  margin-top:20px;

  color:
    var(--sl-text);

  font-size:1.75rem;
  font-weight:800;

  letter-spacing:-.04em;
}

.sales-locked-stat p{
  min-height:31px;

  margin:
    10px 0 15px;

  color:#607985;

  font-size:.49rem;

  line-height:1.55;
}

.sales-locked-stat-rail{
  height:2px;

  overflow:hidden;

  background:
    rgba(62,219,255,.07);
}

.sales-locked-stat-rail i{
  display:block;

  width:28%;
  height:100%;

  background:
    linear-gradient(
      90deg,
      var(--sl-cyan),
      transparent
    );

  box-shadow:
    0 0 9px
    rgba(67,231,255,.4);
}


/* ============================================================
   PROGRAM PANEL
   ============================================================ */

.sales-locked-program-panel
.neo-panel-inner{
  padding:24px !important;
}

.sales-locked-program-head{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:30px;

  margin-bottom:22px;
}

.sales-locked-program-head
.section-title{
  margin-top:7px;
}

.sales-locked-program-list{
  display:grid;

  gap:18px;
}

.sales-locked-program{
  overflow:hidden;

  border:
    1px solid
    rgba(67,220,255,.13);

  background:
    radial-gradient(
      circle at 68% 22%,
      rgba(57,193,255,.055),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(6,20,30,.96),
      rgba(3,12,19,.98)
    );
}

.sales-locked-program-grid{
  display:grid;

  grid-template-columns:
    minmax(290px,.86fr)
    minmax(460px,1.14fr);
}


/* ============================================================
   PROGRAM IDENTITY
   ============================================================ */

.sales-locked-identity{
  min-width:0;

  padding:24px;

  border-right:
    1px solid
    rgba(75,220,255,.09);
}

.sales-locked-id-head{
  display:flex;

  justify-content:space-between;
  align-items:flex-start;

  gap:18px;
}

.sales-locked-id-head small{
  display:block;

  color:#637e8b;

  font-size:.43rem;
  font-weight:900;

  letter-spacing:.13em;
}

.sales-locked-id-head strong{
  display:block;

  margin-top:6px;

  color:
    var(--sl-text);

  font-size:1rem;
}

.sales-locked-id-head > span{
  min-width:43px;

  padding:
    7px 10px;

  text-align:center;

  color:
    var(--sl-cyan);

  font-size:.48rem;
  font-weight:900;

  border:
    1px solid
    rgba(66,226,255,.23);

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

  box-shadow:
    inset 0 0 14px
    rgba(67,231,255,.025);
}

.sales-locked-title{
  margin-top:20px;

  padding:
    15px 0 20px;

  overflow-wrap:anywhere;

  color:#9eb5bf;

  font-size:.65rem;

  line-height:1.45;

  border-bottom:
    1px solid
    rgba(70,220,255,.08);
}

.sales-locked-policy{
  display:grid;

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

.sales-locked-policy > div{
  min-width:0;

  padding:
    18px 0;
}

.sales-locked-policy > div:nth-child(odd){
  padding-right:18px;

  border-right:
    1px solid
    rgba(69,219,255,.07);
}

.sales-locked-policy > div:nth-child(even){
  padding-left:18px;
}

.sales-locked-policy > div:nth-child(-n+2){
  border-bottom:
    1px solid
    rgba(69,219,255,.07);
}

.sales-locked-policy small{
  display:flex;

  align-items:center;

  gap:7px;

  color:#607a87;

  font-size:.38rem;
  font-weight:900;

  letter-spacing:.09em;
}

.sales-locked-policy small i{
  width:6px;
  height:6px;

  border:
    1px solid
    var(--sl-cyan);

  transform:
    rotate(45deg);

  opacity:.72;
}

.sales-locked-policy strong{
  display:block;

  margin-top:8px;

  overflow-wrap:anywhere;

  color:#dbeaf0;

  font-size:.58rem;

  line-height:1.4;
}


/* ============================================================
   MASTER PROGRESS AREA
   ============================================================ */

.sales-locked-progress{
  min-width:0;

  padding:
    24px 26px 30px;
}

.sales-locked-kpis{
  display:grid;

  grid-template-columns:
    1.18fr .82fr;

  gap:12px;
}

.sales-locked-kpi{
  min-width:0;

  padding:
    16px 17px;

  border:
    1px solid
    rgba(73,222,255,.09);

  background:
    rgba(4,16,24,.56);
}

.sales-locked-kpi small{
  display:block;

  color:#607d8a;

  font-size:.41rem;
  font-weight:900;

  letter-spacing:.11em;
}

.sales-locked-kpi strong{
  display:block;

  margin-top:8px;

  color:
    var(--sl-text);

  font-size:1.3rem;

  line-height:1;

  letter-spacing:-.035em;
}

.sales-locked-kpi strong em{
  margin-left:4px;

  color:
    var(--sl-cyan);

  font-size:.46rem;

  font-style:normal;

  letter-spacing:.06em;
}

.sales-locked-kpi > span{
  display:block;

  margin-top:9px;

  color:#667f8b;

  font-size:.42rem;

  letter-spacing:.06em;
}

.sales-locked-kpi > span b{
  margin-left:5px;

  color:#a9c0c9;
}

.sales-locked-kpi.next{
  border-color:
    rgba(155,92,255,.18);

  background:
    linear-gradient(
      145deg,
      rgba(97,60,184,.055),
      rgba(4,16,24,.56)
    );
}


/* ============================================================
   ONE MASTER PROGRESS BAR
   ============================================================ */

.sales-locked-master{
  position:relative;

  height:170px;

  margin-top:23px;

  padding-top:54px;
}

.sales-locked-current{
  position:absolute;

  top:4px;

  transform:
    translateX(-50%);

  z-index:8;

  transition:
    left .9s
    cubic-bezier(.22,.75,.18,1);
}

.sales-locked-current span{
  display:block;

  min-width:44px;

  padding:
    6px 8px;

  text-align:center;

  color:#effdff;

  font-size:.48rem;
  font-weight:900;

  border:
    1px solid
    rgba(75,229,255,.38);

  background:#071722;

  box-shadow:
    0 0 14px
    rgba(67,231,255,.16);
}

.sales-locked-current i{
  display:block;

  width:1px;
  height:19px;

  margin:auto;

  background:
    linear-gradient(
      var(--sl-cyan),
      transparent
    );
}

.sales-locked-track{
  position:relative;

  height:7px;

  margin:
    0 1px;

  border-radius:100px;

  background:
    rgba(71,211,255,.09);

  box-shadow:
    inset 0 0 9px
    rgba(0,0,0,.65);
}

.sales-locked-fill{
  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:
    clamp(
      0%,
      var(--locked-progress,0%),
      100%
    );

  border-radius:100px;

  background:
    linear-gradient(
      90deg,
      var(--sl-cyan) 0%,
      var(--sl-blue) 57%,
      var(--sl-violet) 100%
    );

  box-shadow:
    0 0 13px
    rgba(61,194,255,.37);

  transition:
    width .9s
    cubic-bezier(.22,.75,.18,1);
}

.sales-locked-current-dot{
  position:absolute;

  top:50%;

  left:
    clamp(
      0%,
      var(--locked-progress,0%),
      100%
    );

  width:14px;
  height:14px;

  transform:
    translate(-50%,-50%);

  border:
    2px solid white;

  border-radius:50%;

  background:
    var(--sl-cyan);

  box-shadow:
    0 0 0 5px
    rgba(65,227,255,.08),
    0 0 17px
    rgba(65,227,255,.62);

  animation:
    salesLockedCurrentPulse
    2.4s ease-in-out infinite;
}

@keyframes salesLockedCurrentPulse{
  0%,100%{
    box-shadow:
      0 0 0 4px
      rgba(65,227,255,.06),
      0 0 12px
      rgba(65,227,255,.40);
  }

  50%{
    box-shadow:
      0 0 0 8px
      rgba(65,227,255,.02),
      0 0 21px
      rgba(65,227,255,.72);
  }
}


/* ============================================================
   MILESTONE MARKERS
   ============================================================ */

.sales-locked-milestones{
  position:absolute;

  left:0;
  right:0;

  top:48px;
  bottom:0;
}

.sales-locked-milestone{
  position:absolute;

  top:0;

  width:96px;

  transform:
    translateX(-50%);

  text-align:center;
}

.sales-locked-node{
  position:relative;

  width:22px;
  height:22px;

  display:grid;

  place-items:center;

  margin:
    0 auto;

  border:
    1px solid
    rgba(92,221,255,.25);

  border-radius:50%;

  color:#708793;

  background:#07141e;

  box-shadow:
    0 0 0 5px
    rgba(4,15,23,.96);
}

.sales-locked-node span{
  font-size:.40rem;
  font-weight:900;
}

.sales-locked-milestone.achieved
.sales-locked-node{
  color:#031016;

  border-color:
    var(--sl-cyan);

  background:
    var(--sl-cyan);

  box-shadow:
    0 0 0 5px
    rgba(4,15,23,.96),
    0 0 14px
    rgba(67,231,255,.32);
}

.sales-locked-milestone.next
.sales-locked-node{
  color:white;

  border-color:
    rgba(169,107,255,.75);

  background:
    radial-gradient(
      circle,
      rgba(153,88,255,.45),
      #07141e 72%
    );

  box-shadow:
    0 0 0 5px
    rgba(4,15,23,.96),
    0 0 16px
    rgba(155,92,255,.35);
}

.sales-locked-milestone.next
.sales-locked-node::after{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:30px;
  height:30px;

  transform:
    translate(-50%,-50%);

  border:
    1px solid
    rgba(167,101,255,.25);

  border-radius:50%;

  animation:
    salesLockedTargetPulse
    2.1s ease-out infinite;
}

@keyframes salesLockedTargetPulse{
  0%{
    transform:
      translate(-50%,-50%)
      scale(.72);

    opacity:.75;
  }

  100%{
    transform:
      translate(-50%,-50%)
      scale(1.45);

    opacity:0;
  }
}

.sales-locked-node-copy{
  margin-top:11px;
}

.sales-locked-node-copy small{
  display:block;

  color:#607a87;

  font-size:.37rem;
  font-weight:900;

  letter-spacing:.08em;
}

.sales-locked-node-copy strong{
  display:block;

  margin-top:5px;

  color:#d8e7ed;

  font-size:.58rem;
}

.sales-locked-node-copy em{
  display:block;

  margin-top:2px;

  color:#65818e;

  font-size:.33rem;

  font-style:normal;

  letter-spacing:.08em;
}

.sales-locked-node-copy b{
  display:block;

  margin-top:6px;

  color:#657c87;

  font-size:.34rem;

  letter-spacing:.08em;
}

.sales-locked-milestone.achieved
.sales-locked-node-copy b{
  color:
    var(--sl-green);
}

.sales-locked-milestone.next
.sales-locked-node-copy b{
  color:#ba91ff;
}


/* ============================================================
   TELEMETRY
   ============================================================ */

.sales-locked-telemetry{
  display:grid;

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

  border-top:
    1px solid
    rgba(66,222,255,.09);

  background:
    rgba(2,10,16,.42);
}

.sales-locked-telemetry > div{
  min-width:0;

  padding:
    13px 15px;

  border-right:
    1px solid
    rgba(66,222,255,.06);
}

.sales-locked-telemetry > div:last-child{
  border-right:0;
}

.sales-locked-telemetry small{
  display:block;

  color:#536d79;

  font-size:.33rem;
  font-weight:900;

  letter-spacing:.09em;
}

.sales-locked-telemetry strong{
  display:block;

  margin-top:5px;

  overflow:hidden;

  color:#9eb6c0;

  font-size:.40rem;

  text-overflow:ellipsis;

  white-space:nowrap;
}


/* ============================================================
   EMPTY / NOT LOADED
   ============================================================ */

.sales-locked-program-placeholder{
  padding:30px;

  border:
    1px solid
    rgba(63,220,255,.10);

  background:
    rgba(3,14,21,.5);
}

.sales-locked-program-placeholder small{
  color:#627c88;
}

.sales-locked-program-placeholder strong{
  display:block;

  margin-top:6px;

  color:#cedee4;
}

.sales-locked-program-placeholder p{
  color:#647d89;
}


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

@media(max-width:1100px){

  .sales-locked-hero{
    grid-template-columns:
      1fr 300px;
  }

  .sales-locked-summary{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .sales-locked-program-grid{
    grid-template-columns:1fr;
  }

  .sales-locked-identity{
    border-right:0;

    border-bottom:
      1px solid
      rgba(75,220,255,.09);
  }

  .sales-locked-telemetry{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }
}


@media(max-width:760px){

  .sales-locked-hero{
    grid-template-columns:1fr;

    padding:
      22px 15px;
  }

  .sales-locked-hero-side{
    grid-template-columns:
      1fr 130px;
  }

  .sales-locked-chain-core{
    width:120px;
    height:120px;
  }

  .sales-locked-summary{
    grid-template-columns:1fr;
  }

  .sales-locked-program-panel
  .neo-panel-inner{
    padding:
      15px !important;
  }

  .sales-locked-program-head{
    display:grid;
  }

  .sales-locked-identity,
  .sales-locked-progress{
    padding:
      18px 15px;
  }

  .sales-locked-policy{
    grid-template-columns:1fr;
  }

  .sales-locked-policy > div{
    padding:
      14px 0 !important;

    border-right:
      0 !important;

    border-bottom:
      1px solid
      rgba(69,219,255,.07);
  }

  .sales-locked-kpis{
    grid-template-columns:1fr;
  }

  .sales-locked-master{
    height:auto;

    padding:
      50px 0 0;
  }

  .sales-locked-milestones{
    position:relative;

    top:auto;
    left:auto;
    right:auto;
    bottom:auto;

    display:grid;

    gap:10px;

    margin-top:22px;
  }

  .sales-locked-milestone{
    position:relative;

    left:auto !important;
    top:auto;

    width:auto;

    transform:none;

    display:grid;

    grid-template-columns:
      28px
      minmax(0,1fr);

    gap:12px;

    align-items:center;

    text-align:left;
  }

  .sales-locked-node{
    margin:0;
  }

  .sales-locked-node-copy{
    margin:0;

    display:grid;

    grid-template-columns:
      34px
      1fr
      auto;

    align-items:center;

    gap:8px;
  }

  .sales-locked-node-copy em{
    display:none;
  }

  .sales-locked-node-copy b{
    margin:0;
  }

  .sales-locked-telemetry{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }
}


@media(prefers-reduced-motion:reduce){

  .sales-locked-chain-core,
  .sales-locked-chain-core .orbit-a,
  .sales-locked-chain-core .orbit-b,
  .sales-locked-current-dot,
  .sales-locked-milestone.next
  .sales-locked-node::after{
    animation:none !important;
  }

  .sales-locked-fill,
  .sales-locked-current{
    transition:none;
  }
}

/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V3 PRECISION
   Presentation only.
   ============================================================ */

.sales-locked-program-grid{
  grid-template-columns:
    minmax(330px,.82fr)
    minmax(560px,1.18fr);
}

.sales-locked-identity{
  padding:27px 25px;
}

.sales-locked-progress{
  padding:27px 34px 32px;
}


/* KPI */

.sales-locked-kpis{
  grid-template-columns:
    minmax(0,1.22fr)
    minmax(210px,.78fr);

  gap:15px;
}

.sales-locked-kpi{
  min-height:88px;
  padding:18px 20px;
}

.sales-locked-kpi strong{
  font-size:1.48rem;
}

.sales-locked-kpi.next strong{
  color:#f4f8fb;
}

.sales-locked-kpi.next small{
  color:#a58bdf;
}


/* MASTER TERMINAL */

.sales-locked-master{
  height:205px;
  margin-top:26px;
  padding:66px 24px 0;
}

.sales-locked-track{
  height:8px;
  margin:0;

  overflow:visible;

  background:
    linear-gradient(
      90deg,
      rgba(48,203,255,.08),
      rgba(100,128,163,.10)
    );

  box-shadow:
    inset 0 0 10px rgba(0,0,0,.72),
    0 0 18px rgba(34,193,255,.025);
}

.sales-locked-track::before{
  content:"";

  position:absolute;
  left:0;
  right:0;
  top:50%;

  height:1px;

  transform:translateY(-50%);

  pointer-events:none;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 49px,
      rgba(85,213,255,.06) 50px
    );
}


/* CURRENT POSITION */

.sales-locked-current{
  top:5px;
  z-index:20;
}

.sales-locked-current span{
  position:relative;

  min-width:58px;

  padding:7px 9px 6px;

  border:
    1px solid rgba(70,231,255,.48);

  border-radius:2px;

  color:#f5fdff;

  background:
    linear-gradient(
      180deg,
      rgba(8,33,46,.98),
      rgba(4,16,24,.98)
    );

  box-shadow:
    0 0 18px rgba(67,231,255,.14),
    inset 0 0 14px rgba(67,231,255,.035);
}

.sales-locked-current span::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:-5px;

  width:8px;
  height:8px;

  transform:
    translateX(-50%)
    rotate(45deg);

  border-right:
    1px solid rgba(70,231,255,.48);

  border-bottom:
    1px solid rgba(70,231,255,.48);

  background:#061923;
}

.sales-locked-current span b{
  display:block;

  margin-top:2px;

  color:#6fdff4;

  font-size:.31rem;
  font-weight:800;

  letter-spacing:.04em;
}

.sales-locked-current i{
  height:23px;
  opacity:.65;
}

.sales-locked-current-dot{
  width:15px;
  height:15px;

  z-index:12;

  background:#eafcff;

  border:
    3px solid var(--sl-cyan);

  box-shadow:
    0 0 0 5px rgba(67,231,255,.08),
    0 0 19px rgba(67,231,255,.75);
}


/* MILESTONES */

.sales-locked-milestones{
  top:60px;
  left:24px;
  right:24px;
}

.sales-locked-milestone{
  width:126px;
  z-index:8;
}

.sales-locked-node{
  width:25px;
  height:25px;

  border-width:1px;

  box-shadow:
    0 0 0 6px rgba(4,15,23,.97);
}

.sales-locked-node-copy{
  margin-top:13px;
}

.sales-locked-node-copy small{
  color:#77909c;

  font-size:.40rem;

  letter-spacing:.11em;
}

.sales-locked-node-copy strong{
  margin-top:6px;

  color:#e3f0f4;

  font-size:.68rem;

  letter-spacing:-.01em;
}

.sales-locked-node-copy em{
  margin-top:3px;

  color:#5f7f8e;

  font-size:.35rem;
}

.sales-locked-node-copy b{
  margin-top:7px;

  font-size:.37rem;
  font-weight:900;
}


/* ACHIEVED */

.sales-locked-milestone.achieved
.sales-locked-node{
  color:#031116;

  background:
    radial-gradient(
      circle,
      #bff8ff 0%,
      var(--sl-cyan) 55%,
      #17bfe4 100%
    );

  box-shadow:
    0 0 0 6px rgba(4,15,23,.97),
    0 0 18px rgba(67,231,255,.36);
}

.sales-locked-milestone.achieved
.sales-locked-node-copy strong{
  color:#8eefff;
}

.sales-locked-milestone.achieved
.sales-locked-node-copy b{
  color:#44edb4;
}


/* NEXT */

.sales-locked-milestone.next{
  z-index:12;
}

.sales-locked-milestone.next
.sales-locked-node{
  width:29px;
  height:29px;

  margin-top:-2px;

  border-color:
    rgba(182,111,255,.88);

  background:
    radial-gradient(
      circle,
      rgba(189,120,255,.54),
      rgba(111,72,225,.25) 43%,
      #07141e 75%
    );

  box-shadow:
    0 0 0 6px rgba(4,15,23,.97),
    0 0 22px rgba(155,92,255,.48);
}

.sales-locked-milestone.next
.sales-locked-node-copy small,
.sales-locked-milestone.next
.sales-locked-node-copy strong,
.sales-locked-milestone.next
.sales-locked-node-copy b{
  color:#c99cff;
}


/* UPCOMING */

.sales-locked-milestone.upcoming
.sales-locked-node{
  opacity:.78;

  background:
    rgba(5,19,28,.95);
}

.sales-locked-milestone.upcoming
.sales-locked-node-copy{
  opacity:.68;
}


/* TELEMETRY */

.sales-locked-telemetry > div{
  min-height:55px;
  padding:14px 17px;
}

.sales-locked-telemetry small{
  font-size:.36rem;

  letter-spacing:.10em;
}

.sales-locked-telemetry strong{
  margin-top:6px;

  color:#b3c8d0;

  font-size:.44rem;
}


/* PROGRAM IDENTITY */

.sales-locked-id-head strong{
  font-size:1.08rem;
}

.sales-locked-id-head > span{
  padding:8px 11px;

  color:#6cecff;

  border-color:
    rgba(67,231,255,.34);

  box-shadow:
    inset 0 0 14px rgba(67,231,255,.04),
    0 0 12px rgba(67,231,255,.04);
}

.sales-locked-title{
  color:#b2c6ce;
  font-size:.69rem;
}


/* TABLET */

@media(max-width:1100px){

  .sales-locked-program-grid{
    grid-template-columns:1fr;
  }

  .sales-locked-progress{
    padding:24px 24px 30px;
  }

}


/* MOBILE */

@media(max-width:760px){

  .sales-locked-progress{
    padding:18px 15px 24px;
  }

  .sales-locked-master{
    height:auto;

    padding:55px 0 0;
  }

  .sales-locked-milestones{
    left:auto;
    right:auto;
    top:auto;
  }

  .sales-locked-milestone{
    width:auto;
  }

}

/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V4 REFERENCE MATCH
   CSS ONLY
   ============================================================ */

/* HERO */

.sales-locked-hero{
  min-height:190px;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:30px;
  padding:28px 34px 20px;
  margin-bottom:14px;
  border-bottom:0;

  background:
    radial-gradient(
      ellipse at 88% 50%,
      rgba(11,118,190,.16),
      transparent 29%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(21,174,228,.045),
      transparent 35%
    );
}

.sales-locked-hero::after{
  opacity:.13;
  background-size:38px 38px;
}

.sales-locked-hero-copy{
  align-self:center;
}

.sales-locked-hero .panel-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:#52e7ff;
  font-size:.49rem;
  font-weight:900;
  letter-spacing:.11em;
}

.sales-locked-hero .panel-kicker::before{
  content:"";
  width:18px;
  height:1px;
  display:block;
  background:#53e9ff;
  box-shadow:0 0 8px rgba(83,233,255,.65);
}

.sales-locked-hero h1{
  margin:0 0 10px;
  font-size:clamp(2.35rem,4.3vw,4rem);
  line-height:.95;
  letter-spacing:-.052em;
}

.sales-locked-hero h1 em{
  background:linear-gradient(90deg,#37dcff,#5ae9ff);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  text-shadow:none;
}

.sales-locked-hero p{
  max-width:610px;
  color:#8ca3b1;
  font-size:.68rem;
  line-height:1.65;
}


/* HERO SIDE */

.sales-locked-hero-side{
  min-height:150px;
  grid-template-columns:170px 180px;
  justify-content:end;
  gap:12px;
}

.sales-locked-data-mode{
  position:relative;
  padding:15px 17px;

  border:
    1px solid rgba(53,211,255,.14);

  background:
    linear-gradient(
      145deg,
      rgba(4,20,31,.74),
      rgba(3,14,23,.44)
    );

  box-shadow:
    inset 0 0 28px rgba(31,170,222,.022);
}

.sales-locked-data-mode small{
  margin-bottom:8px;
  color:#6f8997;
  font-size:.42rem;
}

.sales-locked-data-mode strong{
  color:#ffc94c;
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.06em;
}


/* BLOCKCHAIN CORE */

.sales-locked-chain-core{
  width:170px;
  height:150px;
  transform-style:preserve-3d;

  animation:
    salesLockedFloat
    5.5s ease-in-out infinite;
}

.sales-locked-chain-core::before,
.sales-locked-chain-core::after{
  content:"";

  position:absolute;

  left:50%;

  width:96px;
  height:46px;

  transform:
    translateX(-50%)
    rotateX(62deg)
    rotateZ(45deg);

  border:
    1px solid rgba(43,203,255,.40);

  background:
    linear-gradient(
      135deg,
      rgba(4,45,77,.34),
      rgba(3,15,26,.12)
    );

  box-shadow:
    0 0 15px rgba(28,178,236,.13);
}

.sales-locked-chain-core::before{
  top:73px;
}

.sales-locked-chain-core::after{
  top:88px;
  width:118px;
  height:54px;
  opacity:.55;
}

.sales-locked-chain-core .core{
  width:45px;
  height:45px;
  top:39%;

  border-color:
    rgba(89,229,255,.90);

  background:
    linear-gradient(
      145deg,
      rgba(21,175,227,.38),
      rgba(24,93,163,.13)
    );

  box-shadow:
    0 0 24px rgba(28,207,255,.34),
    inset 0 0 17px rgba(91,235,255,.18);
}

.sales-locked-chain-core .core::before,
.sales-locked-chain-core .core::after{
  content:"";
  position:absolute;
  border:1px solid rgba(85,229,255,.46);
}

.sales-locked-chain-core .core::before{
  inset:7px;
}

.sales-locked-chain-core .core::after{
  inset:13px;
}

.sales-locked-chain-core .orbit{
  border-color:rgba(61,211,255,.11);
}

.sales-locked-chain-core .orbit-a{
  width:130px;
  height:58px;
  top:58%;
  animation:salesLockedSpin 23s linear infinite;
}

.sales-locked-chain-core .orbit-b{
  width:150px;
  height:72px;
  top:58%;
  opacity:.55;
  animation:salesLockedSpinReverse 28s linear infinite;
}

.sales-locked-chain-core .node{
  width:7px;
  height:7px;
  opacity:.75;
}

.sales-locked-chain-core .link{
  opacity:.44;
}


/* SUMMARY */

.sales-locked-summary{
  gap:14px;
  margin:0 0 18px;
}

.sales-locked-stat{
  min-height:146px;
  padding:16px 17px 14px;
  border-radius:5px;

  border-color:
    rgba(56,204,246,.14);

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(21,169,223,.055),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(5,24,36,.88),
      rgba(3,15,24,.94)
    );
}

.sales-locked-stat-icon{
  width:43px;
  height:43px;
  flex:0 0 43px;

  border-color:
    rgba(42,210,255,.30);

  background:
    radial-gradient(
      circle,
      rgba(25,202,253,.10),
      rgba(3,17,28,.25)
    );
}

.sales-locked-stat-icon span{
  width:14px;
  height:14px;

  border-color:
    rgba(55,226,255,.83);

  box-shadow:
    0 0 11px rgba(37,210,255,.27);
}

.sales-locked-stat-head small{
  font-size:.45rem;
  color:#8299a6;
}

.sales-locked-stat-head strong{
  margin-top:5px;
  color:#d3e5ec;
  font-size:.55rem;
}

.sales-locked-stat-value{
  margin:13px 0 0 56px;
  font-size:1.82rem;
}

.sales-locked-stat p{
  min-height:23px;
  margin:8px 0 12px 56px;
  color:#8095a0;
  font-size:.48rem;
}

.sales-locked-stat-rail{
  height:1px;
  margin-left:56px;
}


/* PROGRAM PANEL */

.sales-locked-program-panel .neo-panel-inner{
  padding:18px 20px 14px !important;
}

.sales-locked-program-head{
  gap:24px;
  margin-bottom:15px;
}

.sales-locked-program-head .section-title{
  margin:6px 0 4px;
  font-size:1.17rem;
}

.sales-locked-program-head .section-copy{
  max-width:700px;
  font-size:.59rem;
  line-height:1.55;
}

.sales-locked-program-grid{
  grid-template-columns:
    minmax(360px,.94fr)
    minmax(500px,1.06fr);
}

.sales-locked-program{
  border-radius:5px;

  border-color:
    rgba(58,207,247,.16);

  background:
    radial-gradient(
      ellipse at 75% 22%,
      rgba(18,128,193,.07),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(4,22,33,.97),
      rgba(2,13,21,.98)
    );
}


/* LEFT IDENTITY */

.sales-locked-identity{
  padding:19px 21px 17px;
}

.sales-locked-id-head small{
  font-size:.39rem;
}

.sales-locked-id-head strong{
  margin-top:5px;
  font-size:.83rem;
}

.sales-locked-id-head > span{
  min-width:38px;
  padding:6px 8px;
  font-size:.46rem;
}

.sales-locked-title{
  margin-top:13px;
  padding:10px 0 14px;
  font-size:.62rem;
}

.sales-locked-policy > div{
  padding:13px 0;
}

.sales-locked-policy > div:nth-child(odd){
  padding-right:16px;
}

.sales-locked-policy > div:nth-child(even){
  padding-left:16px;
}

.sales-locked-policy small{
  font-size:.35rem;
}

.sales-locked-policy strong{
  margin-top:6px;
  font-size:.54rem;
}


/* KPI + PROGRESS */

.sales-locked-progress{
  padding:18px 23px 13px;
}

.sales-locked-kpis{
  grid-template-columns:
    minmax(0,1.32fr)
    minmax(190px,.68fr);

  gap:12px;
}

.sales-locked-kpi{
  min-height:76px;
  padding:13px 15px;
}

.sales-locked-kpi small{
  font-size:.37rem;
}

.sales-locked-kpi strong{
  margin-top:7px;
  font-size:1.33rem;
}

.sales-locked-kpi > span{
  margin-top:7px;
  font-size:.38rem;
}

.sales-locked-kpi.next{
  border-color:
    rgba(255,198,72,.14);

  background:
    linear-gradient(
      145deg,
      rgba(87,55,9,.055),
      rgba(4,16,24,.55)
    );
}

.sales-locked-kpi.next small,
.sales-locked-kpi.next strong{
  color:#ffc84e;
}


/* MASTER BAR */

.sales-locked-master{
  height:160px;
  margin-top:12px;
  padding:47px 19px 0;
}

.sales-locked-track{
  height:10px;
  margin:0;
  border-radius:100px;

  background:
    rgba(74,119,146,.22);
}

.sales-locked-fill{
  background:
    linear-gradient(
      90deg,
      #3ce6fa 0%,
      #419dff 60%,
      #985cff 100%
    );

  box-shadow:
    0 0 16px rgba(53,202,255,.28);
}

.sales-locked-current{
  top:0;
}

.sales-locked-current span{
  min-width:48px;
  padding:5px 7px 4px;
  font-size:.44rem;
}

.sales-locked-current span b{
  font-size:.27rem;
}

.sales-locked-current i{
  height:17px;
}

.sales-locked-current-dot{
  width:17px;
  height:17px;
  border-width:3px;
}


/* MILESTONE POINTS */

.sales-locked-milestones{
  top:41px;
  left:19px;
  right:19px;
}

.sales-locked-milestone{
  width:104px;
}

.sales-locked-node{
  width:23px;
  height:23px;

  box-shadow:
    0 0 0 5px rgba(3,15,23,.98);
}

.sales-locked-milestone.next .sales-locked-node{
  width:27px;
  height:27px;
}

.sales-locked-node-copy{
  margin-top:9px;
}

.sales-locked-node-copy small{
  font-size:.37rem;
}

.sales-locked-node-copy strong{
  margin-top:4px;
  font-size:.61rem;
}

.sales-locked-node-copy em{
  margin-top:1px;
  font-size:.30rem;
}

.sales-locked-node-copy b{
  margin-top:4px;
  font-size:.32rem;
}


/* TELEMETRY */

.sales-locked-telemetry{
  grid-template-columns:
    .95fr
    .90fr
    .90fr
    .90fr
    .90fr
    1.45fr;

  min-height:50px;

  background:
    rgba(2,13,20,.60);
}

.sales-locked-telemetry > div{
  min-height:50px;
  padding:11px 13px;
}

.sales-locked-telemetry small{
  font-size:.31rem;
}

.sales-locked-telemetry strong{
  margin-top:5px;
  font-size:.38rem;
}


/* TABLET */

@media(max-width:1100px){

  .sales-locked-hero{
    grid-template-columns:
      minmax(0,1fr)
      310px;
  }

  .sales-locked-hero-side{
    grid-template-columns:
      145px 150px;
  }

  .sales-locked-program-grid{
    grid-template-columns:1fr;
  }

}


/* MOBILE */

@media(max-width:760px){

  .sales-locked-hero{
    min-height:auto;
    padding:22px 15px;
    grid-template-columns:1fr;
  }

  .sales-locked-hero-side{
    grid-template-columns:
      1fr 130px;
  }

  .sales-locked-summary{
    grid-template-columns:1fr;
  }

  .sales-locked-stat-value,
  .sales-locked-stat p,
  .sales-locked-stat-rail{
    margin-left:0;
  }

  .sales-locked-progress{
    padding:16px 14px 20px;
  }

  .sales-locked-master{
    height:auto;
    padding:46px 0 0;
  }

  .sales-locked-telemetry{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}

/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V5 FINAL MATCH

   STRUCTURAL VISUAL MATCH ONLY.
   Canonical runtime/data remains source of truth.
   ============================================================ */


/* ============================================================
   HERO — FINAL SCALE / DENSITY
   ============================================================ */

.sales-locked-hero{
  min-height:168px;

  grid-template-columns:
    minmax(0,1fr)
    410px;

  gap:32px;

  padding:
    22px 34px 16px;

  margin-bottom:10px;
}

.sales-locked-hero h1{
  max-width:720px;

  font-size:
    clamp(
      2.15rem,
      3.55vw,
      3.35rem
    );

  letter-spacing:-.047em;
}

.sales-locked-hero p{
  max-width:600px;

  font-size:.66rem;

  line-height:1.62;
}

.sales-locked-hero-side{
  min-height:142px;

  grid-template-columns:
    170px 210px;

  gap:12px;
}


/* DATA MODE */

.sales-locked-data-mode{
  align-self:center;

  padding:
    15px 17px;

  border-color:
    rgba(53,211,255,.18);

  box-shadow:
    inset 0 0 28px rgba(31,170,222,.025),
    0 0 28px rgba(12,106,164,.025);
}


/* ============================================================
   TRUE STACKED BLOCKCHAIN VISUAL
   ============================================================ */

.sales-locked-chain-core{
  position:relative;

  width:205px;
  height:150px;

  overflow:visible;

  justify-self:end;

  perspective:420px;

  filter:
    drop-shadow(
      0 0 18px
      rgba(23,180,243,.11)
    );
}

.sales-locked-chain-core::before,
.sales-locked-chain-core::after{
  display:none !important;
}

.sales-chain-halo{
  position:absolute;

  left:50%;
  top:56%;

  border:
    1px solid
    rgba(46,196,255,.10);

  border-radius:50%;

  transform:
    translate(-50%,-50%)
    rotateX(66deg);
}

.sales-chain-halo.halo-a{
  width:184px;
  height:88px;

  animation:
    salesLockedV5Halo
    12s linear infinite;
}

.sales-chain-halo.halo-b{
  width:138px;
  height:62px;

  border-color:
    rgba(72,220,255,.14);

  animation:
    salesLockedV5HaloReverse
    9s linear infinite;
}


.sales-chain-platform{
  position:absolute;

  left:50%;

  width:118px;
  height:54px;

  transform:
    translateX(-50%)
    rotateX(64deg)
    rotateZ(45deg);

  border:
    1px solid
    rgba(37,199,255,.43);

  background:
    linear-gradient(
      135deg,
      rgba(12,82,129,.16),
      rgba(3,19,31,.08)
    );

  box-shadow:
    0 0 12px rgba(36,199,255,.09),
    inset 0 0 14px rgba(61,219,255,.025);
}

.sales-chain-platform.platform-4{
  top:92px;

  width:142px;
  height:64px;

  opacity:.32;
}

.sales-chain-platform.platform-3{
  top:82px;

  width:132px;
  height:60px;

  opacity:.48;
}

.sales-chain-platform.platform-2{
  top:72px;

  width:122px;
  height:56px;

  opacity:.68;
}

.sales-chain-platform.platform-1{
  top:62px;

  width:112px;
  height:52px;

  border-color:
    rgba(55,220,255,.78);

  opacity:.96;

  box-shadow:
    0 0 16px rgba(40,207,255,.22),
    inset 0 0 17px rgba(49,215,255,.05);
}


.sales-chain-column{
  position:absolute;

  left:50%;
  top:43px;

  width:2px;
  height:55px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      #72efff,
      rgba(42,198,255,.14),
      transparent
    );

  box-shadow:
    0 0 10px rgba(59,225,255,.48);
}


.sales-chain-cube{
  position:absolute;

  left:50%;

  display:block;

  transform:
    translateX(-50%)
    rotate(30deg)
    skewY(-5deg);

  border:
    1px solid
    rgba(72,226,255,.78);

  background:
    linear-gradient(
      135deg,
      rgba(17,102,164,.28),
      rgba(2,24,42,.07)
    );

  box-shadow:
    0 0 17px rgba(46,218,255,.16),
    inset 0 0 14px rgba(74,226,255,.07);
}

.sales-chain-cube::before,
.sales-chain-cube::after{
  content:"";

  position:absolute;

  border:
    1px solid
    rgba(66,218,255,.40);
}

.sales-chain-cube::before{
  inset:6px;
}

.sales-chain-cube::after{
  inset:12px;
}

.sales-chain-cube i{
  position:absolute;

  left:50%;
  top:50%;

  width:7px;
  height:7px;

  transform:
    translate(-50%,-50%);

  background:#c7fbff;

  box-shadow:
    0 0 11px #55e7ff,
    0 0 23px rgba(49,210,255,.65);
}

.sales-chain-cube.cube-outer{
  top:11px;

  width:69px;
  height:69px;

  animation:
    salesLockedV5CubeFloat
    4.5s ease-in-out infinite;
}

.sales-chain-cube.cube-middle{
  top:22px;

  width:49px;
  height:49px;

  opacity:.78;
}

.sales-chain-cube.cube-inner{
  top:32px;

  width:29px;
  height:29px;

  background:
    rgba(27,183,240,.18);
}


.sales-chain-core-light{
  position:absolute;

  left:50%;
  top:48px;

  width:10px;
  height:10px;

  transform:
    translate(-50%,-50%);

  border-radius:50%;

  background:#d5fdff;

  box-shadow:
    0 0 8px #50e7ff,
    0 0 20px #27c8ff,
    0 0 38px rgba(38,185,255,.72);

  animation:
    salesLockedV5CorePulse
    2.3s ease-in-out infinite;
}


.sales-chain-orbit{
  position:absolute;

  left:50%;
  top:72%;

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

  border-radius:50%;

  transform:
    translate(-50%,-50%)
    rotateX(69deg);
}

.sales-chain-orbit.orbit-a{
  width:178px;
  height:82px;
}

.sales-chain-orbit.orbit-b{
  width:138px;
  height:58px;

  border-color:
    rgba(76,225,255,.18);
}


@keyframes salesLockedV5CorePulse{
  0%,100%{
    opacity:.72;

    transform:
      translate(-50%,-50%)
      scale(.88);
  }

  50%{
    opacity:1;

    transform:
      translate(-50%,-50%)
      scale(1.18);
  }
}

@keyframes salesLockedV5CubeFloat{
  0%,100%{
    transform:
      translateX(-50%)
      rotate(30deg)
      skewY(-5deg)
      translateY(0);
  }

  50%{
    transform:
      translateX(-50%)
      rotate(30deg)
      skewY(-5deg)
      translateY(-4px);
  }
}

@keyframes salesLockedV5Halo{
  to{
    transform:
      translate(-50%,-50%)
      rotateX(66deg)
      rotateZ(360deg);
  }
}

@keyframes salesLockedV5HaloReverse{
  to{
    transform:
      translate(-50%,-50%)
      rotateX(66deg)
      rotateZ(-360deg);
  }
}


/* ============================================================
   SUMMARY CARDS — LOCKED REFERENCE
   ============================================================ */

.sales-locked-summary{
  gap:12px;

  margin-bottom:14px;
}

.sales-locked-stat{
  min-height:132px;

  padding:
    15px 17px 13px;
}

.sales-locked-stat-top{
  align-items:center;
}

.sales-locked-stat-icon{
  width:42px;
  height:42px;

  flex:
    0 0 42px;

  display:grid;

  place-items:center;
}

.sales-locked-stat-icon span{
  display:none !important;
}

.sales-locked-svg-icon{
  width:25px;
  height:25px;

  fill:none;

  stroke:#36ddff;

  stroke-width:1.55;

  stroke-linecap:round;
  stroke-linejoin:round;

  filter:
    drop-shadow(
      0 0 4px
      rgba(54,221,255,.28)
    );
}

.sales-locked-stat-icon.layers
.sales-locked-svg-icon{
  fill:rgba(54,221,255,.06);
}

.sales-locked-stat-head small{
  font-size:.43rem;
}

.sales-locked-stat-head strong{
  margin-top:4px;

  font-size:.54rem;
}

.sales-locked-stat-value{
  margin:
    11px 0 0
    55px;

  font-size:1.72rem;
}

.sales-locked-stat p{
  min-height:auto;

  margin:
    6px 0 8px
    55px;

  font-size:.47rem;

  line-height:1.35;
}

.sales-locked-stat-rail{
  margin-left:55px;
}


/* ============================================================
   PROGRAM HEADER
   ============================================================ */

.sales-locked-program-panel
.neo-panel-inner{
  padding:
    16px 20px 13px !important;
}

.sales-locked-program-head{
  margin-bottom:12px;
}

.sales-locked-program-head
.section-title{
  text-transform:uppercase;

  margin-top:5px;

  font-size:1.08rem;

  letter-spacing:.008em;
}

.sales-locked-program-head
.section-copy{
  font-size:.56rem;
}


/* ============================================================
   MAIN PROGRAM MATRIX
   ============================================================ */

.sales-locked-program-grid{
  grid-template-columns:
    minmax(350px,.88fr)
    minmax(520px,1.12fr);
}

.sales-locked-identity{
  padding:
    18px 20px 15px;
}

.sales-locked-id-head strong{
  font-size:.88rem;
}

.sales-locked-id-head > span{
  min-width:42px;

  font-size:.48rem;
}

.sales-locked-title{
  margin-top:12px;

  padding:
    10px 0 13px;

  color:#e2eef3;

  font-size:.69rem;
  font-weight:700;
}

.sales-locked-policy{
  position:relative;
}

.sales-locked-policy > div{
  min-height:58px;

  padding:
    12px 0;
}


/* policy icon primitives */

.sales-locked-policy small i{
  position:relative;

  width:14px;
  height:14px;

  flex:
    0 0 14px;

  border:
    1px solid
    rgba(66,222,255,.55);

  transform:none;

  opacity:.85;
}

.sales-locked-policy > div:nth-child(1)
small i{
  border-radius:50%;
}

.sales-locked-policy > div:nth-child(1)
small i::before{
  content:"";

  position:absolute;

  inset:3px;

  border:
    1px solid
    rgba(66,222,255,.75);

  border-radius:50%;
}

.sales-locked-policy > div:nth-child(2)
small i{
  transform:
    rotate(30deg);

  border-radius:2px;
}

.sales-locked-policy > div:nth-child(3)
small i{
  transform:
    rotate(45deg);

  border-radius:1px;
}

.sales-locked-policy > div:nth-child(4)
small i{
  border-radius:50% 50% 3px 3px;
}

.sales-locked-policy strong{
  margin-top:5px;

  font-size:.56rem;
}


/* ============================================================
   KPI CARDS
   ============================================================ */

.sales-locked-progress{
  padding:
    17px 22px 11px;
}

.sales-locked-kpis{
  max-width:100%;

  grid-template-columns:
    minmax(0,1.38fr)
    minmax(190px,.62fr);

  gap:12px;
}

.sales-locked-kpi{
  min-height:82px;

  padding:
    14px 16px;
}

.sales-locked-kpi small{
  font-size:.39rem;
}

.sales-locked-kpi strong{
  margin-top:7px;

  font-size:1.47rem;
}

.sales-locked-kpi strong em{
  font-size:.44rem;
}

.sales-locked-kpi > span{
  margin-top:7px;

  font-size:.39rem;
}


/* ============================================================
   MASTER RAIL — STRONGER REFERENCE MATCH
   ============================================================ */

.sales-locked-master{
  height:151px;

  margin-top:10px;

  padding:
    45px 18px 0;
}

.sales-locked-track{
  height:12px;

  overflow:visible;

  background:
    linear-gradient(
      90deg,
      rgba(55,227,249,.13),
      rgba(64,105,137,.25)
    );

  box-shadow:
    inset 0 0 10px rgba(0,0,0,.65),
    0 0 15px rgba(45,203,255,.045);
}

.sales-locked-fill{
  box-shadow:
    0 0 10px rgba(54,222,255,.38),
    0 0 21px rgba(51,154,255,.12);
}

.sales-locked-current{
  top:-4px;
}

.sales-locked-current span{
  min-width:50px;

  padding:
    5px 8px 4px;

  font-size:.48rem;

  border-color:
    rgba(61,225,255,.58);

  box-shadow:
    0 0 13px rgba(52,218,255,.19);
}

.sales-locked-current span b{
  margin-top:1px;

  font-size:.28rem;
}

.sales-locked-current i{
  height:18px;
}

.sales-locked-current-dot{
  width:19px;
  height:19px;

  border:
    4px solid
    #3de2ff;

  background:#f3feff;

  box-shadow:
    0 0 0 5px rgba(61,226,255,.08),
    0 0 19px rgba(61,226,255,.72);
}


/* milestone vertical guides */

.sales-locked-milestone::before{
  content:"";

  position:absolute;

  left:50%;
  top:-9px;

  width:1px;
  height:20px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      rgba(65,216,255,.35),
      rgba(65,216,255,.03)
    );
}

.sales-locked-milestones{
  top:37px;

  left:18px;
  right:18px;
}

.sales-locked-milestone{
  width:112px;
}

.sales-locked-node{
  width:25px;
  height:25px;
}

.sales-locked-milestone.next
.sales-locked-node{
  width:29px;
  height:29px;
}

.sales-locked-node-copy{
  margin-top:8px;
}

.sales-locked-node-copy small{
  font-size:.39rem;
}

.sales-locked-node-copy strong{
  margin-top:4px;

  font-size:.65rem;
}

.sales-locked-node-copy em{
  font-size:.31rem;
}

.sales-locked-node-copy b{
  margin-top:4px;

  font-size:.34rem;
}


/* ============================================================
   TELEMETRY — FIVE PRIMARY CELLS
   ============================================================ */

.sales-locked-telemetry-v5{
  grid-template-columns:
    .9fr
    .82fr
    .86fr
    1.15fr
    1.47fr;

  min-height:58px;
}

.sales-locked-telemetry-v5
.sales-telemetry-cell{
  min-width:0;

  display:flex;

  align-items:center;

  gap:10px;

  min-height:58px;

  padding:
    10px 13px;

  border-right:
    1px solid
    rgba(66,222,255,.07);
}

.sales-locked-telemetry-v5
.sales-telemetry-cell:last-child{
  border-right:0;
}

.sales-telemetry-cell > div{
  min-width:0;
}

.sales-telemetry-icon{
  position:relative;

  width:31px;
  height:31px;

  flex:
    0 0 31px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(55,210,255,.15);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(42,197,248,.065),
      rgba(2,16,25,.25)
    );
}

.sales-telemetry-icon i{
  display:block;

  width:11px;
  height:11px;

  border:
    1px solid
    rgba(72,222,255,.67);
}

.sales-telemetry-cell.status
.sales-telemetry-icon i{
  border-radius:50%;

  border-color:#53eaa8;

  box-shadow:
    0 0 7px rgba(65,235,163,.20);
}

.sales-telemetry-cell.version
.sales-telemetry-icon i{
  transform:rotate(45deg);
}

.sales-telemetry-cell.source
.sales-telemetry-icon i{
  border-radius:2px;
}

.sales-telemetry-cell.account
.sales-telemetry-icon i{
  border-radius:50% 50% 3px 3px;
}

.sales-telemetry-cell.module
.sales-telemetry-icon i{
  transform:rotate(30deg);
}

.sales-telemetry-cell small{
  display:block;

  color:#607985;

  font-size:.32rem;
  font-weight:900;

  letter-spacing:.09em;
}

.sales-telemetry-cell strong{
  display:block;

  margin-top:4px;

  overflow:hidden;

  color:#b8cbd3;

  font-size:.42rem;
  font-weight:800;

  text-overflow:ellipsis;

  white-space:nowrap;
}

.sales-telemetry-cell.status
strong{
  color:#53eaa8;
}

.sales-telemetry-cell em{
  display:block;

  margin-top:3px;

  color:#607c88;

  font-size:.28rem;
  font-style:normal;

  letter-spacing:.04em;
}


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

@media(max-width:1100px){

  .sales-locked-hero{
    grid-template-columns:
      minmax(0,1fr)
      330px;
  }

  .sales-locked-hero-side{
    grid-template-columns:
      135px
      185px;
  }

  .sales-locked-chain-core{
    width:180px;
  }

  .sales-locked-program-grid{
    grid-template-columns:1fr;
  }

  .sales-locked-telemetry-v5{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .sales-telemetry-cell.module{
    grid-column:
      1 / -1;
  }

}


@media(max-width:760px){

  .sales-locked-hero{
    grid-template-columns:1fr;

    padding:
      19px 15px;
  }

  .sales-locked-hero-side{
    grid-template-columns:
      1fr
      150px;
  }

  .sales-locked-chain-core{
    width:150px;

    transform:
      scale(.82);

    transform-origin:center;
  }

  .sales-locked-stat-value,
  .sales-locked-stat p,
  .sales-locked-stat-rail{
    margin-left:0;
  }

  .sales-locked-telemetry-v5{
    grid-template-columns:1fr;
  }

  .sales-telemetry-cell.module{
    grid-column:auto;
  }

}


@media(prefers-reduced-motion:reduce){

  .sales-chain-halo,
  .sales-chain-cube,
  .sales-chain-core-light{
    animation:none !important;
  }

}

/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V6 READABILITY

   Typography + icon-system refinement only.
   Canonical data/runtime untouched.
   ============================================================ */


/* ============================================================
   GLOBAL SALES INCENTIVE TEXT RENDERING
   ============================================================ */

.sales-locked-hero,
.sales-locked-summary,
.sales-locked-program-panel{
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}


/* ============================================================
   HERO — MICROTEXT READABILITY
   ============================================================ */

.sales-locked-hero .panel-kicker{
  font-size:.58rem;
  letter-spacing:.105em;
}

.sales-locked-hero p{
  max-width:660px;

  color:#9aafba;

  font-size:.75rem;
  line-height:1.58;
}

.sales-locked-data-mode{
  min-width:180px;
}

.sales-locked-data-mode small{
  color:#7895a4;

  font-size:.50rem;
  letter-spacing:.11em;
}

.sales-locked-data-mode strong{
  font-size:.64rem;
  letter-spacing:.055em;
}


/* ============================================================
   TOP FOUR CARDS — SIZE / VISUAL HIERARCHY
   ============================================================ */

.sales-locked-stat{
  min-height:148px;

  padding:
    17px 19px
    15px;
}

.sales-locked-stat-top{
  gap:15px;
}


/* ICON CONTAINER */

.sales-locked-stat-icon{
  position:relative;

  width:48px;
  height:48px;

  flex:
    0 0 48px;

  border:
    1px solid
    rgba(48,218,255,.37);

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(35,200,255,.14),
      rgba(3,23,35,.55) 62%,
      rgba(2,14,22,.9) 100%
    );

  box-shadow:
    inset 0 0 18px rgba(40,208,255,.055),
    0 0 15px rgba(27,174,222,.045);
}


/* glow ring */

.sales-locked-stat-icon::before{
  content:"";

  position:absolute;

  inset:5px;

  border:
    1px solid
    rgba(48,220,255,.075);

  border-radius:50%;

  pointer-events:none;
}


/* ============================================================
   TOP FOUR SVG ICONS — FORCE VISIBILITY
   ============================================================ */

.sales-locked-stat-icon
.sales-locked-svg-icon{
  position:relative;
  z-index:3;

  display:block !important;

  width:31px !important;
  height:31px !important;

  overflow:visible;

  opacity:1 !important;

  fill:none;

  stroke:#4BE7FF !important;
  stroke-width:2.15 !important;
  stroke-linecap:round;
  stroke-linejoin:round;

  filter:
    drop-shadow(
      0 0 3px
      rgba(59,226,255,.60)
    )
    drop-shadow(
      0 0 8px
      rgba(25,177,229,.17)
    );
}

.sales-locked-stat-icon
.sales-locked-svg-icon path,
.sales-locked-stat-icon
.sales-locked-svg-icon circle,
.sales-locked-stat-icon
.sales-locked-svg-icon line,
.sales-locked-stat-icon
.sales-locked-svg-icon polyline,
.sales-locked-stat-icon
.sales-locked-svg-icon polygon{
  stroke:#4BE7FF !important;

  vector-effect:
    non-scaling-stroke;
}


/* STACK / LIFETIME */

.sales-locked-stat-icon.layers
.sales-locked-svg-icon{
  fill:
    rgba(55,220,255,.055);
}


/* REVIEW */

.sales-locked-stat-icon.review{
  border-color:
    rgba(51,223,255,.44);
}


/* APPROVED */

.sales-locked-stat-icon.shield
.sales-locked-svg-icon{
  stroke:#5DEBFF !important;
}


/* FULFILLED */

.sales-locked-stat-icon.award{
  border-color:
    rgba(77,224,255,.40);
}


/* ============================================================
   TOP CARD TYPOGRAPHY
   ============================================================ */

.sales-locked-stat-head small{
  color:#8ca5b1;

  font-size:.52rem;
  font-weight:800;

  letter-spacing:.075em;
}

.sales-locked-stat-head strong{
  margin-top:5px;

  color:#d9e8ee;

  font-size:.66rem;
  font-weight:800;

  letter-spacing:.035em;
}

.sales-locked-stat-value{
  margin:
    13px 0 0
    63px;

  color:#f2fbff;

  font-size:2.08rem;
  line-height:1;

  font-weight:800;
}

.sales-locked-stat p{
  margin:
    8px 0 11px
    63px;

  color:#8da1ab;

  font-size:.57rem;
  line-height:1.42;
}

.sales-locked-stat-rail{
  margin-left:63px;

  background:
    rgba(56,211,255,.095);
}

.sales-locked-stat-rail i{
  width:40%;

  background:
    linear-gradient(
      90deg,
      #49e7fb,
      rgba(73,231,251,.10)
    );

  box-shadow:
    0 0 7px rgba(62,220,248,.31);
}


/* ============================================================
   PROGRAM HEADER
   ============================================================ */

.sales-locked-program-head .panel-kicker{
  font-size:.55rem;
  letter-spacing:.10em;
}

.sales-locked-program-head
.section-title{
  font-size:1.36rem;
  line-height:1.1;

  letter-spacing:.004em;
}

.sales-locked-program-head
.section-copy{
  margin-top:7px;

  color:#91a7b2;

  font-size:.66rem;
  line-height:1.48;
}

.sales-locked-program-head
.source-badge{
  padding:
    8px 11px;

  color:#7698a7;

  font-size:.43rem;
}


/* ============================================================
   PROGRAM IDENTITY — LEFT
   ============================================================ */

.sales-locked-id-head small{
  color:#7895a3;

  font-size:.47rem;
  letter-spacing:.11em;
}

.sales-locked-id-head strong{
  margin-top:6px;

  color:#eef9fc;

  font-size:1.05rem;
  line-height:1;
}

.sales-locked-id-head > span{
  min-width:46px;

  padding:
    7px 10px;

  color:#63ecff;

  font-size:.57rem;
  font-weight:900;
}

.sales-locked-title{
  margin-top:15px;

  padding:
    12px 0 15px;

  color:#d9e8ee;

  font-size:.76rem;
  font-weight:700;

  line-height:1.35;
}


/* ============================================================
   LOWER-LEFT POLICY GRID
   ============================================================ */

.sales-locked-policy > div{
  min-height:70px;

  padding:
    14px 0;
}

.sales-locked-policy small{
  gap:9px;

  color:#829da9;

  font-size:.46rem;
  font-weight:800;

  letter-spacing:.075em;
}

.sales-locked-policy strong{
  margin-top:8px;

  color:#e1edf2;

  font-size:.67rem;
  font-weight:800;

  line-height:1.3;
}


/* ============================================================
   POLICY ICON FOUNDATION
   ============================================================ */

.sales-locked-policy small i{
  position:relative;

  width:21px !important;
  height:21px !important;

  flex:
    0 0 21px !important;

  border:
    0 !important;

  border-radius:0;

  opacity:1 !important;

  transform:none !important;

  background:none;

  filter:
    drop-shadow(
      0 0 4px
      rgba(48,216,255,.25)
    );
}


/* ============================================================
   POLICY ICON 1 — METRIC / TARGET
   ============================================================ */

.sales-locked-policy
> div:nth-child(1)
small i{
  border:
    1.5px solid
    #42ddf7 !important;

  border-radius:50% !important;
}

.sales-locked-policy
> div:nth-child(1)
small i::before{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:8px;
  height:8px;

  transform:
    translate(-50%,-50%);

  border:
    1.5px solid
    #42ddf7;

  border-radius:50%;
}

.sales-locked-policy
> div:nth-child(1)
small i::after{
  content:"";

  position:absolute;

  left:50%;
  top:-3px;

  width:1px;
  height:27px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      transparent,
      #42ddf7 22%,
      #42ddf7 78%,
      transparent
    );
}


/* ============================================================
   POLICY ICON 2 — METRIC PACKAGE / STACKED BLOCKS
   ============================================================ */

.sales-locked-policy
> div:nth-child(2)
small i::before,
.sales-locked-policy
> div:nth-child(2)
small i::after{
  content:"";

  position:absolute;

  left:50%;

  width:14px;
  height:8px;

  transform:
    translateX(-50%)
    rotate(30deg)
    skewX(-12deg);

  border:
    1.4px solid
    #48e1f9;

  background:
    rgba(45,208,246,.035);
}

.sales-locked-policy
> div:nth-child(2)
small i::before{
  top:2px;
}

.sales-locked-policy
> div:nth-child(2)
small i::after{
  top:10px;

  opacity:.72;
}


/* ============================================================
   POLICY ICON 3 — REQUIRED PACKAGE / CUBE
   ============================================================ */

.sales-locked-policy
> div:nth-child(3)
small i::before{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:14px;
  height:14px;

  transform:
    translate(-50%,-50%)
    rotate(45deg);

  border:
    1.5px solid
    #49e1f8;

  background:
    rgba(41,202,244,.04);
}

.sales-locked-policy
> div:nth-child(3)
small i::after{
  content:"";

  position:absolute;

  left:50%;
  top:50%;

  width:7px;
  height:7px;

  transform:
    translate(-50%,-50%)
    rotate(45deg);

  border:
    1px solid
    rgba(73,225,248,.65);
}


/* ============================================================
   POLICY ICON 4 — MIN RANK / USER
   ============================================================ */

.sales-locked-policy
> div:nth-child(4)
small i::before{
  content:"";

  position:absolute;

  left:50%;
  top:1px;

  width:8px;
  height:8px;

  transform:
    translateX(-50%);

  border:
    1.5px solid
    #49e1f8;

  border-radius:50%;
}

.sales-locked-policy
> div:nth-child(4)
small i::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:1px;

  width:16px;
  height:8px;

  transform:
    translateX(-50%);

  border:
    1.5px solid
    #49e1f8;

  border-bottom:0;

  border-radius:
    10px 10px 0 0;
}


/* ============================================================
   KPI CARDS
   ============================================================ */

.sales-locked-kpi{
  min-height:94px;

  padding:
    16px 18px;
}

.sales-locked-kpi small{
  color:#809ca8;

  font-size:.48rem;
  font-weight:800;

  letter-spacing:.09em;
}

.sales-locked-kpi strong{
  margin-top:8px;

  color:#f2fbff;

  font-size:1.85rem;
  font-weight:800;
}

.sales-locked-kpi strong em{
  margin-left:5px;

  font-size:.58rem;
}

.sales-locked-kpi > span{
  margin-top:9px;

  color:#7c939e;

  font-size:.48rem;
}

.sales-locked-kpi > span b{
  color:#c4d6de;

  font-size:.50rem;
}

.sales-locked-kpi.next small{
  color:#ffc94f;
}

.sales-locked-kpi.next strong{
  color:#ffc94f;
}


/* ============================================================
   CURRENT PROGRESS TOOLTIP
   ============================================================ */

.sales-locked-current span{
  min-width:58px;

  padding:
    6px 9px 5px;

  font-size:.56rem;
}

.sales-locked-current span b{
  margin-top:2px;

  font-size:.36rem;
}


/* ============================================================
   MILESTONE RAIL TYPOGRAPHY
   ============================================================ */

.sales-locked-node{
  width:29px;
  height:29px;
}

.sales-locked-node span{
  font-size:.50rem;
}

.sales-locked-milestone.next
.sales-locked-node{
  width:33px;
  height:33px;
}

.sales-locked-node-copy{
  margin-top:10px;
}

.sales-locked-node-copy small{
  color:#8da5b0;

  font-size:.47rem;
  font-weight:900;

  letter-spacing:.09em;
}

.sales-locked-node-copy strong{
  margin-top:5px;

  color:#e6f3f7;

  font-size:.78rem;
  font-weight:800;
}

.sales-locked-node-copy em{
  margin-top:2px;

  color:#718b97;

  font-size:.40rem;
}

.sales-locked-node-copy b{
  margin-top:5px;

  font-size:.43rem;
  font-weight:900;
}


/* state emphasis */

.sales-locked-milestone.achieved
.sales-locked-node-copy strong{
  color:#57e9ff;
}

.sales-locked-milestone.achieved
.sales-locked-node-copy b{
  color:#4df0ac;
}

.sales-locked-milestone.next
.sales-locked-node-copy small,
.sales-locked-milestone.next
.sales-locked-node-copy strong,
.sales-locked-milestone.next
.sales-locked-node-copy b{
  color:#c891ff;
}

.sales-locked-milestone.upcoming
.sales-locked-node-copy{
  opacity:.82;
}


/* ============================================================
   FIVE-CELL TELEMETRY — READABLE
   ============================================================ */

.sales-locked-telemetry-v5{
  min-height:72px;
}

.sales-locked-telemetry-v5
.sales-telemetry-cell{
  min-height:72px;

  gap:12px;

  padding:
    12px 16px;
}

.sales-telemetry-icon{
  width:38px;
  height:38px;

  flex:
    0 0 38px;

  border-color:
    rgba(56,216,255,.24);

  background:
    radial-gradient(
      circle,
      rgba(47,207,251,.10),
      rgba(3,18,28,.30)
    );
}

.sales-telemetry-icon i{
  width:14px;
  height:14px;

  border-width:1.5px;

  border-color:
    rgba(79,229,255,.85);
}

.sales-telemetry-cell small{
  color:#7e98a4;

  font-size:.43rem;
  font-weight:900;

  letter-spacing:.08em;
}

.sales-telemetry-cell strong{
  margin-top:5px;

  color:#c5d7df;

  font-size:.56rem;
  font-weight:800;
}

.sales-telemetry-cell.status strong{
  color:#54efa7;
}

.sales-telemetry-cell em{
  margin-top:4px;

  color:#7f98a3;

  font-size:.38rem;
  font-weight:700;
}


/* ============================================================
   GENERAL DETAIL VISIBILITY
   ============================================================ */

.sales-locked-program{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    inset 0 0 50px rgba(19,140,193,.018);
}

.sales-locked-identity{
  border-right-color:
    rgba(75,220,255,.13);
}

.sales-locked-policy > div:nth-child(-n+2){
  border-bottom-color:
    rgba(69,219,255,.11);
}

.sales-locked-policy > div:nth-child(odd){
  border-right-color:
    rgba(69,219,255,.10);
}


/* ============================================================
   RESPONSIVE — PRESERVE READABILITY
   ============================================================ */

@media(max-width:1100px){

  .sales-locked-stat-head small{
    font-size:.49rem;
  }

  .sales-locked-stat-head strong{
    font-size:.62rem;
  }

  .sales-locked-kpi strong{
    font-size:1.65rem;
  }

  .sales-locked-node-copy strong{
    font-size:.72rem;
  }

}


@media(max-width:760px){

  .sales-locked-stat{
    min-height:140px;
  }

  .sales-locked-stat-value,
  .sales-locked-stat p,
  .sales-locked-stat-rail{
    margin-left:0;
  }

  .sales-locked-policy > div{
    min-height:auto;
  }

  .sales-locked-kpi strong{
    font-size:1.45rem;
  }

  .sales-locked-node-copy strong{
    font-size:.68rem;
  }

  .sales-locked-telemetry-v5
  .sales-telemetry-cell{
    min-height:62px;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  .sales-locked-stat-icon,
  .sales-telemetry-icon{
    transition:none !important;
  }

}


/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V7 PRECISION

   Final visual micro-tuning only.
   Canonical runtime / milestone state untouched.
   ============================================================ */


/* ============================================================
   HERO — COMPACT TO LOCKED REFERENCE
   ============================================================ */

.sales-locked-hero{
  min-height:148px;

  grid-template-columns:
    minmax(0,1fr)
    400px;

  gap:28px;

  padding:
    18px 34px
    12px;

  margin-bottom:8px;
}

.sales-locked-hero .panel-kicker{
  margin-bottom:9px;

  font-size:.55rem;
}

.sales-locked-hero h1{
  max-width:670px;

  margin-bottom:8px;

  font-size:
    clamp(
      2rem,
      3.05vw,
      2.95rem
    );

  line-height:.96;

  letter-spacing:-.044em;
}

.sales-locked-hero p{
  max-width:630px;

  font-size:.72rem;

  line-height:1.52;
}

.sales-locked-hero-side{
  min-height:128px;

  grid-template-columns:
    168px
    205px;
}


/* ============================================================
   DATA MODE
   ============================================================ */

.sales-locked-data-mode{
  min-width:168px;

  padding:
    13px 15px;
}

.sales-locked-data-mode small{
  font-size:.48rem;
}

.sales-locked-data-mode strong{
  font-size:.62rem;
}


/* ============================================================
   BLOCKCHAIN CORE — STRONGER ISOMETRIC DEPTH
   ============================================================ */

.sales-locked-chain-core{
  width:205px;
  height:135px;

  perspective:560px;

  filter:
    drop-shadow(
      0 0 22px
      rgba(29,197,255,.14)
    );
}


/* STACKED PLATFORMS */

.sales-chain-platform{
  transform:
    translateX(-50%)
    rotateX(67deg)
    rotateZ(45deg);

  border-color:
    rgba(46,211,255,.54);
}

.sales-chain-platform.platform-4{
  top:82px;

  width:150px;
  height:66px;

  opacity:.30;
}

.sales-chain-platform.platform-3{
  top:73px;

  width:140px;
  height:61px;

  opacity:.47;
}

.sales-chain-platform.platform-2{
  top:64px;

  width:129px;
  height:57px;

  opacity:.68;
}

.sales-chain-platform.platform-1{
  top:55px;

  width:118px;
  height:53px;

  opacity:1;

  box-shadow:
    0 0 18px rgba(36,207,255,.27),
    inset 0 0 18px rgba(70,230,255,.07);
}


/* CENTRAL COLUMN */

.sales-chain-column{
  top:35px;

  height:55px;

  opacity:.82;
}


/* ============================================================
   TOP CUBE
   Less diamond-like, more dimensional.
   ============================================================ */

.sales-chain-cube{
  transform:
    translateX(-50%)
    rotateX(58deg)
    rotateZ(45deg);

  background:
    linear-gradient(
      135deg,
      rgba(31,156,214,.30),
      rgba(4,29,49,.12)
    );

  border-color:
    rgba(72,229,255,.86);

  box-shadow:
    0 0 19px rgba(44,215,255,.21),
    inset 0 0 19px rgba(74,229,255,.10);
}

.sales-chain-cube.cube-outer{
  top:4px;

  width:72px;
  height:72px;
}

.sales-chain-cube.cube-middle{
  top:16px;

  width:50px;
  height:50px;

  opacity:.86;
}

.sales-chain-cube.cube-inner{
  top:27px;

  width:29px;
  height:29px;

  opacity:.95;
}

.sales-chain-cube::before{
  inset:7px;

  border-color:
    rgba(77,229,255,.56);
}

.sales-chain-cube::after{
  inset:14px;

  border-color:
    rgba(77,229,255,.34);
}


/* CORE */

.sales-chain-core-light{
  top:40px;

  width:12px;
  height:12px;

  box-shadow:
    0 0 9px #66efff,
    0 0 23px #2bd2ff,
    0 0 44px rgba(36,188,255,.78);
}


/* ORBITS */

.sales-chain-halo.halo-a{
  width:188px;
  height:80px;
}

.sales-chain-halo.halo-b{
  width:146px;
  height:58px;
}

.sales-chain-orbit.orbit-a{
  width:185px;
  height:74px;
}

.sales-chain-orbit.orbit-b{
  width:145px;
  height:53px;
}


/* ============================================================
   SUMMARY CARDS — REDUCE EMPTY SPACE
   ============================================================ */

.sales-locked-summary{
  gap:12px;

  margin-bottom:12px;
}

.sales-locked-stat{
  min-height:126px;

  padding:
    14px 17px
    12px;
}

.sales-locked-stat-top{
  gap:13px;
}

.sales-locked-stat-icon{
  width:45px;
  height:45px;

  flex:
    0 0 45px;

  border-color:
    rgba(54,216,255,.26);

  box-shadow:
    inset 0 0 16px rgba(40,208,255,.035),
    0 0 11px rgba(27,174,222,.025);
}

.sales-locked-stat-icon::before{
  inset:6px;

  opacity:.56;
}

.sales-locked-stat-icon
.sales-locked-svg-icon{
  width:30px !important;
  height:30px !important;

  stroke-width:2.05 !important;

  filter:
    drop-shadow(
      0 0 3px
      rgba(59,226,255,.44)
    );
}


/* summary typography */

.sales-locked-stat-head small{
  font-size:.55rem;
}

.sales-locked-stat-head strong{
  font-size:.67rem;
}

.sales-locked-stat-value{
  margin:
    9px 0 0
    58px;

  font-size:1.88rem;
}

.sales-locked-stat p{
  margin:
    5px 0 7px
    58px;

  font-size:.59rem;
}

.sales-locked-stat-rail{
  margin-left:58px;
}


/* ============================================================
   PROGRAM HEADER
   ============================================================ */

.sales-locked-program-panel
.neo-panel-inner{
  padding:
    15px 20px
    12px !important;
}

.sales-locked-program-head{
  margin-bottom:11px;
}

.sales-locked-program-head .panel-kicker{
  font-size:.56rem;
}

.sales-locked-program-head
.section-title{
  font-size:1.30rem;
}

.sales-locked-program-head
.section-copy{
  font-size:.64rem;
}


/* ============================================================
   PROGRAM IDENTITY
   ============================================================ */

.sales-locked-identity{
  padding:
    17px 20px
    14px;
}

.sales-locked-id-head strong{
  font-size:1.08rem;
}

.sales-locked-id-head > span{
  padding:
    7px 11px;

  font-size:.59rem;
}

.sales-locked-title{
  margin-top:13px;

  padding:
    11px 0 14px;

  color:#e7f1f5;

  font-size:.91rem;
  font-weight:800;
}


/* ============================================================
   POLICY GRID
   ============================================================ */

.sales-locked-policy > div{
  min-height:66px;

  padding:
    13px 0;
}

.sales-locked-policy small{
  gap:9px;

  font-size:.47rem;
}

.sales-locked-policy strong{
  margin-top:7px;

  font-size:.74rem;
}


/* normalize policy icon optical size */

.sales-locked-policy small i{
  width:22px !important;
  height:22px !important;

  flex:
    0 0 22px !important;

  filter:
    drop-shadow(
      0 0 3px
      rgba(48,216,255,.18)
    );
}


/* ============================================================
   KPI BLOCKS
   ============================================================ */

.sales-locked-kpi{
  min-height:88px;

  padding:
    15px 17px;
}

.sales-locked-kpi small{
  font-size:.49rem;
}

.sales-locked-kpi strong{
  margin-top:7px;

  font-size:1.72rem;
}

.sales-locked-kpi > span{
  margin-top:8px;

  color:#91a7b1;

  font-size:.53rem;
}

.sales-locked-kpi > span b{
  color:#d0dee4;

  font-size:.54rem;
}


/* ============================================================
   MASTER PROGRESS RAIL
   ============================================================ */

.sales-locked-master{
  height:157px;

  margin-top:8px;

  padding:
    47px 17px
    0;
}

.sales-locked-track{
  height:14px;

  background:
    linear-gradient(
      90deg,
      rgba(52,217,249,.18),
      rgba(65,110,143,.27)
    );

  box-shadow:
    inset 0 0 11px rgba(0,0,0,.63),
    0 0 18px rgba(43,205,255,.075);
}

.sales-locked-fill{
  background:
    linear-gradient(
      90deg,
      #40e9fa 0%,
      #39b9ff 46%,
      #866cff 78%,
      #a65eff 100%
    );

  box-shadow:
    0 0 11px rgba(54,224,255,.52),
    0 0 23px rgba(76,130,255,.18);
}


/* ============================================================
   CURRENT POSITION
   ============================================================ */

.sales-locked-current{
  top:-8px;
}

.sales-locked-current span{
  min-width:63px;

  padding:
    7px 10px
    6px;

  font-size:.64rem;
}

.sales-locked-current span b{
  margin-top:2px;

  font-size:.40rem;
}

.sales-locked-current i{
  height:20px;
}

.sales-locked-current-dot{
  width:21px;
  height:21px;

  border-width:4px;

  box-shadow:
    0 0 0 6px rgba(61,226,255,.10),
    0 0 22px rgba(61,226,255,.86);
}


/* ============================================================
   MILESTONE NODES
   ============================================================ */

.sales-locked-milestones{
  top:39px;
}

.sales-locked-milestone::before{
  top:-12px;

  height:24px;
}

.sales-locked-node{
  width:30px;
  height:30px;
}

.sales-locked-milestone.next
.sales-locked-node{
  width:34px;
  height:34px;
}

.sales-locked-node span{
  font-size:.52rem;
}

.sales-locked-node-copy{
  margin-top:10px;
}

.sales-locked-node-copy small{
  font-size:.51rem;
}

.sales-locked-node-copy strong{
  margin-top:5px;

  font-size:.85rem;
}

.sales-locked-node-copy em{
  margin-top:2px;

  font-size:.43rem;
}

.sales-locked-node-copy b{
  margin-top:5px;

  font-size:.47rem;
}


/* ============================================================
   TELEMETRY
   ============================================================ */

.sales-locked-telemetry-v5{
  min-height:70px;
}

.sales-locked-telemetry-v5
.sales-telemetry-cell{
  min-height:70px;

  gap:11px;

  padding:
    11px 15px;
}

.sales-telemetry-icon{
  width:36px;
  height:36px;

  flex:
    0 0 36px;
}

.sales-telemetry-icon i{
  width:15px;
  height:15px;
}

.sales-telemetry-cell small{
  font-size:.47rem;
}

.sales-telemetry-cell strong{
  margin-top:5px;

  font-size:.61rem;
}

.sales-telemetry-cell em{
  margin-top:4px;

  font-size:.41rem;
}


/* CONTRACT MODULE NEEDS EXTRA ROOM */

.sales-telemetry-cell.module strong{
  font-size:.57rem;

  overflow:visible;

  white-space:normal;

  line-height:1.25;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1100px){

  .sales-locked-hero{
    grid-template-columns:
      minmax(0,1fr)
      325px;
  }

  .sales-locked-hero h1{
    font-size:
      clamp(
        2rem,
        4vw,
        2.75rem
      );
  }

  .sales-locked-hero-side{
    grid-template-columns:
      135px
      180px;
  }

  .sales-locked-program-grid{
    grid-template-columns:1fr;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:760px){

  .sales-locked-hero{
    min-height:auto;

    padding:
      18px 15px;

    grid-template-columns:1fr;
  }

  .sales-locked-hero h1{
    font-size:
      clamp(
        2rem,
        10vw,
        2.7rem
      );
  }

  .sales-locked-hero-side{
    grid-template-columns:
      1fr
      145px;
  }

  .sales-locked-stat{
    min-height:132px;
  }

  .sales-locked-stat-value,
  .sales-locked-stat p,
  .sales-locked-stat-rail{
    margin-left:0;
  }

  .sales-locked-node-copy strong{
    font-size:.72rem;
  }

  .sales-locked-telemetry-v5
  .sales-telemetry-cell{
    min-height:62px;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  .sales-chain-platform,
  .sales-chain-cube,
  .sales-chain-core-light{
    animation:none !important;
  }

}


/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V8 SEMANTIC ICON SYSTEM
   ============================================================ */


/* ============================================================
   SHARED SEMANTIC SVG
   ============================================================ */

.sales-semantic-svg{
  display:block;

  width:100%;
  height:100%;

  overflow:visible;

  fill:none;

  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* ============================================================
   POLICY SEMANTIC ICONS
   ============================================================ */

.sales-locked-policy small{
  display:flex;

  align-items:center;

  gap:9px;
}


.sales-locked-policy
.sales-policy-semantic-icon{
  position:relative;

  display:inline-grid;

  width:25px;
  height:25px;

  flex:0 0 25px;

  place-items:center;

  color:#37dcff;
}


.sales-locked-policy
.sales-policy-semantic-icon::before{
  content:"";

  position:absolute;

  inset:-3px;

  border:
    1px solid
    rgba(45,215,255,.10);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(32,207,255,.07),
      transparent 68%
    );

  pointer-events:none;
}


.sales-locked-policy
.sales-policy-semantic-icon
.sales-semantic-svg{
  position:relative;

  z-index:1;

  width:21px;
  height:21px;

  filter:
    drop-shadow(
      0 0 4px
      rgba(43,216,255,.28)
    );
}


/* legacy primitive policy icons disabled */

.sales-locked-policy small > i{
  display:none !important;
}


.sales-locked-policy strong{
  margin-top:8px;

  color:#e5eff3;

  font-size:.79rem;
  font-weight:800;

  letter-spacing:.005em;
}


/* ============================================================
   TELEMETRY
   ============================================================ */

.sales-locked-telemetry-v5{
  min-height:76px;
}


.sales-locked-telemetry-v5
.sales-telemetry-cell{
  min-width:0;
  min-height:76px;

  padding:
    12px 16px;

  gap:12px;
}


.sales-locked-telemetry-v5
.sales-telemetry-icon{
  position:relative;

  display:grid;

  width:40px;
  height:40px;

  flex:0 0 40px;

  place-items:center;

  border:
    1px solid
    rgba(48,216,255,.20);

  border-radius:50%;

  color:#39dcff;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(27,196,235,.10),
      rgba(5,27,38,.16) 63%,
      transparent 73%
    );

  box-shadow:
    inset 0 0 14px
      rgba(38,213,255,.035),
    0 0 12px
      rgba(26,174,219,.035);
}


.sales-locked-telemetry-v5
.sales-telemetry-icon::before{
  content:"";

  position:absolute;

  inset:5px;

  border:
    1px solid
    rgba(50,219,255,.09);

  border-radius:50%;

  pointer-events:none;
}


.sales-locked-telemetry-v5
.sales-telemetry-icon
.sales-semantic-svg{
  position:relative;

  z-index:1;

  width:22px;
  height:22px;

  filter:
    drop-shadow(
      0 0 3px
      rgba(55,221,255,.34)
    );
}


/* legacy primitive telemetry icons disabled */

.sales-locked-telemetry-v5
.sales-telemetry-icon > i{
  display:none !important;
}


/* ============================================================
   TELEMETRY TYPOGRAPHY
   ============================================================ */

.sales-locked-telemetry-v5
.sales-telemetry-cell > div{
  min-width:0;
}


.sales-locked-telemetry-v5
.sales-telemetry-cell small{
  display:block;

  color:#8199a5;

  font-size:.50rem;
  font-weight:800;

  line-height:1.25;

  letter-spacing:.09em;
}


.sales-locked-telemetry-v5
.sales-telemetry-cell strong{
  display:block;

  margin-top:5px;

  color:#dce9ee;

  font-size:.63rem;
  font-weight:800;

  line-height:1.25;
}


.sales-locked-telemetry-v5
.sales-telemetry-cell.status strong{
  color:#4bf1a7;

  text-shadow:
    0 0 10px
    rgba(58,237,160,.12);
}


.sales-locked-telemetry-v5
.sales-telemetry-cell em{
  display:block;

  margin-top:4px;

  color:#7f9aa6;

  font-size:.43rem;
  font-style:normal;
  font-weight:700;

  line-height:1.25;

  letter-spacing:.045em;
}


.sales-locked-telemetry-v5
.sales-telemetry-cell.module strong{
  overflow:hidden;

  color:#c9d9df;

  font-size:.56rem;

  text-overflow:ellipsis;

  white-space:nowrap;
}


/* ============================================================
   TELEMETRY STATE ACCENTS
   ============================================================ */

.sales-locked-telemetry-v5
.sales-telemetry-cell.status
.sales-telemetry-icon{
  color:#46edb0;

  border-color:
    rgba(70,237,176,.23);

  background:
    radial-gradient(
      circle,
      rgba(51,224,164,.09),
      rgba(5,28,32,.14) 68%
    );
}


.sales-locked-telemetry-v5
.sales-telemetry-cell.version
.sales-telemetry-icon{
  color:#42d9ff;
}


.sales-locked-telemetry-v5
.sales-telemetry-cell.source
.sales-telemetry-icon{
  color:#44e5ff;
}


.sales-locked-telemetry-v5
.sales-telemetry-cell.account
.sales-telemetry-icon{
  color:#52ddff;
}


.sales-locked-telemetry-v5
.sales-telemetry-cell.module
.sales-telemetry-icon{
  color:#41d8f4;
}


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

@media(max-width:760px){

  .sales-locked-policy
  .sales-policy-semantic-icon{
    width:22px;
    height:22px;

    flex-basis:22px;
  }


  .sales-locked-telemetry-v5
  .sales-telemetry-cell{
    min-height:68px;

    padding:
      11px 12px;
  }


  .sales-locked-telemetry-v5
  .sales-telemetry-icon{
    width:35px;
    height:35px;

    flex-basis:35px;
  }


  .sales-locked-telemetry-v5
  .sales-telemetry-icon
  .sales-semantic-svg{
    width:20px;
    height:20px;
  }

}


/* ============================================================
   END SALES INCENTIVE - LOCKED DESIGN V8 SEMANTIC ICON SYSTEM
   ============================================================ */


/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V9 PROGRESS RAIL

   Visual rail refinement only.
   Canonical milestone geometry and values remain untouched.
   ============================================================ */


/* ============================================================
   MASTER PROGRESS STAGE
   ============================================================ */

.sales-locked-master{
  position:relative;

  height:178px;

  margin-top:13px;

  padding:
    56px 18px
    0;

  overflow:visible;
}


/* subtle ambience behind rail */

.sales-locked-master::before{
  content:"";

  position:absolute;

  left:18px;
  right:18px;
  top:53px;

  height:19px;

  border-radius:999px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(38,206,255,.065),
      rgba(16,83,115,.020) 55%,
      transparent 76%
    );

  filter:blur(6px);

  pointer-events:none;
}


/* ============================================================
   CONTINUOUS RAIL
   ============================================================ */

.sales-locked-track{
  position:relative;

  height:10px;

  overflow:visible;

  border:
    1px solid
    rgba(69,188,223,.13);

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      rgba(16,69,91,.64) 0%,
      rgba(17,52,72,.66) 45%,
      rgba(16,40,59,.72) 100%
    );

  box-shadow:
    inset 0 1px 0
      rgba(133,225,255,.035),
    inset 0 0 8px
      rgba(0,0,0,.70),
    0 0 17px
      rgba(30,178,225,.055);
}


/* rail highlight */

.sales-locked-track::before{
  content:"";

  position:absolute;

  left:1px;
  right:1px;
  top:1px;

  height:1px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      rgba(115,236,255,.18),
      rgba(115,236,255,.045)
    );

  pointer-events:none;
}


/* ============================================================
   COMPLETED FILL
   ============================================================ */

.sales-locked-fill{
  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:
    var(--locked-progress);

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #42eef7 0%,
      #39d9ff 34%,
      #4ab9ff 66%,
      #856dff 100%
    );

  box-shadow:
    0 0 7px
      rgba(67,226,255,.70),
    0 0 16px
      rgba(53,178,255,.25);

  transition:
    width .7s
    cubic-bezier(.22,.8,.25,1);
}


.sales-locked-fill::after{
  content:"";

  position:absolute;

  inset:
    1px 3px;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(229,253,255,.32),
      transparent
    );

  opacity:.54;

  pointer-events:none;
}


/* ============================================================
   CURRENT POSITION
   ============================================================ */

.sales-locked-current{
  position:absolute;

  top:-2px;

  z-index:30;

  transform:
    translateX(-50%);

  transition:
    left .7s
    cubic-bezier(.22,.8,.25,1);
}


/* tooltip */

.sales-locked-current span{
  position:relative;

  display:flex;

  min-width:68px;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  padding:
    7px 11px
    6px;

  border:
    1px solid
    rgba(74,222,255,.42);

  border-radius:5px;

  color:#dffbff;

  background:
    linear-gradient(
      180deg,
      rgba(8,36,49,.97),
      rgba(4,19,29,.96)
    );

  box-shadow:
    inset 0 0 18px
      rgba(45,205,255,.045),
    0 0 14px
      rgba(45,210,255,.14);

  font-size:.70rem;
  font-weight:900;

  line-height:1;

  letter-spacing:-.015em;
}


.sales-locked-current span::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:-5px;

  width:8px;
  height:8px;

  transform:
    translateX(-50%)
    rotate(45deg);

  border-right:
    1px solid
    rgba(74,222,255,.38);

  border-bottom:
    1px solid
    rgba(74,222,255,.38);

  background:
    rgba(5,24,34,.98);
}


.sales-locked-current span b{
  display:block;

  margin-top:3px;

  color:#79aab8;

  font-size:.41rem;
  font-weight:800;

  letter-spacing:.02em;
}


/* tooltip connector */

.sales-locked-current > i{
  display:block;

  width:1px;
  height:23px;

  margin:
    5px auto 0;

  background:
    linear-gradient(
      rgba(74,226,255,.78),
      rgba(74,226,255,.18)
    );

  box-shadow:
    0 0 5px
    rgba(74,226,255,.38);
}


/* ============================================================
   CURRENT DOT
   ============================================================ */

.sales-locked-current-dot{
  position:absolute;

  left:
    var(--locked-progress);

  top:50%;

  z-index:22;

  width:18px;
  height:18px;

  transform:
    translate(-50%,-50%);

  border:
    4px solid
    #56e8ff;

  border-radius:50%;

  background:#eaffff;

  box-shadow:
    0 0 0 4px
      rgba(49,220,255,.105),
    0 0 13px
      rgba(64,225,255,.74),
    0 0 27px
      rgba(57,162,255,.22);

  transition:
    left .7s
    cubic-bezier(.22,.8,.25,1);
}


/* ============================================================
   MILESTONE LAYER
   ============================================================ */

.sales-locked-milestones{
  position:absolute;

  left:18px;
  right:18px;

  top:46px;

  bottom:auto;

  height:112px;

  pointer-events:none;
}


.sales-locked-milestone{
  position:absolute;

  top:0;

  width:128px;

  transform:
    translateX(-50%);

  text-align:center;

  pointer-events:auto;
}


/* milestone vertical stem */

.sales-locked-milestone::before{
  content:"";

  position:absolute;

  left:50%;
  top:-9px;

  width:1px;
  height:31px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      rgba(77,224,255,.25),
      rgba(77,224,255,.055)
    );

  pointer-events:none;
}


/* ============================================================
   BASE NODE
   ============================================================ */

.sales-locked-node{
  position:relative;

  z-index:12;

  display:grid;

  width:23px;
  height:23px;

  place-items:center;

  margin:
    0 auto;

  border:
    1px solid
    rgba(103,164,190,.48);

  border-radius:50%;

  color:#879aa5;

  background:
    radial-gradient(
      circle,
      #0a1a24,
      #06121b 75%
    );

  box-shadow:
    0 0 0 4px
      rgba(4,15,23,.96),
    inset 0 0 8px
      rgba(91,188,223,.045);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}


.sales-locked-node span{
  position:relative;

  z-index:2;

  font-size:.47rem;
  font-weight:900;

  line-height:1;
}


/* ============================================================
   ACHIEVED
   ============================================================ */

.sales-locked-milestone.achieved
.sales-locked-node{
  color:#031216;

  border-color:#6ceeff;

  background:
    radial-gradient(
      circle at 42% 35%,
      #ddfdff 0%,
      #72efff 30%,
      #35d9ef 67%,
      #16aeca 100%
    );

  box-shadow:
    0 0 0 4px
      rgba(4,15,23,.97),
    0 0 11px
      rgba(64,226,255,.52);
}


.sales-locked-milestone.achieved::before{
  background:
    linear-gradient(
      rgba(70,229,255,.55),
      rgba(70,229,255,.08)
    );
}


/* ============================================================
   NEXT
   ============================================================ */

.sales-locked-milestone.next{
  z-index:20;
}


.sales-locked-milestone.next
.sales-locked-node{
  width:29px;
  height:29px;

  margin-top:-3px;

  border:
    2px solid
    rgba(192,126,255,.96);

  color:#f8efff;

  background:
    radial-gradient(
      circle at center,
      rgba(182,102,255,.48) 0%,
      rgba(97,59,198,.33) 48%,
      #09131e 76%
    );

  box-shadow:
    0 0 0 4px
      rgba(4,15,23,.98),
    0 0 10px
      rgba(181,102,255,.64),
    0 0 24px
      rgba(139,83,255,.32);
}


.sales-locked-milestone.next
.sales-locked-node::after{
  content:"";

  position:absolute;

  inset:-7px;

  border:
    1px solid
    rgba(183,111,255,.24);

  border-radius:50%;

  animation:
    salesV9MilestonePulse
    2.4s ease-out infinite;

  pointer-events:none;
}


@keyframes salesV9MilestonePulse{

  0%{
    opacity:.72;

    transform:
      scale(.80);
  }

  100%{
    opacity:0;

    transform:
      scale(1.32);
  }

}


/* ============================================================
   UPCOMING / LOCKED
   ============================================================ */

.sales-locked-milestone.upcoming
.sales-locked-node{
  border-color:
    rgba(99,132,151,.36);

  color:#71838d;

  background:
    #08151e;

  box-shadow:
    0 0 0 4px
      rgba(4,15,23,.96),
    inset 0 0 7px
      rgba(88,132,154,.035);
}


.sales-locked-milestone.upcoming::before{
  opacity:.40;
}


/* ============================================================
   LABEL STACK
   ============================================================ */

.sales-locked-node-copy{
  display:flex;

  flex-direction:column;

  align-items:center;

  margin-top:12px;

  line-height:1;
}


.sales-locked-node-copy small{
  color:#8499a4;

  font-size:.48rem;
  font-weight:900;

  letter-spacing:.11em;
}


.sales-locked-node-copy strong{
  margin-top:5px;

  color:#dceaf0;

  font-size:.82rem;
  font-weight:800;

  letter-spacing:-.018em;
}


.sales-locked-node-copy em{
  margin-top:3px;

  color:#6f858f;

  font-size:.40rem;
  font-style:normal;
  font-weight:700;

  letter-spacing:.08em;
}


.sales-locked-node-copy b{
  margin-top:6px;

  font-size:.42rem;
  font-weight:900;

  letter-spacing:.075em;
}


/* achieved copy */

.sales-locked-milestone.achieved
.sales-locked-node-copy strong{
  color:#77ebff;
}


.sales-locked-milestone.achieved
.sales-locked-node-copy b{
  color:#48edb2;
}


/* next copy */

.sales-locked-milestone.next
.sales-locked-node-copy small{
  color:#c59aff;
}


.sales-locked-milestone.next
.sales-locked-node-copy strong{
  color:#d9bdff;
}


.sales-locked-milestone.next
.sales-locked-node-copy b{
  color:#bd8cff;
}


/* future copy */

.sales-locked-milestone.upcoming
.sales-locked-node-copy{
  opacity:.66;
}


/* ============================================================
   TABLET
   Keep rail horizontal from 761–1100px.
   ============================================================ */

@media(
  min-width:761px
) and (
  max-width:1100px
){

  .sales-locked-master{
    height:170px;

    padding:
      56px 15px
      0;
  }


  .sales-locked-master::before{
    left:15px;
    right:15px;
  }


  .sales-locked-milestones{
    left:15px;
    right:15px;
  }


  .sales-locked-milestone{
    width:108px;
  }


  .sales-locked-node-copy strong{
    font-size:.74rem;
  }


  .sales-locked-node-copy b{
    font-size:.39rem;
  }

}


/* ============================================================
   MOBILE FALLBACK
   ============================================================ */

@media(max-width:760px){

  .sales-locked-master{
    height:auto;

    padding:
      48px 0 0;
  }


  .sales-locked-master::before{
    display:none;
  }


  .sales-locked-track{
    height:9px;
  }


  .sales-locked-current span{
    min-width:62px;

    font-size:.61rem;
  }


  .sales-locked-milestones{
    position:relative;

    left:auto;
    right:auto;
    top:auto;

    height:auto;

    display:grid;

    gap:12px;

    margin-top:28px;
  }


  .sales-locked-milestone{
    position:relative;

    left:auto !important;
    top:auto;

    width:auto;

    transform:none;

    display:grid;

    grid-template-columns:
      32px
      minmax(0,1fr);

    align-items:center;

    gap:13px;

    text-align:left;
  }


  .sales-locked-milestone::before{
    display:none;
  }


  .sales-locked-node{
    margin:0;
  }


  .sales-locked-node-copy{
    margin:0;

    align-items:flex-start;

    display:grid;

    grid-template-columns:
      34px
      minmax(72px,auto)
      34px
      1fr;

    gap:7px;

    align-items:center;
  }


  .sales-locked-node-copy small,
  .sales-locked-node-copy strong,
  .sales-locked-node-copy em,
  .sales-locked-node-copy b{
    margin:0;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  .sales-locked-fill,
  .sales-locked-current,
  .sales-locked-current-dot{
    transition:none !important;
  }


  .sales-locked-milestone.next
  .sales-locked-node::after{
    animation:none !important;
  }

}


/* ============================================================
   END SALES INCENTIVE - LOCKED DESIGN V9 PROGRESS RAIL
   ============================================================ */


/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V10 FINAL PROGRESS POLISH

   Final visual refinement only.
   Canonical milestone geometry remains untouched.
   ============================================================ */


/* ============================================================
   MASTER PROGRESS STAGE
   ============================================================ */

.sales-locked-master{
  height:194px !important;

  margin-top:14px !important;

  padding:
    68px 22px
    0 !important;

  overflow:visible !important;
}


/* ambient glow behind main rail */

.sales-locked-master::before{
  left:22px !important;
  right:22px !important;
  top:63px !important;

  height:26px !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(47,216,255,.10),
      rgba(31,108,157,.035) 48%,
      transparent 76%
    ) !important;

  filter:
    blur(8px) !important;
}


/* ============================================================
   PREMIUM MAIN RAIL
   ============================================================ */

.sales-locked-track{
  height:15px !important;

  border:
    1px solid
    rgba(79,180,220,.18) !important;

  border-radius:
    999px !important;

  background:
    linear-gradient(
      90deg,
      rgba(22,79,102,.78) 0%,
      rgba(18,60,84,.76) 42%,
      rgba(16,44,65,.90) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0
      rgba(146,232,255,.055),
    inset 0 -1px 0
      rgba(0,0,0,.48),
    inset 0 0 11px
      rgba(0,0,0,.58),
    0 0 17px
      rgba(36,188,235,.08) !important;
}


/* subtle top shine */

.sales-locked-track::before{
  top:2px !important;

  height:2px !important;

  background:
    linear-gradient(
      90deg,
      rgba(196,250,255,.17),
      rgba(112,221,255,.09),
      transparent 76%
    ) !important;
}


/* ============================================================
   COMPLETED PROGRESS
   ============================================================ */

.sales-locked-fill{
  background:
    linear-gradient(
      90deg,
      #48f0f7 0%,
      #3ddfff 31%,
      #3ea9ff 62%,
      #776eff 82%,
      #9a65ff 100%
    ) !important;

  box-shadow:
    0 0 8px
      rgba(65,231,255,.82),
    0 0 17px
      rgba(62,184,255,.36),
    0 0 28px
      rgba(122,91,255,.11) !important;
}


/* luminous sweep */

.sales-locked-fill::after{
  inset:
    2px 4px !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.04),
      rgba(229,254,255,.42),
      rgba(220,239,255,.12),
      transparent
    ) !important;

  opacity:.72 !important;
}


/* ============================================================
   CURRENT PROGRESS BADGE
   ============================================================ */

.sales-locked-current{
  top:-8px !important;

  z-index:40 !important;
}


.sales-locked-current span{
  min-width:78px !important;

  padding:
    9px 13px
    8px !important;

  border:
    1px solid
    rgba(74,224,255,.50) !important;

  border-radius:
    5px !important;

  color:
    #f1fdff !important;

  background:
    linear-gradient(
      180deg,
      rgba(8,42,57,.985),
      rgba(4,20,30,.985)
    ) !important;

  box-shadow:
    inset 0 0 18px
      rgba(52,218,255,.055),
    0 0 14px
      rgba(42,213,255,.20),
    0 0 26px
      rgba(57,173,255,.08) !important;

  font-size:
    .78rem !important;

  letter-spacing:
    -.015em !important;
}


/* pointer */

.sales-locked-current span::after{
  bottom:-6px !important;

  width:9px !important;
  height:9px !important;
}


/* secondary current value */

.sales-locked-current span b{
  margin-top:
    4px !important;

  color:
    #83b7c5 !important;

  font-size:
    .44rem !important;
}


/* longer connector to rail */

.sales-locked-current > i{
  height:
    29px !important;

  margin:
    6px auto 0 !important;

  background:
    linear-gradient(
      rgba(86,233,255,.95),
      rgba(86,233,255,.20)
    ) !important;

  box-shadow:
    0 0 6px
    rgba(74,226,255,.48) !important;
}


/* ============================================================
   CURRENT DOT
   ============================================================ */

.sales-locked-current-dot{
  width:
    20px !important;

  height:
    20px !important;

  border:
    4px solid
    #5cecff !important;

  background:
    #f5ffff !important;

  box-shadow:
    0 0 0 5px
      rgba(57,224,255,.12),
    0 0 15px
      rgba(67,232,255,.90),
    0 0 30px
      rgba(73,152,255,.26) !important;
}


/* ============================================================
   MILESTONE LAYER
   ============================================================ */

.sales-locked-milestones{
  left:
    22px !important;

  right:
    22px !important;

  top:
    61px !important;

  height:
    123px !important;
}


.sales-locked-milestone{
  width:
    138px !important;
}


/* stronger vertical stem */

.sales-locked-milestone::before{
  top:
    -14px !important;

  height:
    40px !important;

  background:
    linear-gradient(
      rgba(82,223,255,.40),
      rgba(82,223,255,.08)
    ) !important;
}


/* ============================================================
   BASE MILESTONE NODE
   ============================================================ */

.sales-locked-node{
  width:
    26px !important;

  height:
    26px !important;

  border:
    1px solid
    rgba(87,173,206,.45) !important;

  color:
    #8ea2ad !important;

  background:
    radial-gradient(
      circle,
      #0b1c27 0%,
      #06131d 72%
    ) !important;

  box-shadow:
    0 0 0 5px
      rgba(4,15,23,.97),
    inset 0 0 8px
      rgba(94,186,220,.04) !important;
}


.sales-locked-node span{
  font-size:
    .51rem !important;
}


/* ============================================================
   ACHIEVED CHECKPOINT
   ============================================================ */

.sales-locked-milestone.achieved
.sales-locked-node{
  color:
    transparent !important;

  border-color:
    #69efff !important;

  background:
    radial-gradient(
      circle at 42% 35%,
      #f0ffff 0%,
      #8bf4ff 27%,
      #43e0f1 64%,
      #1eb7d0 100%
    ) !important;

  box-shadow:
    0 0 0 5px
      rgba(4,15,23,.97),
    0 0 13px
      rgba(60,231,255,.62),
    0 0 24px
      rgba(58,174,255,.15) !important;
}


/* turn achieved number into a check */

.sales-locked-milestone.achieved
.sales-locked-node span{
  font-size:0 !important;
}


.sales-locked-milestone.achieved
.sales-locked-node span::before{
  content:"✓";

  display:block;

  color:
    #04181d;

  font-size:
    .72rem;

  font-weight:
    1000;

  line-height:
    1;
}


/* ============================================================
   NEXT MILESTONE TARGET
   ============================================================ */

.sales-locked-milestone.next
.sales-locked-node{
  width:
    35px !important;

  height:
    35px !important;

  margin-top:
    -5px !important;

  border:
    2px solid
    rgba(201,128,255,.98) !important;

  color:
    #fff5ff !important;

  background:
    radial-gradient(
      circle,
      rgba(193,113,255,.55) 0%,
      rgba(111,65,215,.35) 47%,
      #09131f 76%
    ) !important;

  box-shadow:
    0 0 0 5px
      rgba(4,15,23,.98),
    0 0 13px
      rgba(190,108,255,.78),
    0 0 28px
      rgba(144,83,255,.38) !important;
}


.sales-locked-milestone.next
.sales-locked-node::after{
  inset:
    -9px !important;

  border:
    1px solid
    rgba(199,126,255,.30) !important;
}


/* ============================================================
   UPCOMING / LOCKED
   ============================================================ */

.sales-locked-milestone.upcoming
.sales-locked-node{
  border-color:
    rgba(87,131,151,.40) !important;

  color:
    #72858f !important;

  background:
    #07151e !important;

  box-shadow:
    0 0 0 5px
      rgba(4,15,23,.97),
    inset 0 0 8px
      rgba(78,124,148,.035) !important;
}


/* ============================================================
   MILESTONE TYPOGRAPHY
   ============================================================ */

.sales-locked-node-copy{
  margin-top:
    14px !important;
}


.sales-locked-node-copy small{
  color:
    #879ca7 !important;

  font-size:
    .52rem !important;

  letter-spacing:
    .12em !important;
}


.sales-locked-node-copy strong{
  margin-top:
    6px !important;

  color:
    #e3eff4 !important;

  font-size:
    .91rem !important;

  font-weight:
    850 !important;
}


.sales-locked-node-copy em{
  margin-top:
    4px !important;

  color:
    #708791 !important;

  font-size:
    .43rem !important;
}


.sales-locked-node-copy b{
  margin-top:
    7px !important;

  font-size:
    .47rem !important;

  letter-spacing:
    .085em !important;
}


/* achieved labels */

.sales-locked-milestone.achieved
.sales-locked-node-copy strong{
  color:
    #63ebff !important;
}


.sales-locked-milestone.achieved
.sales-locked-node-copy b{
  color:
    #43f0ae !important;
}


/* next labels */

.sales-locked-milestone.next
.sales-locked-node-copy small{
  color:
    #c69cff !important;
}


.sales-locked-milestone.next
.sales-locked-node-copy strong{
  color:
    #d8b9ff !important;
}


.sales-locked-milestone.next
.sales-locked-node-copy b{
  color:
    #bd86ff !important;
}


/* locked labels */

.sales-locked-milestone.upcoming
.sales-locked-node-copy{
  opacity:
    .70 !important;
}


/* ============================================================
   TABLET 761–1100
   ============================================================ */

@media(
  min-width:761px
) and (
  max-width:1100px
){

  .sales-locked-master{
    height:
      184px !important;

    padding:
      66px 18px
      0 !important;
  }


  .sales-locked-master::before{
    left:
      18px !important;

    right:
      18px !important;

    top:
      61px !important;
  }


  .sales-locked-milestones{
    left:
      18px !important;

    right:
      18px !important;

    top:
      59px !important;
  }


  .sales-locked-milestone{
    width:
      118px !important;
  }


  .sales-locked-node-copy strong{
    font-size:
      .82rem !important;
  }


  .sales-locked-node-copy b{
    font-size:
      .43rem !important;
  }

}


/* ============================================================
   MOBILE
   Keep existing stacked fallback.
   ============================================================ */

@media(max-width:760px){

  .sales-locked-master{
    height:auto !important;

    padding:
      50px 0
      0 !important;
  }


  .sales-locked-master::before{
    display:none !important;
  }


  .sales-locked-track{
    height:
      10px !important;
  }


  .sales-locked-current span{
    min-width:
      66px !important;

    font-size:
      .66rem !important;
  }


  .sales-locked-milestones{
    position:
      relative !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;

    height:auto !important;

    display:grid !important;

    gap:
      13px !important;

    margin-top:
      30px !important;
  }


  .sales-locked-milestone{
    position:
      relative !important;

    left:auto !important;
    top:auto !important;

    width:auto !important;

    transform:none !important;

    display:grid !important;

    grid-template-columns:
      34px
      minmax(0,1fr) !important;

    align-items:center !important;

    gap:
      13px !important;

    text-align:left !important;
  }


  .sales-locked-milestone::before{
    display:none !important;
  }


  .sales-locked-node{
    margin:
      0 !important;
  }


  .sales-locked-node-copy{
    margin:
      0 !important;

    display:grid !important;

    grid-template-columns:
      34px
      minmax(78px,auto)
      35px
      1fr !important;

    gap:
      7px !important;

    align-items:center !important;
  }


  .sales-locked-node-copy small,
  .sales-locked-node-copy strong,
  .sales-locked-node-copy em,
  .sales-locked-node-copy b{
    margin:
      0 !important;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  .sales-locked-fill,
  .sales-locked-current,
  .sales-locked-current-dot{
    transition:
      none !important;
  }


  .sales-locked-milestone.next
  .sales-locked-node::after{
    animation:
      none !important;
  }

}


/* ============================================================
   END SALES INCENTIVE - LOCKED DESIGN V10 FINAL PROGRESS POLISH
   ============================================================ */


/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V11 561-760 CASCADE FIX

   Audit-proven responsive collision repair.

   <=560px      : true mobile
   561px-760px  : premium horizontal locked design
   >760px       : existing V10 desktop design
   ============================================================ */


@media
  (min-width:561px)
  and
  (max-width:760px){

  /* =========================================================
     MASTER STAGE
     ========================================================= */

  .sales-locked-master{
    position:relative !important;

    display:block !important;

    height:194px !important;

    margin-top:14px !important;

    padding:
      68px 22px
      0 !important;

    overflow:visible !important;
  }


  .sales-locked-master::before{
    display:block !important;

    left:22px !important;
    right:22px !important;
    top:63px !important;

    height:26px !important;

    background:
      radial-gradient(
        ellipse at center,
        rgba(47,216,255,.105),
        rgba(31,108,157,.035) 48%,
        transparent 76%
      ) !important;

    filter:
      blur(8px) !important;
  }


  /* =========================================================
     RAIL
     ========================================================= */

  .sales-locked-track{
    position:relative !important;

    display:block !important;

    height:15px !important;

    overflow:visible !important;

    border:
      1px solid
      rgba(79,180,220,.20) !important;

    border-radius:
      999px !important;

    background:
      linear-gradient(
        90deg,
        rgba(22,79,102,.80) 0%,
        rgba(18,60,84,.78) 42%,
        rgba(16,44,65,.92) 100%
      ) !important;

    box-shadow:
      inset 0 1px 0
        rgba(146,232,255,.06),
      inset 0 -1px 0
        rgba(0,0,0,.48),
      inset 0 0 11px
        rgba(0,0,0,.58),
      0 0 18px
        rgba(36,188,235,.09) !important;
  }


  .sales-locked-track::before{
    display:block !important;

    top:2px !important;

    height:2px !important;
  }


  /* =========================================================
     COMPLETED FILL
     ========================================================= */

  .sales-locked-fill{
    position:absolute !important;

    display:block !important;

    left:0 !important;
    top:0 !important;
    bottom:0 !important;

    width:
      var(--locked-progress) !important;

    height:auto !important;

    border-radius:
      999px !important;

    background:
      linear-gradient(
        90deg,
        #48f0f7 0%,
        #3ddfff 31%,
        #3ea9ff 62%,
        #776eff 82%,
        #9a65ff 100%
      ) !important;

    box-shadow:
      0 0 8px
        rgba(65,231,255,.84),
      0 0 18px
        rgba(62,184,255,.38),
      0 0 29px
        rgba(122,91,255,.12) !important;
  }


  /* =========================================================
     FLOATING LIVE INDICATOR
     ========================================================= */

  .sales-locked-current{
    position:absolute !important;

    display:block !important;

    top:-8px !important;

    transform:
      translateX(-50%) !important;

    z-index:40 !important;
  }


  .sales-locked-current span{
    display:flex !important;

    min-width:78px !important;

    width:auto !important;

    flex-direction:column !important;

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

    padding:
      9px 13px
      8px !important;

    border:
      1px solid
      rgba(74,224,255,.50) !important;

    border-radius:
      5px !important;

    background:
      linear-gradient(
        180deg,
        rgba(8,42,57,.985),
        rgba(4,20,30,.985)
      ) !important;

    box-shadow:
      inset 0 0 18px
        rgba(52,218,255,.055),
      0 0 14px
        rgba(42,213,255,.20),
      0 0 26px
        rgba(57,173,255,.08) !important;

    color:
      #f1fdff !important;

    font-size:
      .78rem !important;
  }


  .sales-locked-current span b{
    display:block !important;

    margin-top:4px !important;

    font-size:.44rem !important;
  }


  .sales-locked-current > i{
    display:block !important;

    width:1px !important;
    height:29px !important;

    margin:
      6px auto 0 !important;
  }


  /* =========================================================
     CURRENT DOT
     ========================================================= */

  .sales-locked-current-dot{
    position:absolute !important;

    display:block !important;

    left:
      var(--locked-progress) !important;

    top:50% !important;

    width:20px !important;
    height:20px !important;

    transform:
      translate(-50%,-50%) !important;

    border:
      4px solid
      #5cecff !important;

    border-radius:
      50% !important;

    background:
      #f5ffff !important;

    box-shadow:
      0 0 0 5px
        rgba(57,224,255,.12),
      0 0 15px
        rgba(67,232,255,.90),
      0 0 30px
        rgba(73,152,255,.26) !important;
  }


  /* =========================================================
     MILESTONE LAYER
     ========================================================= */

  .sales-locked-milestones{
    position:absolute !important;

    display:block !important;

    left:22px !important;
    right:22px !important;

    top:61px !important;
    bottom:auto !important;

    width:auto !important;
    height:123px !important;

    margin:0 !important;

    gap:0 !important;

    pointer-events:none !important;
  }


  .sales-locked-milestone{
    position:absolute !important;

    display:block !important;

    top:0 !important;

    right:auto !important;
    bottom:auto !important;

    width:118px !important;

    margin:0 !important;

    transform:
      translateX(-50%) !important;

    text-align:center !important;

    pointer-events:auto !important;
  }


  /*
     Audit confirmed canonical rendered anchors:
       M1 = 8%
       M2 = 36%
       M3 = 64%
       M4 = 92%

     Needed because historical max760 rule owns:
       left:auto !important
  */

  .sales-locked-milestone:nth-child(1){
    left:8% !important;
  }

  .sales-locked-milestone:nth-child(2){
    left:36% !important;
  }

  .sales-locked-milestone:nth-child(3){
    left:64% !important;
  }

  .sales-locked-milestone:nth-child(4){
    left:92% !important;
  }


  /* =========================================================
     STEM
     ========================================================= */

  .sales-locked-milestone::before{
    display:block !important;

    position:absolute !important;

    left:50% !important;
    top:-14px !important;

    width:1px !important;
    height:40px !important;

    transform:
      translateX(-50%) !important;

    background:
      linear-gradient(
        rgba(82,223,255,.42),
        rgba(82,223,255,.08)
      ) !important;
  }


  /* =========================================================
     BASE NODE
     ========================================================= */

  .sales-locked-node{
    position:relative !important;

    display:grid !important;

    width:26px !important;
    height:26px !important;

    place-items:center !important;

    margin:
      0 auto !important;

    border-radius:
      50% !important;
  }


  /* =========================================================
     NEXT NODE
     ========================================================= */

  .sales-locked-milestone.next
  .sales-locked-node{
    width:35px !important;
    height:35px !important;

    margin:
      -5px auto 0 !important;

    border:
      2px solid
      rgba(201,128,255,.98) !important;

    color:
      #fff5ff !important;

    background:
      radial-gradient(
        circle,
        rgba(193,113,255,.55) 0%,
        rgba(111,65,215,.35) 47%,
        #09131f 76%
      ) !important;

    box-shadow:
      0 0 0 5px
        rgba(4,15,23,.98),
      0 0 13px
        rgba(190,108,255,.78),
      0 0 28px
        rgba(144,83,255,.38) !important;
  }


  /* =========================================================
     ACHIEVED NODE
     ========================================================= */

  .sales-locked-milestone.achieved
  .sales-locked-node{
    width:26px !important;
    height:26px !important;

    color:
      transparent !important;

    border:
      1px solid
      #69efff !important;

    background:
      radial-gradient(
        circle at 42% 35%,
        #f0ffff 0%,
        #8bf4ff 27%,
        #43e0f1 64%,
        #1eb7d0 100%
      ) !important;

    box-shadow:
      0 0 0 5px
        rgba(4,15,23,.97),
      0 0 13px
        rgba(60,231,255,.62),
      0 0 24px
        rgba(58,174,255,.15) !important;
  }


  .sales-locked-milestone.achieved
  .sales-locked-node span{
    font-size:0 !important;
  }


  .sales-locked-milestone.achieved
  .sales-locked-node span::before{
    content:"✓" !important;

    display:block !important;

    color:#04181d !important;

    font-size:.72rem !important;
    font-weight:1000 !important;

    line-height:1 !important;
  }


  /* =========================================================
     FUTURE NODE
     ========================================================= */

  .sales-locked-milestone.upcoming
  .sales-locked-node{
    width:26px !important;
    height:26px !important;

    border:
      1px solid
      rgba(87,131,151,.40) !important;

    color:#72858f !important;

    background:
      #07151e !important;
  }


  /* =========================================================
     MILESTONE COPY
     ========================================================= */

  .sales-locked-node-copy{
    display:flex !important;

    width:auto !important;

    flex-direction:column !important;

    align-items:center !important;
    justify-content:flex-start !important;

    margin:
      14px 0 0 !important;

    padding:0 !important;

    gap:0 !important;

    text-align:center !important;

    line-height:1 !important;
  }


  .sales-locked-node-copy small{
    display:block !important;

    margin:0 !important;

    font-size:.52rem !important;

    letter-spacing:.11em !important;
  }


  .sales-locked-node-copy strong{
    display:block !important;

    margin:
      6px 0 0 !important;

    font-size:.86rem !important;

    font-weight:850 !important;
  }


  .sales-locked-node-copy em{
    display:block !important;

    margin:
      4px 0 0 !important;

    font-size:.43rem !important;
  }


  .sales-locked-node-copy b{
    display:block !important;

    margin:
      7px 0 0 !important;

    font-size:.45rem !important;

    letter-spacing:.08em !important;
  }


  /* =========================================================
     STATE TYPOGRAPHY
     ========================================================= */

  .sales-locked-milestone.achieved
  .sales-locked-node-copy strong{
    color:#63ebff !important;
  }


  .sales-locked-milestone.achieved
  .sales-locked-node-copy b{
    color:#43f0ae !important;
  }


  .sales-locked-milestone.next
  .sales-locked-node-copy small{
    color:#c69cff !important;
  }


  .sales-locked-milestone.next
  .sales-locked-node-copy strong{
    color:#d8b9ff !important;
  }


  .sales-locked-milestone.next
  .sales-locked-node-copy b{
    color:#bd86ff !important;
  }


  .sales-locked-milestone.upcoming
  .sales-locked-node-copy{
    opacity:.70 !important;
  }

}


/* ============================================================
   TRUE MOBILE ENFORCEMENT
   ============================================================ */

@media(max-width:560px){

  .sales-locked-master{
    height:auto !important;

    padding:
      50px 0 0 !important;
  }


  .sales-locked-master::before{
    display:none !important;
  }


  .sales-locked-track{
    height:10px !important;
  }


  .sales-locked-current span{
    min-width:66px !important;

    font-size:.66rem !important;
  }


  .sales-locked-milestones{
    position:relative !important;

    display:grid !important;

    left:auto !important;
    right:auto !important;

    top:auto !important;

    width:auto !important;
    height:auto !important;

    gap:13px !important;

    margin-top:30px !important;
  }


  .sales-locked-milestone{
    position:relative !important;

    display:grid !important;

    left:auto !important;

    width:auto !important;

    transform:none !important;

    grid-template-columns:
      34px minmax(0,1fr) !important;

    align-items:center !important;

    gap:13px !important;

    text-align:left !important;
  }


  .sales-locked-milestone::before{
    display:none !important;
  }


  .sales-locked-node{
    margin:0 !important;
  }


  .sales-locked-node-copy{
    display:grid !important;

    grid-template-columns:
      34px
      minmax(78px,auto)
      35px
      1fr !important;

    align-items:center !important;

    gap:7px !important;

    margin:0 !important;

    text-align:left !important;
  }


  .sales-locked-node-copy small,
  .sales-locked-node-copy strong,
  .sales-locked-node-copy em,
  .sales-locked-node-copy b{
    margin:0 !important;
  }

}


/* ============================================================
   END SALES INCENTIVE - LOCKED DESIGN V11 561-760 CASCADE FIX
   ============================================================ */


/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V12 VERTICAL COMPOSITION

   Final checkpoint composition refinement.

   Live progress:
       BADGE
         |
   ===== DOT ===============================

            |         |         |         |
           M1        M2        M3        M4
         VALUE     VALUE     VALUE     VALUE
         STATUS    STATUS    STATUS    STATUS

   Milestone checkpoints are intentionally separated
   vertically from the live progress rail.
   ============================================================ */


/* ============================================================
   DESKTOP / LARGE TABLET
   ============================================================ */

@media(min-width:761px){

  /*
     Give progress area enough vertical breathing room
     for the separated milestone checkpoint row.
  */

  .sales-locked-master{
    height:232px !important;

    padding:
      68px 22px
      0 !important;
  }


  /*
     Keep progress rail in current location.
  */

  .sales-locked-track{
    height:15px !important;
  }


  /*
     Keep live dot exactly on progress rail.
  */

  .sales-locked-current-dot{
    top:50% !important;

    width:20px !important;
    height:20px !important;

    transform:
      translate(-50%,-50%) !important;
  }


  /* =========================================================
     FLOATING CURRENT BADGE
     ========================================================= */

  .sales-locked-current{
    /*
      Clamp the visual badge owner inside the stage.

      At 0%, old behavior placed center at literal left edge,
      causing the badge to extend outside the Program Matrix.
    */

    left:
      clamp(
        44px,
        var(--locked-progress),
        calc(100% - 44px)
      ) !important;

    top:-9px !important;
  }


  .sales-locked-current span{
    min-width:80px !important;

    padding:
      9px 13px
      8px !important;
  }


  /*
     Current connector remains elegant but shorter because
     badge may be edge-clamped independently from the dot.
  */

  .sales-locked-current > i{
    height:25px !important;
  }


  /* =========================================================
     MILESTONE ROW — MOVE BELOW RAIL
     ========================================================= */

  .sales-locked-milestones{
    /*
      Rail center is roughly 75px from master top.
      Set milestone container at ~103px so node centers sit
      about 40px BELOW the rail center.
    */

    top:101px !important;

    height:120px !important;

    left:22px !important;
    right:22px !important;

    position:absolute !important;
    display:block !important;
  }


  .sales-locked-milestone{
    top:0 !important;

    width:126px !important;
  }


  /* =========================================================
     STEMS — RAIL TO CHECKPOINT
     ========================================================= */

  .sales-locked-milestone::before{
    /*
      Stem rises from node toward the rail.
    */

    top:-30px !important;

    height:32px !important;

    width:1px !important;

    background:
      linear-gradient(
        180deg,
        rgba(72,213,255,.08) 0%,
        rgba(72,213,255,.28) 45%,
        rgba(72,213,255,.52) 100%
      ) !important;

    box-shadow:
      0 0 5px
      rgba(62,207,255,.12) !important;
  }


  /* =========================================================
     BASE CHECKPOINT
     ========================================================= */

  .sales-locked-node{
    width:27px !important;
    height:27px !important;

    margin:
      0 auto !important;

    border:
      1px solid
      rgba(78,155,188,.45) !important;

    background:
      radial-gradient(
        circle at center,
        rgba(11,32,45,.98),
        rgba(5,18,27,.98)
      ) !important;

    box-shadow:
      0 0 0 4px
        rgba(3,14,22,.97),
      inset 0 0 9px
        rgba(55,155,192,.055) !important;
  }


  /* =========================================================
     ACHIEVED CHECKPOINT
     ========================================================= */

  .sales-locked-milestone.achieved
  .sales-locked-node{
    width:29px !important;
    height:29px !important;

    border:
      1px solid
      #64ebff !important;

    background:
      radial-gradient(
        circle at 40% 35%,
        #efffff 0%,
        #8ef5ff 26%,
        #43dff0 61%,
        #1aaec7 100%
      ) !important;

    box-shadow:
      0 0 0 4px
        rgba(3,14,22,.98),
      0 0 12px
        rgba(58,231,255,.56),
      0 0 23px
        rgba(54,175,255,.15) !important;
  }


  .sales-locked-milestone.achieved
  .sales-locked-node span{
    font-size:0 !important;
  }


  .sales-locked-milestone.achieved
  .sales-locked-node span::before{
    content:"✓" !important;

    display:block !important;

    color:#03181d !important;

    font-size:.76rem !important;
    font-weight:1000 !important;

    line-height:1 !important;
  }


  /* =========================================================
     NEXT / CURRENT TARGET CHECKPOINT
     ========================================================= */

  .sales-locked-milestone.next
  .sales-locked-node{
    width:35px !important;
    height:35px !important;

    margin:
      -4px auto 0 !important;

    border:
      2px solid
      rgba(201,126,255,.98) !important;

    background:
      radial-gradient(
        circle at center,
        rgba(190,109,255,.51) 0%,
        rgba(106,61,207,.34) 47%,
        rgba(7,18,30,.99) 75%
      ) !important;

    box-shadow:
      0 0 0 5px
        rgba(3,14,22,.98),
      0 0 12px
        rgba(190,103,255,.72),
      0 0 26px
        rgba(144,76,255,.33) !important;
  }


  /*
     Larger outer violet target ring.
  */

  .sales-locked-milestone.next
  .sales-locked-node::after{
    inset:-8px !important;

    border:
      1px solid
      rgba(194,118,255,.30) !important;
  }


  /* =========================================================
     UPCOMING CHECKPOINT
     ========================================================= */

  .sales-locked-milestone.upcoming
  .sales-locked-node{
    width:27px !important;
    height:27px !important;

    color:#768b96 !important;

    border:
      1px solid
      rgba(79,129,151,.38) !important;

    background:
      radial-gradient(
        circle,
        rgba(8,27,38,.96),
        rgba(5,17,25,.98)
      ) !important;

    box-shadow:
      0 0 0 4px
        rgba(3,14,22,.98),
      inset 0 0 8px
        rgba(70,126,151,.04) !important;
  }


  /* =========================================================
     COPY — MORE SPACE LIKE LOCKED REFERENCE
     ========================================================= */

  .sales-locked-node-copy{
    margin-top:
      13px !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    text-align:center !important;

    line-height:1 !important;
  }


  /*
     M1 / M2 / M3 / M4
  */

  .sales-locked-node-copy small{
    font-size:
      .54rem !important;

    font-weight:
      900 !important;

    letter-spacing:
      .11em !important;

    color:
      #879ca8 !important;
  }


  /*
     5,000 / 18,000 / 25,000 / ...
  */

  .sales-locked-node-copy strong{
    margin-top:
      7px !important;

    font-size:
      .93rem !important;

    font-weight:
      850 !important;

    letter-spacing:
      -.01em !important;
  }


  /*
     USDT
  */

  .sales-locked-node-copy em{
    margin-top:
      4px !important;

    font-size:
      .43rem !important;

    letter-spacing:
      .08em !important;
  }


  /*
     ACHIEVED / NEXT / LOCKED
  */

  .sales-locked-node-copy b{
    margin-top:
      7px !important;

    font-size:
      .47rem !important;

    font-weight:
      900 !important;

    letter-spacing:
      .08em !important;
  }


  /* =========================================================
     STATE COLORS
     ========================================================= */

  .sales-locked-milestone.achieved
  .sales-locked-node-copy strong{
    color:
      #61ebff !important;
  }


  .sales-locked-milestone.achieved
  .sales-locked-node-copy b{
    color:
      #42efad !important;
  }


  .sales-locked-milestone.next
  .sales-locked-node-copy small{
    color:
      #c99dff !important;
  }


  .sales-locked-milestone.next
  .sales-locked-node-copy strong{
    color:
      #dcbcff !important;
  }


  .sales-locked-milestone.next
  .sales-locked-node-copy b{
    color:
      #c08cff !important;
  }


  .sales-locked-milestone.upcoming
  .sales-locked-node-copy{
    opacity:
      .72 !important;
  }

}


/* ============================================================
   AUDIT-PROVEN 561–760 LOCKED LAYOUT
   ============================================================ */

@media
  (min-width:561px)
  and
  (max-width:760px){

  .sales-locked-master{
    height:226px !important;

    padding:
      68px 22px
      0 !important;
  }


  /*
     At 716px:
     keep live rail width already verified as healthy.
  */

  .sales-locked-track{
    height:
      15px !important;
  }


  /*
     Clamp badge inside master.
     0% no longer hangs outside left edge.
  */

  .sales-locked-current{
    left:
      clamp(
        40px,
        var(--locked-progress),
        calc(100% - 40px)
      ) !important;

    top:
      -9px !important;
  }


  .sales-locked-current span{
    min-width:
      80px !important;
  }


  /*
     Move checkpoint row below rail.

     Before V12 audit:
       node offset ~= -1.5px

     V12 target:
       node offset ~= +31 to +36px
  */

  .sales-locked-milestones{
    position:
      absolute !important;

    display:
      block !important;

    left:
      22px !important;

    right:
      22px !important;

    top:
      101px !important;

    height:
      116px !important;

    margin:
      0 !important;
  }


  .sales-locked-milestone{
    position:
      absolute !important;

    display:
      block !important;

    top:
      0 !important;

    width:
      112px !important;

    transform:
      translateX(-50%) !important;

    text-align:
      center !important;
  }


  /*
     Preserve canonical visual anchors.
  */

  .sales-locked-milestone:nth-child(1){
    left:8% !important;
  }

  .sales-locked-milestone:nth-child(2){
    left:36% !important;
  }

  .sales-locked-milestone:nth-child(3){
    left:64% !important;
  }

  .sales-locked-milestone:nth-child(4){
    left:92% !important;
  }


  /*
     Long connector from rail to node row.
  */

  .sales-locked-milestone::before{
    display:block !important;

    top:
      -29px !important;

    height:
      31px !important;
  }


  /*
     Slightly tighter type on 716px while preserving hierarchy.
  */

  .sales-locked-node-copy strong{
    font-size:
      .86rem !important;
  }


  .sales-locked-node-copy small{
    font-size:
      .50rem !important;
  }


  .sales-locked-node-copy b{
    font-size:
      .44rem !important;
  }

}


/* ============================================================
   TRUE MOBILE <=560
   Keep stacked fallback from V11.
   ============================================================ */

@media(max-width:560px){

  .sales-locked-master{
    height:auto !important;

    padding:
      50px 0 0 !important;
  }


  .sales-locked-current{
    left:
      var(--locked-progress) !important;
  }


  .sales-locked-milestones{
    position:
      relative !important;

    display:
      grid !important;

    left:
      auto !important;

    right:
      auto !important;

    top:
      auto !important;

    height:
      auto !important;

    margin-top:
      30px !important;
  }


  .sales-locked-milestone{
    position:
      relative !important;

    display:
      grid !important;

    left:
      auto !important;

    width:
      auto !important;

    transform:
      none !important;

    text-align:
      left !important;
  }


  .sales-locked-milestone::before{
    display:
      none !important;
  }

}


/* ============================================================
   END SALES INCENTIVE - LOCKED DESIGN V12 VERTICAL COMPOSITION
   ============================================================ */


/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V13 MILESTONE PRECISION LIFT

   Precision-only adjustment.

   V12 measured checkpoint offset:
     ~38px below rail.

   V13:
     Move M1-M4 checkpoint row upward by 15px.

   No rail / current dot / badge / anchors / values changed.
   ============================================================ */


/* ============================================================
   STANDARD HORIZONTAL LAYOUT
   ============================================================ */

@media(min-width:761px){

  .sales-locked-milestones{
    /*
      V12 = 101px
      V13 = 86px

      Entire milestone row rises 15px.
    */

    top:
      86px !important;
  }


  /*
     Stem now begins closer to the rail while continuing
     down into the checkpoint circle.
  */

  .sales-locked-milestone::before{
    top:
      -15px !important;

    height:
      17px !important;

    background:
      linear-gradient(
        180deg,
        rgba(71,215,255,.13) 0%,
        rgba(71,215,255,.34) 55%,
        rgba(71,215,255,.58) 100%
      ) !important;

    box-shadow:
      0 0 5px
      rgba(63,205,255,.14) !important;
  }

}


/* ============================================================
   AUDIT VIEWPORT: 561px - 760px

   This is the active geometry at the user's ~716px viewport.
   ============================================================ */

@media
  (min-width:561px)
  and
  (max-width:760px){

  .sales-locked-milestones{
    position:
      absolute !important;

    display:
      block !important;

    left:
      22px !important;

    right:
      22px !important;

    /*
      EXACT V13 PRECISION POSITION.
    */

    top:
      86px !important;

    height:
      116px !important;
  }


  /*
     Keep canonical horizontal anchors completely unchanged.
  */

  .sales-locked-milestone:nth-child(1){
    left:
      8% !important;
  }

  .sales-locked-milestone:nth-child(2){
    left:
      36% !important;
  }

  .sales-locked-milestone:nth-child(3){
    left:
      64% !important;
  }

  .sales-locked-milestone:nth-child(4){
    left:
      92% !important;
  }


  /*
     Shorter stem after moving checkpoint row upward.
  */

  .sales-locked-milestone::before{
    display:
      block !important;

    top:
      -14px !important;

    height:
      16px !important;

    background:
      linear-gradient(
        180deg,
        rgba(71,215,255,.12),
        rgba(71,215,255,.55)
      ) !important;
  }


  /*
     Everything below stays exactly at V12 styling.
     Explicitly retain key node sizes so older cascade
     cannot interfere.
  */

  .sales-locked-milestone.next
  .sales-locked-node{
    width:
      35px !important;

    height:
      35px !important;
  }


  .sales-locked-milestone.upcoming
  .sales-locked-node{
    width:
      27px !important;

    height:
      27px !important;
  }


  .sales-locked-milestone.achieved
  .sales-locked-node{
    width:
      29px !important;

    height:
      29px !important;
  }

}


/* ============================================================
   TRUE MOBILE
   Do not change V12 mobile stacking.
   ============================================================ */

@media(max-width:560px){

  .sales-locked-milestones{
    top:
      auto !important;
  }


  .sales-locked-milestone::before{
    display:
      none !important;
  }

}


/* ============================================================
   END SALES INCENTIVE - LOCKED DESIGN V13 MILESTONE PRECISION LIFT
   ============================================================ */


/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V14 MATRIX STRUCTURAL ALIGNMENT

   Locked composition owner:

     LEFT IDENTITY CARD | RIGHT OPEN PROGRESS WORKSPACE

   The right workspace begins ABOVE the visual top of the
   left identity card.

   Runtime / thresholds / milestone state untouched.
   ============================================================ */


/* ============================================================
   561px+
   Use locked two-column matrix.
   ============================================================ */

@media(min-width:561px){


  /* =========================================================
     1. PRIMARY MATRIX OWNER
     ========================================================= */

  .sales-locked-program-grid{
    display:grid !important;

    /*
      Locked reference proportion:
      left card roughly 43–44%
      progress workspace roughly 56–57%.
    */

    grid-template-columns:
      minmax(0, 44%)
      minmax(0, 56%) !important;

    grid-template-rows:
      minmax(0, auto) !important;

    column-gap:
      0 !important;

    row-gap:
      0 !important;

    align-items:
      start !important;

    position:
      relative !important;

    overflow:
      visible !important;
  }


  /* =========================================================
     2. LEFT IDENTITY CARD

     Locked reference:
     strong bordered card,
     starts LOWER than the right KPI row.
     ========================================================= */

  .sales-locked-identity{
    grid-column:
      1 !important;

    grid-row:
      1 !important;

    position:
      relative !important;

    align-self:
      start !important;

    /*
      This creates the locked asymmetry:
      right side appears first,
      identity begins lower.
    */

    margin-top:
      42px !important;

    margin-right:
      12px !important;

    margin-bottom:
      0 !important;

    min-width:
      0 !important;

    min-height:
      252px !important;

    z-index:
      2 !important;
  }


  /* =========================================================
     3. RIGHT OPEN PROGRESS WORKSPACE
     ========================================================= */

  .sales-locked-progress{
    grid-column:
      2 !important;

    grid-row:
      1 !important;

    position:
      relative !important;

    align-self:
      start !important;

    margin:
      0 !important;

    padding:
      0 !important;

    min-width:
      0 !important;

    overflow:
      visible !important;

    /*
      Locked reference has no dominant enclosing
      "second card" on the right.
    */

    border:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    z-index:
      1 !important;
  }


  /* =========================================================
     4. KPI ROW
     ========================================================= */

  .sales-locked-kpis{
    display:grid !important;

    /*
      Measured Volume is visually much wider.
      Next Milestone is a compact right module.
    */

    grid-template-columns:
      minmax(0, 1.82fr)
      minmax(145px, .88fr) !important;

    align-items:
      end !important;

    gap:
      12px !important;

    margin:
      0 8px !important;

    padding:
      0 !important;

    position:
      relative !important;
  }


  /* =========================================================
     5. MEASURED VOLUME KPI
     ========================================================= */

  .sales-locked-kpi.measured{
    align-self:
      end !important;

    min-height:
      82px !important;

    padding:
      15px 17px !important;

    border:
      1px solid
      rgba(57,146,181,.14) !important;

    background:
      linear-gradient(
        180deg,
        rgba(5,23,34,.68),
        rgba(4,17,26,.60)
      ) !important;

    box-shadow:
      inset 0 0 18px
      rgba(47,192,235,.018) !important;
  }


  /* =========================================================
     6. NEXT MILESTONE KPI

     Slightly taller than measured.
     Bottom-aligned.
     ========================================================= */

  .sales-locked-kpis
  .sales-locked-kpi:not(.measured){
    align-self:
      end !important;

    min-height:
      92px !important;

    padding:
      14px 16px !important;

    border:
      1px solid
      rgba(207,159,46,.18) !important;

    background:
      linear-gradient(
        180deg,
        rgba(7,22,30,.74),
        rgba(4,17,25,.64)
      ) !important;

    box-shadow:
      inset 0 0 18px
      rgba(255,192,49,.014) !important;
  }


  /* =========================================================
     7. OPEN PROGRESS CANVAS

     KPI bottom
         ↓
       gap
         ↓
       badge
         ↓
       rail
         ↓ ~28px
       nodes
     ========================================================= */

  .sales-locked-master{
    position:
      relative !important;

    /*
      Avoid second-card visual appearance.
    */

    border:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    overflow:
      visible !important;

    /*
      KPI → rail breathing room.
    */

    margin:
      8px 0 0 !important;

    height:
      190px !important;

    padding:
      57px 12px
      0 !important;
  }


  /* =========================================================
     8. RAIL
     ========================================================= */

  .sales-locked-track{
    position:
      relative !important;

    height:
      15px !important;

    border-radius:
      999px !important;
  }


  /* =========================================================
     9. LIVE CURRENT MARKER

     Keep independent from milestone checkpoints.
     ========================================================= */

  .sales-locked-current{
    top:
      -9px !important;

    left:
      clamp(
        42px,
        var(--locked-progress),
        calc(100% - 42px)
      ) !important;
  }


  .sales-locked-current span{
    min-width:
      80px !important;
  }


  .sales-locked-current-dot{
    top:
      50% !important;

    width:
      20px !important;

    height:
      20px !important;

    transform:
      translate(-50%,-50%) !important;
  }


  /* =========================================================
     10. MILESTONE CHECKPOINT LAYER

     LOCKED TARGET:
     checkpoint center ≈ 27–30px below rail center.
     ========================================================= */

  .sales-locked-milestones{
    position:
      absolute !important;

    display:
      block !important;

    left:
      12px !important;

    right:
      12px !important;

    /*
      Master padding-top = 57px.
      Track center ≈ 64.5px.

      Node row starts around ~78px.
      Typical node center ≈ 91–95px.

      Result:
      ≈ 27–30px below rail center.
    */

    top:
      79px !important;

    height:
      104px !important;

    margin:
      0 !important;
  }


  .sales-locked-milestone{
    position:
      absolute !important;

    display:
      block !important;

    top:
      0 !important;

    width:
      116px !important;

    transform:
      translateX(-50%) !important;

    text-align:
      center !important;
  }


  /*
     Keep canonical four rendered anchors.
  */

  .sales-locked-milestone:nth-child(1){
    left:
      8% !important;
  }

  .sales-locked-milestone:nth-child(2){
    left:
      36% !important;
  }

  .sales-locked-milestone:nth-child(3){
    left:
      64% !important;
  }

  .sales-locked-milestone:nth-child(4){
    left:
      92% !important;
  }


  /* =========================================================
     11. CHECKPOINT STEM

     Rail → checkpoint node.
     ========================================================= */

  .sales-locked-milestone::before{
    display:
      block !important;

    top:
      -16px !important;

    height:
      18px !important;

    width:
      1px !important;

    background:
      linear-gradient(
        180deg,
        rgba(63,204,247,.14),
        rgba(63,204,247,.48)
      ) !important;

    box-shadow:
      0 0 5px
      rgba(65,203,246,.10) !important;
  }


  /* =========================================================
     12. TYPOGRAPHY SPACING
     ========================================================= */

  .sales-locked-node-copy{
    margin-top:
      12px !important;
  }


  .sales-locked-node-copy strong{
    margin-top:
      6px !important;
  }


  .sales-locked-node-copy em{
    margin-top:
      3px !important;
  }


  .sales-locked-node-copy b{
    margin-top:
      6px !important;
  }

}


/* ============================================================
   ACTIVE AUDITED VIEWPORT
   561–760px

   Preserve same locked geometry, compacted.
   ============================================================ */

@media
  (min-width:561px)
  and
  (max-width:760px){


  .sales-locked-program-grid{
    grid-template-columns:
      minmax(0, 43%)
      minmax(0, 57%) !important;

    grid-template-rows:
      auto !important;
  }


  .sales-locked-identity{
    margin-top:
      38px !important;

    margin-right:
      8px !important;

    min-height:
      234px !important;
  }


  .sales-locked-kpis{
    grid-template-columns:
      minmax(0, 1.70fr)
      minmax(110px, .90fr) !important;

    gap:
      7px !important;

    margin:
      0 5px !important;
  }


  .sales-locked-kpi.measured{
    min-height:
      76px !important;

    padding:
      12px 11px !important;
  }


  .sales-locked-kpis
  .sales-locked-kpi:not(.measured){
    min-height:
      85px !important;

    padding:
      11px 9px !important;
  }


  .sales-locked-master{
    height:
      180px !important;

    margin-top:
      6px !important;

    padding:
      53px 8px
      0 !important;
  }


  /*
     Track center ≈ 60.5px.
     milestone node centers ≈ 88px.
     ≈ 27–29px below rail.
  */

  .sales-locked-milestones{
    left:
      8px !important;

    right:
      8px !important;

    top:
      74px !important;

    height:
      100px !important;
  }


  .sales-locked-milestone{
    width:
      104px !important;
  }


  .sales-locked-milestone::before{
    top:
      -14px !important;

    height:
      16px !important;
  }


  .sales-locked-milestone:nth-child(1){
    left:
      8% !important;
  }

  .sales-locked-milestone:nth-child(2){
    left:
      36% !important;
  }

  .sales-locked-milestone:nth-child(3){
    left:
      64% !important;
  }

  .sales-locked-milestone:nth-child(4){
    left:
      92% !important;
  }


  .sales-locked-current{
    left:
      clamp(
        39px,
        var(--locked-progress),
        calc(100% - 39px)
      ) !important;
  }

}


/* ============================================================
   TRUE MOBILE <=560
   Preserve stacked mobile architecture.
   ============================================================ */

@media(max-width:560px){

  .sales-locked-program-grid{
    display:
      grid !important;

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

    grid-template-rows:
      auto auto !important;
  }


  .sales-locked-identity{
    grid-column:
      1 !important;

    grid-row:
      1 !important;

    margin:
      0 !important;
  }


  .sales-locked-progress{
    grid-column:
      1 !important;

    grid-row:
      2 !important;

    margin:
      0 !important;
  }

}


/* ============================================================
   END SALES INCENTIVE - LOCKED DESIGN V14 MATRIX STRUCTURAL ALIGNMENT
   ============================================================ */


/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V15 AUDIT CALIBRATED BASELINE

   Audit-proven target:

   right.top  = 894.42
   left.top   = 932.41

   KEEP ~38px stagger.

   right.bottom must extend to left.bottom.

   Internal rail/milestones move downward while KPI row stays
   in the upper right workspace.
   ============================================================ */


/* ============================================================
   561px+ SHARED-BOTTOM ARCHITECTURE
   ============================================================ */

@media(min-width:561px){

  /* =========================================================
     MATRIX OWNS ONE COMMON BOTTOM
     ========================================================= */

  .sales-locked-program-grid{
    display:grid !important;

    grid-template-columns:
      minmax(0,44%)
      minmax(0,56%) !important;

    grid-template-rows:
      auto !important;

    /*
      Critical difference from V14:
      children stretch to common row bottom.
    */

    align-items:
      stretch !important;

    column-gap:
      0 !important;

    row-gap:
      0 !important;

    overflow:
      visible !important;
  }


  /* =========================================================
     LEFT CARD

     Starts lower through margin-top,
     but bottom remains anchored to grid-row bottom.
     ========================================================= */

  .sales-locked-identity{
    grid-column:
      1 !important;

    grid-row:
      1 !important;

    align-self:
      stretch !important;

    box-sizing:
      border-box !important;

    margin-top:
      42px !important;

    margin-right:
      12px !important;

    margin-bottom:
      0 !important;

    height:
      auto !important;

    min-height:
      0 !important;
  }


  /* =========================================================
     RIGHT WORKSPACE

     Highest top.
     Full grid-row height.
     ========================================================= */

  .sales-locked-progress{
    grid-column:
      2 !important;

    grid-row:
      1 !important;

    align-self:
      stretch !important;

    position:
      relative !important;

    box-sizing:
      border-box !important;

    margin:
      0 !important;

    height:
      auto !important;

    min-height:
      0 !important;

    border:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    overflow:
      visible !important;
  }


  /* =========================================================
     KPI ROW

     KEEP upper placement.
     ========================================================= */

  .sales-locked-kpis{
    position:
      relative !important;

    z-index:
      5 !important;

    margin-top:
      0 !important;
  }


  /* =========================================================
     PROGRESS MASTER

     Extend the lower working zone.
     ========================================================= */

  .sales-locked-master{
    position:
      relative !important;

    margin-top:
      8px !important;

    /*
      Larger internal working canvas.
    */

    height:
      336px !important;

    /*
      Push rail deeper into right workspace.
    */

    padding-top:
      175px !important;

    border:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    overflow:
      visible !important;
  }


  /* =========================================================
     RAIL
     ========================================================= */

  .sales-locked-track{
    height:
      15px !important;
  }


  /* =========================================================
     MILESTONE LAYER

     Must move with rail.
     ========================================================= */

  .sales-locked-milestones{
    position:
      absolute !important;

    display:
      block !important;

    left:
      12px !important;

    right:
      12px !important;

    /*
      V14 generic top ~79px.
      V15 +122px = ~201px.
    */

    top:
      201px !important;

    height:
      112px !important;

    margin:
      0 !important;
  }


  .sales-locked-milestone::before{
    top:
      -15px !important;

    height:
      17px !important;
  }


  /* canonical horizontal anchors */

  .sales-locked-milestone:nth-child(1){
    left:
      8% !important;
  }

  .sales-locked-milestone:nth-child(2){
    left:
      36% !important;
  }

  .sales-locked-milestone:nth-child(3){
    left:
      64% !important;
  }

  .sales-locked-milestone:nth-child(4){
    left:
      92% !important;
  }

}


/* ============================================================
   AUDITED 716px VIEWPORT
   ============================================================ */

@media
  (min-width:561px)
  and
  (max-width:760px){

  /*
    Current audited grid row = 463.56px.

    Preserve:
      right top = grid top
      left top  = grid top + ~38px

    Both bottoms = grid bottom.
  */

  .sales-locked-program-grid{
    grid-template-columns:
      minmax(0,43%)
      minmax(0,57%) !important;

    grid-template-rows:
      minmax(463px,auto) !important;

    align-items:
      stretch !important;
  }


  .sales-locked-identity{
    align-self:
      stretch !important;

    margin-top:
      38px !important;

    margin-right:
      8px !important;

    margin-bottom:
      0 !important;

    height:
      auto !important;

    min-height:
      0 !important;
  }


  .sales-locked-progress{
    align-self:
      stretch !important;

    margin:
      0 !important;

    height:
      auto !important;

    min-height:
      0 !important;
  }


  /*
    KEEP KPI positions almost identical to V14.
  */

  .sales-locked-kpis{
    margin:
      0 5px !important;
  }


  /*
    V14:
      master top    = 1016.24
      rail center   = 1076.72
      status bottom = 1182.89

    V15 target:
      master top stays near current location
      rail + milestones move ~122px down
      status bottom lands around 1305px
      leaving ~53px to shared bottom 1358px
  */

  .sales-locked-master{
    height:
      341px !important;

    margin-top:
      6px !important;

    padding:
      175px 8px
      0 !important;
  }


  .sales-locked-track{
    height:
      15px !important;
  }


  .sales-locked-milestones{
    left:
      8px !important;

    right:
      8px !important;

    top:
      196px !important;

    height:
      112px !important;
  }


  .sales-locked-milestone{
    width:
      104px !important;
  }


  .sales-locked-milestone::before{
    top:
      -14px !important;

    height:
      16px !important;
  }


  /*
    Keep current progress badge independent of milestone row.
  */

  .sales-locked-current{
    left:
      clamp(
        39px,
        var(--locked-progress),
        calc(100% - 39px)
      ) !important;
  }

}


/* ============================================================
   TRUE MOBILE
   ============================================================ */

@media(max-width:560px){

  .sales-locked-program-grid{
    grid-template-columns:
      minmax(0,1fr) !important;

    grid-template-rows:
      auto auto !important;

    align-items:
      stretch !important;
  }


  .sales-locked-identity{
    grid-column:
      1 !important;

    grid-row:
      1 !important;

    margin:
      0 !important;
  }


  .sales-locked-progress{
    grid-column:
      1 !important;

    grid-row:
      2 !important;

    margin:
      0 !important;
  }


  .sales-locked-master{
    height:
      auto !important;

    padding-top:
      50px !important;
  }

}


/* ============================================================
   END SALES INCENTIVE - LOCKED DESIGN V15 AUDIT CALIBRATED BASELINE
   ============================================================ */


/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V16 INTERNAL COMPOSITION

   Outer geometry already correct after V15.

   KEEP:
     right top above left by ~38px
     exact shared bottom
     two-column architecture
     open right workspace

   V16 only redistributes INTERNAL visual geometry.
   ============================================================ */


/* ============================================================
   561px+
   ============================================================ */

@media(min-width:561px){


  /* =========================================================
     1. OUTER MATRIX — PRESERVE V15
     ========================================================= */

  .sales-locked-program-grid{
    align-items:
      stretch !important;
  }


  .sales-locked-progress{
    align-self:
      stretch !important;

    border:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    overflow:
      visible !important;
  }


  /* =========================================================
     2. LEFT IDENTITY
     ONE PRIMARY LARGE CARD ONLY
     ========================================================= */

  .sales-locked-identity{
    box-sizing:
      border-box !important;

    /*
      V15 geometry is preserved.
      Only visual shell becomes explicit.
    */

    border:
      1px solid
      rgba(58,190,225,.30) !important;

    border-radius:
      5px !important;

    background:
      linear-gradient(
        180deg,
        rgba(4,24,35,.72) 0%,
        rgba(3,19,29,.58) 100%
      ) !important;

    box-shadow:
      inset 0 0 26px
      rgba(45,194,235,.025) !important;

    overflow:
      hidden !important;
  }


  /*
    Keep the subtle internal horizontal separators.
    They belong inside the ONE identity card.
  */

  .sales-locked-title{
    border-bottom-color:
      rgba(70,220,255,.08) !important;
  }


  /* =========================================================
     3. RIGHT MASTER
     REMOVE V15 ARTIFICIAL 175PX PADDING
     ========================================================= */

  .sales-locked-master{
    position:
      relative !important;

    /*
      Preserve V15 vertical owner height so the right
      workspace still shares the exact bottom.
    */

    height:
      341px !important;

    margin-top:
      6px !important;

    /*
      CRITICAL V16:
      no giant padding spacer.
    */

    padding:
      0 8px !important;

    border:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    overflow:
      visible !important;
  }


  /* =========================================================
     4. PROGRESS RAIL

     Position inside master independently.
     Locked reference puts rail well below KPI row,
     but nowhere near the V15 188px empty gap.
     ========================================================= */

  .sales-locked-track{
    position:
      absolute !important;

    left:
      8px !important;

    right:
      8px !important;

    /*
      master top + ~134px

      At audited geometry:
        master top ≈ 1037px
        rail center ≈ 1178px

      KPI bottom ≈ 1031px

      KPI → rail center ≈ 147px
      instead of V15 188px.
    */

    top:
      133px !important;

    width:
      auto !important;

    height:
      15px !important;

    margin:
      0 !important;

    border-radius:
      999px !important;
  }


  /* =========================================================
     5. LIVE PROGRESS BADGE

     Badge must visually belong to rail.
     ========================================================= */

  .sales-locked-current{
    position:
      absolute !important;

    /*
      Badge lives ~45px above rail center.
    */

    top:
      78px !important;

    left:
      clamp(
        42px,
        var(--locked-progress),
        calc(100% - 42px)
      ) !important;

    z-index:
      12 !important;
  }


  .sales-locked-current span{
    min-width:
      80px !important;

    margin:
      0 !important;
  }


  /* =========================================================
     6. LIVE DOT

     Same X as runtime progress,
     exactly centered on rail.
     ========================================================= */

  .sales-locked-current-dot{
    position:
      absolute !important;

    top:
      140.5px !important;

    width:
      20px !important;

    height:
      20px !important;

    transform:
      translate(-50%,-50%) !important;

    z-index:
      14 !important;
  }


  /* =========================================================
     7. MILESTONE LAYER

     Locked design has a substantial vertical stem below rail.
     Do NOT place nodes directly beneath the rail.
     ========================================================= */

  .sales-locked-milestones{
    position:
      absolute !important;

    display:
      block !important;

    left:
      8px !important;

    right:
      8px !important;

    /*
      Audited V15:
        master top = ~1037
        shared bottom = ~1379

      V16 target:
        milestone layer ≈ 1268
        node center ≈ 1281–1285
        status bottom ≈ 1360

      This leaves ~19px bottom breathing room.
    */

    top:
      231px !important;

    height:
      105px !important;

    margin:
      0 !important;
  }


  /* =========================================================
     8. MILESTONE STEMS

     Longer, matching the locked visual.
     ========================================================= */

  .sales-locked-milestone::before{
    display:
      block !important;

    /*
      Layer begins far below rail.
      Stem visually connects upward toward rail.
    */

    top:
      -91px !important;

    height:
      93px !important;

    width:
      1px !important;

    background:
      linear-gradient(
        180deg,
        rgba(61,200,242,.15) 0%,
        rgba(61,200,242,.30) 48%,
        rgba(61,200,242,.52) 100%
      ) !important;

    box-shadow:
      0 0 5px
      rgba(57,196,239,.10) !important;
  }


  /* =========================================================
     9. CANONICAL HORIZONTAL ANCHORS
     ========================================================= */

  .sales-locked-milestone:nth-child(1){
    left:
      8% !important;
  }

  .sales-locked-milestone:nth-child(2){
    left:
      36% !important;
  }

  .sales-locked-milestone:nth-child(3){
    left:
      64% !important;
  }

  .sales-locked-milestone:nth-child(4){
    left:
      92% !important;
  }


}


/* ============================================================
   AUDITED VIEWPORT 561–760px
   ============================================================ */

@media
  (min-width:561px)
  and
  (max-width:760px){


  /* Keep V15 outer architecture exactly */

  .sales-locked-program-grid{
    grid-template-columns:
      minmax(0,43%)
      minmax(0,57%) !important;

    grid-template-rows:
      minmax(463px,auto) !important;

    align-items:
      stretch !important;
  }


  .sales-locked-identity{
    margin-top:
      38px !important;

    margin-right:
      8px !important;

    margin-bottom:
      0 !important;

    align-self:
      stretch !important;

    min-height:
      0 !important;

    height:
      auto !important;
  }


  .sales-locked-progress{
    align-self:
      stretch !important;

    min-height:
      0 !important;

    height:
      auto !important;
  }


  /*
    KPI row remains where V15 already placed it.
  */

  .sales-locked-kpis{
    margin:
      0 5px !important;
  }


  /*
    Right internal coordinate space.
  */

  .sales-locked-master{
    height:
      341px !important;

    margin-top:
      6px !important;

    padding:
      0 8px !important;
  }


  /*
    RAIL
  */

  .sales-locked-track{
    top:
      133px !important;

    left:
      8px !important;

    right:
      8px !important;

    height:
      15px !important;
  }


  /*
    BADGE
  */

  .sales-locked-current{
    top:
      78px !important;

    left:
      clamp(
        39px,
        var(--locked-progress),
        calc(100% - 39px)
      ) !important;
  }


  /*
    CURRENT DOT
  */

  .sales-locked-current-dot{
    top:
      140.5px !important;
  }


  /*
    M1–M4 lower checkpoint region.
  */

  .sales-locked-milestones{
    left:
      8px !important;

    right:
      8px !important;

    top:
      231px !important;

    height:
      105px !important;
  }


  .sales-locked-milestone{
    width:
      104px !important;
  }


  /*
    Long locked-design stems.
  */

  .sales-locked-milestone::before{
    top:
      -91px !important;

    height:
      93px !important;
  }

}


/* ============================================================
   TRUE MOBILE
   Do not impose desktop absolute geometry.
   ============================================================ */

@media(max-width:560px){

  .sales-locked-master{
    height:
      auto !important;

    padding-top:
      50px !important;
  }


  .sales-locked-track{
    position:
      relative !important;

    top:
      auto !important;

    left:
      auto !important;

    right:
      auto !important;
  }


  .sales-locked-current{
    top:
      -8px !important;
  }


  .sales-locked-current-dot{
    top:
      50% !important;
  }


  .sales-locked-milestones{
    position:
      relative !important;

    top:
      auto !important;

    left:
      auto !important;

    right:
      auto !important;
  }


  .sales-locked-milestone::before{
    display:
      none !important;
  }

}


/* ============================================================
   END SALES INCENTIVE - LOCKED DESIGN V16 INTERNAL COMPOSITION
   ============================================================ */


/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V17 COMPACT MATRIX

   Audit-derived correction.

   PRIMARY CHANGE:
     LEFT policy:
       1 x 4  ->  2 x 2

   This removes the artificial ~150px left-side height.

   RIGHT is compressed to the same natural bottom.

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


/* ============================================================
   DESKTOP / TABLET HORIZONTAL MATRIX
   ============================================================ */

@media(min-width:561px){


  /* =========================================================
     1. MATRIX OWNER

     Allow natural compact row height.
     No old 463px minimum.
     ========================================================= */

  .sales-locked-program-grid{
    display:
      grid !important;

    grid-template-columns:
      minmax(0,44%)
      minmax(0,56%) !important;

    grid-template-rows:
      auto !important;

    align-items:
      stretch !important;

    column-gap:
      0 !important;

    row-gap:
      0 !important;

    overflow:
      visible !important;
  }


  /* =========================================================
     2. LEFT CARD

     Keep ~38px locked top stagger.
     Bottom follows common grid-row baseline.
     ========================================================= */

  .sales-locked-identity{
    align-self:
      stretch !important;

    margin-top:
      38px !important;

    margin-right:
      12px !important;

    margin-bottom:
      0 !important;

    height:
      auto !important;

    min-height:
      0 !important;

    box-sizing:
      border-box !important;

    border:
      1px solid
      rgba(58,190,225,.30) !important;

    border-radius:
      5px !important;

    background:
      linear-gradient(
        180deg,
        rgba(4,24,35,.72),
        rgba(3,19,29,.58)
      ) !important;

    overflow:
      hidden !important;
  }


  /* =========================================================
     3. CRITICAL LEFT FIX
     TRUE 2 COLUMN × 2 ROW POLICY GRID

     LOCKED VISUAL:
        METRIC          PACKAGE
        REQUIRED        MIN RANK
     ========================================================= */

  .sales-locked-policy{
    display:
      grid !important;

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

    grid-template-rows:
      repeat(2,75px) !important;

    grid-auto-flow:
      row !important;

    gap:
      0 !important;

    height:
      150px !important;

    min-height:
      0 !important;

    align-content:
      stretch !important;
  }


  .sales-locked-policy > div{
    box-sizing:
      border-box !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

    height:
      75px !important;

    padding-top:
      12px !important;

    padding-bottom:
      10px !important;
  }


  /*
     Column separator.
  */

  .sales-locked-policy > div:nth-child(odd){
    border-right:
      1px solid
      rgba(69,219,255,.08) !important;
  }


  /*
     Only first row gets horizontal separator.
  */

  .sales-locked-policy > div:nth-child(1),
  .sales-locked-policy > div:nth-child(2){
    border-bottom:
      1px solid
      rgba(69,219,255,.11) !important;
  }


  .sales-locked-policy > div:nth-child(3),
  .sales-locked-policy > div:nth-child(4){
    border-bottom:
      0 !important;
  }


  /* =========================================================
     4. RIGHT WORKSPACE
     ========================================================= */

  .sales-locked-progress{
    align-self:
      stretch !important;

    height:
      auto !important;

    min-height:
      0 !important;

    border:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    overflow:
      visible !important;
  }


  /* =========================================================
     5. KPI AREA
     KEEP CURRENT V16 SIZE / LOCATION
     ========================================================= */

  .sales-locked-kpis{
    margin-top:
      0 !important;
  }


  /* =========================================================
     6. COMPACT RIGHT MASTER

     KPI:
       ~116px

     gap:
       ~6px

     master:
       ~192px

     total:
       ~314px

     This naturally matches the new left-card height.
     ========================================================= */

  .sales-locked-master{
    position:
      relative !important;

    height:
      192px !important;

    min-height:
      0 !important;

    margin-top:
      6px !important;

    margin-bottom:
      0 !important;

    padding:
      0 8px !important;

    border:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    overflow:
      visible !important;
  }


  /* =========================================================
     7. RAIL

     MASTER TOP ~= KPI bottom + 6

     Target:
       rail center ~= KPI bottom + 55px
     ========================================================= */

  .sales-locked-track{
    position:
      absolute !important;

    left:
      8px !important;

    right:
      8px !important;

    top:
      41px !important;

    width:
      auto !important;

    height:
      15px !important;

    margin:
      0 !important;

    border-radius:
      999px !important;

    z-index:
      5 !important;
  }


  /* =========================================================
     8. CURRENT PROGRESS OWNER

     Current itself owns X.
     Children own Y relative to current.
     ========================================================= */

  .sales-locked-current{
    position:
      absolute !important;

    top:
      0 !important;

    left:
      clamp(
        42px,
        var(--locked-progress),
        calc(100% - 42px)
      ) !important;

    width:
      80px !important;

    height:
      60px !important;

    transform:
      translateX(-50%) !important;

    z-index:
      20 !important;

    pointer-events:
      none !important;
  }


  /* =========================================================
     9. BADGE
     Locked: just above rail.
     ========================================================= */

  .sales-locked-current > span{
    position:
      absolute !important;

    left:
      50% !important;

    top:
      -4px !important;

    min-width:
      80px !important;

    margin:
      0 !important;

    transform:
      translateX(-50%) !important;
  }


  /* =========================================================
     10. DOT
     EXACTLY CENTERED ON RAIL

     track:
       top 41
       height 15
       center 48.5
     ========================================================= */

  .sales-locked-current-dot{
    position:
      absolute !important;

    left:
      50% !important;

    top:
      48.5px !important;

    width:
      20px !important;

    height:
      20px !important;

    transform:
      translate(-50%,-50%) !important;

    z-index:
      25 !important;
  }


  /* =========================================================
     11. MILESTONE LAYER

     Node center target:
       ~44px below rail center.

     Existing node center offset inside layer:
       ~12-14px.

     therefore:
       layer top ~= 80px
     ========================================================= */

  .sales-locked-milestones{
    position:
      absolute !important;

    display:
      block !important;

    left:
      8px !important;

    right:
      8px !important;

    top:
      80px !important;

    height:
      106px !important;

    margin:
      0 !important;
  }


  .sales-locked-milestone{
    top:
      0 !important;
  }


  /* =========================================================
     12. SHORT LOCKED-DESIGN STEMS

     V16 = ~93px      WRONG
     V17 = ~32px
     ========================================================= */

  .sales-locked-milestone::before{
    display:
      block !important;

    top:
      -31px !important;

    height:
      33px !important;

    width:
      1px !important;

    background:
      linear-gradient(
        180deg,
        rgba(61,200,242,.18),
        rgba(61,200,242,.52)
      ) !important;

    box-shadow:
      0 0 5px
      rgba(57,196,239,.10) !important;
  }


  /* =========================================================
     13. CANONICAL X POSITIONS
     ========================================================= */

  .sales-locked-milestone:nth-child(1){
    left:
      8% !important;
  }

  .sales-locked-milestone:nth-child(2){
    left:
      36% !important;
  }

  .sales-locked-milestone:nth-child(3){
    left:
      64% !important;
  }

  .sales-locked-milestone:nth-child(4){
    left:
      92% !important;
  }

}


/* ============================================================
   AUDITED VIEWPORT 561–760px
   ============================================================ */

@media
  (min-width:561px)
  and
  (max-width:760px){


  .sales-locked-program-grid{
    grid-template-columns:
      minmax(0,43%)
      minmax(0,57%) !important;

    /*
      CRITICAL:
      remove V15/V16 fixed 463px row.
    */

    grid-template-rows:
      auto !important;

    align-items:
      stretch !important;
  }


  .sales-locked-identity{
    margin-top:
      38px !important;

    margin-right:
      8px !important;

    margin-bottom:
      0 !important;

    height:
      auto !important;

    min-height:
      0 !important;
  }


  .sales-locked-policy{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    grid-template-rows:
      repeat(2,75px) !important;

    height:
      150px !important;
  }


  .sales-locked-policy > div{
    height:
      75px !important;
  }


  .sales-locked-progress{
    height:
      auto !important;

    min-height:
      0 !important;
  }


  .sales-locked-master{
    height:
      192px !important;

    margin-top:
      6px !important;

    padding:
      0 8px !important;
  }


  .sales-locked-track{
    top:
      41px !important;

    left:
      8px !important;

    right:
      8px !important;

    height:
      15px !important;
  }


  .sales-locked-current{
    top:
      0 !important;

    left:
      clamp(
        39px,
        var(--locked-progress),
        calc(100% - 39px)
      ) !important;

    width:
      80px !important;

    height:
      60px !important;

    transform:
      translateX(-50%) !important;
  }


  .sales-locked-current > span{
    left:
      50% !important;

    top:
      -4px !important;

    transform:
      translateX(-50%) !important;
  }


  .sales-locked-current-dot{
    left:
      50% !important;

    top:
      48.5px !important;

    transform:
      translate(-50%,-50%) !important;
  }


  .sales-locked-milestones{
    left:
      8px !important;

    right:
      8px !important;

    top:
      80px !important;

    height:
      106px !important;
  }


  .sales-locked-milestone{
    width:
      104px !important;
  }


  .sales-locked-milestone::before{
    top:
      -31px !important;

    height:
      33px !important;
  }

}


/* ============================================================
   TRUE MOBILE
   Preserve stacked architecture.
   ============================================================ */

@media(max-width:560px){


  .sales-locked-policy{
    grid-template-columns:
      minmax(0,1fr) !important;

    grid-template-rows:
      auto !important;

    height:
      auto !important;
  }


  .sales-locked-policy > div{
    height:
      auto !important;
  }


  .sales-locked-master{
    height:
      auto !important;

    padding-top:
      50px !important;
  }


  .sales-locked-track{
    position:
      relative !important;

    top:
      auto !important;

    left:
      auto !important;

    right:
      auto !important;
  }


  .sales-locked-current{
    top:
      -8px !important;

    transform:
      translateX(-50%) !important;
  }


  .sales-locked-current > span{
    position:
      relative !important;

    top:
      auto !important;

    left:
      auto !important;

    transform:
      none !important;
  }


  .sales-locked-current-dot{
    left:
      50% !important;

    top:
      50% !important;
  }


  .sales-locked-milestones{
    position:
      relative !important;

    top:
      auto !important;

    left:
      auto !important;

    right:
      auto !important;

    height:
      auto !important;
  }


  .sales-locked-milestone::before{
    display:
      none !important;
  }

}


/* ============================================================
   END SALES INCENTIVE - LOCKED DESIGN V17 COMPACT MATRIX
   ============================================================ */


/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V18 DOT MILESTONE PRECISION

   V17 live audit:
     badge center = 8.88% of rail
     dot center   = 50.00% of rail

   Root cause:
     current dot was positioned relative to master.

   V18:
     dot becomes child-positioned relative to .sales-locked-current
     and shares exact X axis with badge/current progress.

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

@media(min-width:561px){


  /* =========================================================
     CURRENT OWNER
     ========================================================= */

  .sales-locked-current{
    position:
      absolute !important;

    top:
      0 !important;

    left:
      clamp(
        42px,
        var(--locked-progress),
        calc(100% - 42px)
      ) !important;

    width:
      80px !important;

    height:
      60px !important;

    transform:
      translateX(-50%) !important;

    z-index:
      20 !important;

    pointer-events:
      none !important;
  }


  /* =========================================================
     BADGE
     ========================================================= */

  .sales-locked-current > span{
    position:
      absolute !important;

    left:
      50% !important;

    top:
      -4px !important;

    min-width:
      80px !important;

    transform:
      translateX(-50%) !important;

    margin:
      0 !important;
  }


  /* =========================================================
     DOT
     CRITICAL FIX:
     attach X to CURRENT, not MASTER.
     ========================================================= */

  .sales-locked-current .sales-locked-current-dot{
    position:
      absolute !important;

    left:
      50% !important;

    top:
      48.5px !important;

    width:
      20px !important;

    height:
      20px !important;

    transform:
      translate(-50%,-50%) !important;

    z-index:
      25 !important;
  }


  /*
    Neutralize any master-relative V16/V17 dot rule.
  */

  .sales-locked-master > .sales-locked-current-dot{
    left:
      auto !important;
  }


  /* =========================================================
     RAIL
     ========================================================= */

  .sales-locked-track{
    top:
      41px !important;

    height:
      15px !important;
  }


  /* =========================================================
     MILESTONES
     V17 = 44–45px below rail
     V18 target ≈ 36–38px
     ========================================================= */

  .sales-locked-milestones{
    top:
      72px !important;

    height:
      114px !important;
  }


  .sales-locked-milestone::before{
    top:
      -23px !important;

    height:
      25px !important;
  }


  /* =========================================================
     KPI PROPORTION REFINEMENT
     ========================================================= */

  .sales-locked-kpis{
    grid-template-columns:
      minmax(0,1.72fr)
      minmax(112px,.88fr) !important;

    gap:
      9px !important;
  }

}


/* ============================================================
   AUDITED 561–760px RANGE
   ============================================================ */

@media
  (min-width:561px)
  and
  (max-width:760px){


  .sales-locked-current{
    left:
      clamp(
        39px,
        var(--locked-progress),
        calc(100% - 39px)
      ) !important;
  }


  .sales-locked-current .sales-locked-current-dot{
    left:
      50% !important;

    top:
      48.5px !important;
  }


  .sales-locked-milestones{
    top:
      72px !important;

    height:
      114px !important;
  }


  .sales-locked-milestone::before{
    top:
      -23px !important;

    height:
      25px !important;
  }


  .sales-locked-kpis{
    grid-template-columns:
      minmax(0,1.72fr)
      minmax(112px,.88fr) !important;

    gap:
      8px !important;
  }

}


/* ============================================================
   TRUE MOBILE
   ============================================================ */

@media(max-width:560px){

  .sales-locked-current .sales-locked-current-dot{
    left:
      50% !important;

    top:
      50% !important;
  }

}


/* ============================================================
   END SALES INCENTIVE - LOCKED DESIGN V18 DOT MILESTONE PRECISION
   ============================================================ */


/* ============================================================
   SALES INCENTIVE - LOCKED DESIGN V19 KPI RAIL CALIBRATION

   V19 preserves the successful compact V17/V18 matrix.

   ONLY vertical composition is calibrated.

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


@media(min-width:561px){


  /* =========================================================
     1. KPI WORKSPACE

     Raise the complete KPI region.

     This moves both MEASURED and NEXT upward while preserving
     their internal alignment and width ratio.
     ========================================================= */

  .sales-locked-kpis{
    position:
      relative !important;

    top:
      -20px !important;
  }


  /* =========================================================
     2. MEASURED KPI

     The measured block starts lower than NEXT because the KPI
     row aligns its children at the bottom.

     Locked reference requires MEASURED to sit visibly higher,
     so reduce that artificial top difference.
     ========================================================= */

  .sales-locked-kpi.measured{
    align-self:
      start !important;

    height:
      96px !important;

    min-height:
      96px !important;
  }


  /* =========================================================
     3. MASTER

     Do NOT move the entire master.

     Its outer height still establishes the shared-bottom
     relationship.

     Children receive independent locked positions.
     ========================================================= */

  .sales-locked-master{
    height:
      192px !important;

    margin-top:
      6px !important;

    padding:
      0 8px !important;
  }


  /* =========================================================
     4. PROGRESS BADGE

     Raise badge relative to master.
     ========================================================= */

  .sales-locked-current{
    top:
      -24px !important;

    z-index:
      20 !important;
  }


  /* =========================================================
     5. RAIL

     V18 top = 41px

     V19 top = 11px

     exact lift = 30px
     ========================================================= */

  .sales-locked-track{
    top:
      11px !important;

    height:
      15px !important;
  }


  /* =========================================================
     6. CURRENT DOT

     IMPORTANT:
     The live DOM proves the dot is not positioned by the
     descendant assumption used in V18.

     Position the canonical dot directly against the MASTER
     coordinate space.

     Rail:
       top    11px
       height 15px
       center 18.5px

     Therefore dot top-center = 18.5px.
     ========================================================= */

  .sales-locked-current-dot{
    top:
      18.5px !important;

    /*
      X remains controlled by the existing runtime/visual
      progress positioning. Do not force left:50%.
    */

    width:
      20px !important;

    height:
      20px !important;

    transform:
      translate(-50%,-50%) !important;

    z-index:
      30 !important;
  }


  /* =========================================================
     7. REMOVE V18 FALSE MASTER-CENTERING BEHAVIOR
     ========================================================= */

  .sales-locked-master > .sales-locked-current-dot{
    top:
      18.5px !important;
  }


  /* =========================================================
     8. MILESTONE ROW

     V18 top = 72px
     V19 top = 62px

     Only 10px lift.

     Since rail lifts 30px but milestones only 10px:
       old rail->node ≈ 36px
       new rail->node ≈ 56px

     This matches the locked reference much better.
     ========================================================= */

  .sales-locked-milestones{
    top:
      62px !important;

    height:
      124px !important;
  }


  /* =========================================================
     9. STEM

     Because rail moves farther away from milestones,
     reconnect with a moderate stem.

     Not V16's huge 93px.
     ========================================================= */

  .sales-locked-milestone::before{
    top:
      -43px !important;

    height:
      45px !important;
  }

}


/* ============================================================
   AUDITED 561–760PX RANGE
   ============================================================ */

@media
  (min-width:561px)
  and
  (max-width:760px){


  .sales-locked-kpis{
    top:
      -20px !important;
  }


  .sales-locked-kpi.measured{
    align-self:
      start !important;

    height:
      96px !important;

    min-height:
      96px !important;
  }


  .sales-locked-current{
    top:
      -24px !important;
  }


  .sales-locked-track{
    top:
      11px !important;
  }


  .sales-locked-current-dot{
    top:
      18.5px !important;
  }


  .sales-locked-master > .sales-locked-current-dot{
    top:
      18.5px !important;
  }


  .sales-locked-milestones{
    top:
      62px !important;

    height:
      124px !important;
  }


  .sales-locked-milestone::before{
    top:
      -43px !important;

    height:
      45px !important;
  }

}


/* ============================================================
   TRUE MOBILE
   ============================================================ */

@media(max-width:560px){


  .sales-locked-kpis{
    top:
      auto !important;
  }


  .sales-locked-kpi.measured{
    height:
      auto !important;

    min-height:
      0 !important;
  }


  .sales-locked-current{
    top:
      -8px !important;
  }


  .sales-locked-track{
    top:
      auto !important;
  }


  .sales-locked-milestones{
    top:
      auto !important;

    height:
      auto !important;
  }

}


/* ============================================================
   END SALES INCENTIVE - LOCKED DESIGN V19 KPI RAIL CALIBRATION
   ============================================================ */

/* ============================================================
   SALES INCENTIVE — V20 KPI CALIBRATED POSITION
   Browser-forensic calibrated

   Locked geometry:
   - Left identity stagger: ~38px
   - KPI group actual height: ~115.82px
   - Target KPI above left top: ~40%
   - Target KPI overlap: ~60%
   - Preserve exact shared bottom alignment
   - Move KPI wrapper ONLY
   ============================================================ */

@media (min-width: 561px) {

  .sales-locked-kpis {
    position: relative !important;

    /*
      Previous V19:
        top: -20px

      Calibrated V20:
        top: -8px

      Effective movement:
        12px DOWN

      Expected geometry:
        ~39.7% above left-card top
        ~60.3% overlapping left-card height
    */
    top: -8px !important;
  }

}


/* Mobile remains canonical stacked layout */
@media (max-width: 560px) {

  .sales-locked-kpis {
    top: auto !important;
  }

}

/* ============================================================
   END SALES INCENTIVE — V20 KPI CALIBRATED POSITION
   ============================================================ */


/* ============================================================
   SALES INCENTIVE — V21 LOCKED PROGRESS COMPOSITION

   Browser-forensic calibrated at 716px viewport.

   PRESERVE:
   - KPI top = -8px
   - left identity stagger = ~38px
   - exact shared bottom
   - master dimensions
   - milestone vertical position

   CALIBRATED:
   - percent badge owner = -10px
   - rail = 18px
   - current dot = exact rail center
   ============================================================ */

@media (min-width: 561px) {

  /* Preserve the calibrated 40/60 KPI overlap */
  .sales-locked-kpis {
    position: relative !important;
    top: -8px !important;
  }

  /* Percentage badge owner */
  .sales-locked-current {
    top: -10px !important;
  }

  /* Progress rail */
  .sales-locked-track {
    top: 18px !important;
  }

  /*
    Dot is a child of the rail.
    Center it against the rail itself.
  */
  .sales-locked-current-dot {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

}


/* Preserve canonical stacked mobile behavior */
@media (max-width: 560px) {

  .sales-locked-kpis {
    top: auto !important;
  }

}

/* ============================================================
   END SALES INCENTIVE — V21 LOCKED PROGRESS COMPOSITION
   ============================================================ */


/* ============================================================
   PREMONEON SALES INCENTIVE
   V22 — FINAL LOCKED VISUAL REFERENCE

   SOURCE OF TRUTH:
   approved dark futuristic matrix layout

   Goals:
   - compact premium left identity card
   - open right KPI / progress workspace
   - KPI contents vertically balanced
   - percent-only progress badge
   - wide glowing rail
   - achieved/check, current/purple, locked/hollow nodes
   - compact milestone typography
   - footer telemetry strip
   - preserve canonical runtime data
   ============================================================ */


/* ============================================================
   HORIZONTAL MATRIX — DESKTOP/TABLET
   ============================================================ */

@media (min-width:561px) {

  /* ----------------------------------------------------------
     OUTER PROGRAM
     Remove dominant enclosing-card appearance.
     ---------------------------------------------------------- */

  .sales-locked-program {
    position:relative !important;
    overflow:visible !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;
    box-shadow:none !important;
  }


  /* ----------------------------------------------------------
     MAIN MATRIX
     ---------------------------------------------------------- */

  .sales-locked-program-grid {
    display:grid !important;

    grid-template-columns:
      minmax(0,43%)
      minmax(0,57%) !important;

    grid-template-rows:
      auto !important;

    column-gap:
      18px !important;

    row-gap:
      0 !important;

    align-items:
      stretch !important;

    position:relative !important;
    overflow:visible !important;
  }


  /* ----------------------------------------------------------
     LEFT PROGRAM CARD
     ---------------------------------------------------------- */

  .sales-locked-identity {
    position:relative !important;

    align-self:
      stretch !important;

    margin:
      36px 0 0 !important;

    padding:
      22px 24px 20px !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

    height:
      auto !important;

    box-sizing:
      border-box !important;

    border:
      1px solid rgba(48,206,244,.36) !important;

    border-radius:
      6px !important;

    background:
      linear-gradient(
        180deg,
        rgba(4,23,35,.86),
        rgba(3,17,27,.78)
      ) !important;

    box-shadow:
      inset 0 0 26px rgba(35,192,239,.028),
      0 0 22px rgba(0,0,0,.12) !important;

    overflow:
      hidden !important;
  }


  .sales-locked-id-head {
    align-items:
      flex-start !important;
  }


  .sales-locked-title {
    margin-top:
      22px !important;

    padding-bottom:
      18px !important;

    border-bottom:
      1px solid rgba(77,216,249,.10) !important;
  }


  .sales-locked-policy {
    display:grid !important;

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


  .sales-locked-policy > div {
    min-height:
      78px !important;

    padding:
      16px 14px !important;
  }


  /* ----------------------------------------------------------
     RIGHT OPEN WORKSPACE
     ---------------------------------------------------------- */

  .sales-locked-progress {
    position:relative !important;

    align-self:
      stretch !important;

    margin:
      0 !important;

    padding:
      0 !important;

    min-width:
      0 !important;

    height:
      auto !important;

    border:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    overflow:
      visible !important;
  }


  /* ----------------------------------------------------------
     TOP KPI GROUP
     ---------------------------------------------------------- */

  .sales-locked-kpis {
    position:relative !important;

    top:
      0 !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1.75fr)
      minmax(150px,.82fr) !important;

    gap:
      14px !important;

    align-items:
      stretch !important;

    margin:
      0 4px !important;

    padding:
      0 !important;
  }


  .sales-locked-kpi {
    box-sizing:
      border-box !important;

    display:flex !important;

    flex-direction:
      column !important;

    justify-content:
      center !important;

    min-height:
      104px !important;

    padding:
      18px 20px 15px !important;

    border-radius:
      6px !important;

    background:
      linear-gradient(
        180deg,
        rgba(5,24,36,.72),
        rgba(3,17,27,.62)
      ) !important;

    box-shadow:
      inset 0 0 20px rgba(31,179,225,.02) !important;
  }


  .sales-locked-kpi.measured {
    border:
      1px solid rgba(45,187,229,.15) !important;
  }


  .sales-locked-kpi.next {
    border:
      1px solid rgba(234,181,42,.16) !important;
  }


  .sales-locked-kpi small {
    margin:
      0 !important;
  }


  .sales-locked-kpi strong {
    margin-top:
      8px !important;

    line-height:
      1 !important;
  }


  .sales-locked-kpi > span {
    margin-top:
      12px !important;
  }


  /* ----------------------------------------------------------
     MASTER LOWER WORKSPACE
     ---------------------------------------------------------- */

  .sales-locked-master {
    position:relative !important;

    height:
      202px !important;

    margin:
      18px 0 0 !important;

    padding:
      0 10px !important;

    border:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    overflow:
      visible !important;
  }


  /* ----------------------------------------------------------
     PERCENTAGE BADGE
     ---------------------------------------------------------- */

  .sales-locked-current {
    position:absolute !important;

    top:
      2px !important;

    left:
      clamp(
        42px,
        var(--locked-progress),
        calc(100% - 42px)
      ) !important;

    width:
      78px !important;

    height:
      42px !important;

    transform:
      translateX(-50%) !important;

    z-index:
      30 !important;
  }


  .sales-locked-current > span {
    position:absolute !important;

    top:
      0 !important;

    left:
      50% !important;

    min-width:
      70px !important;

    padding:
      8px 11px !important;

    margin:
      0 !important;

    transform:
      translateX(-50%) !important;

    text-align:
      center !important;

    line-height:
      1 !important;
  }


  .sales-locked-current > span b {
    display:
      none !important;
  }


  .sales-locked-current > i {
    position:absolute !important;

    top:
      29px !important;

    left:
      50% !important;

    width:
      1px !important;

    height:
      24px !important;

    transform:
      translateX(-50%) !important;
  }


  /* ----------------------------------------------------------
     PROGRESS RAIL
     ---------------------------------------------------------- */

  .sales-locked-track {
    position:absolute !important;

    top:
      48px !important;

    left:
      10px !important;

    right:
      10px !important;

    width:
      auto !important;

    height:
      17px !important;

    margin:
      0 !important;

    border-radius:
      999px !important;

    overflow:
      visible !important;

    background:
      rgba(45,70,88,.62) !important;

    box-shadow:
      inset 0 0 10px rgba(0,0,0,.7),
      0 0 16px rgba(42,187,232,.05) !important;
  }


  .sales-locked-fill {
    position:absolute !important;

    top:
      0 !important;

    left:
      0 !important;

    bottom:
      0 !important;

    width:
      var(--locked-progress) !important;

    border-radius:
      inherit !important;

    background:
      linear-gradient(
        90deg,
        #22e7f3 0%,
        #32bff9 34%,
        #6978ff 67%,
        #ba44ef 100%
      ) !important;

    box-shadow:
      0 0 13px rgba(47,219,255,.35) !important;
  }


  .sales-locked-current-dot {
    position:absolute !important;

    left:
      var(--locked-progress) !important;

    top:
      50% !important;

    width:
      20px !important;

    height:
      20px !important;

    transform:
      translate(-50%,-50%) !important;

    z-index:
      35 !important;
  }


  /* ----------------------------------------------------------
     MILESTONE LAYER
     ---------------------------------------------------------- */

  .sales-locked-milestones {
    position:absolute !important;

    display:block !important;

    top:
      105px !important;

    left:
      10px !important;

    right:
      10px !important;

    height:
      92px !important;

    margin:
      0 !important;
  }


  .sales-locked-milestone {
    position:absolute !important;

    top:
      0 !important;

    width:
      108px !important;

    transform:
      translateX(-50%) !important;

    text-align:
      center !important;
  }


  /* Dynamic milestone positions remain controlled by inline left. */


  .sales-locked-milestone::before {
    display:block !important;

    content:"" !important;

    position:absolute !important;

    left:
      50% !important;

    top:
      -39px !important;

    width:
      1px !important;

    height:
      39px !important;

    transform:
      translateX(-50%) !important;

    background:
      linear-gradient(
        180deg,
        rgba(48,203,244,.16),
        rgba(48,203,244,.46)
      ) !important;
  }


  /* ----------------------------------------------------------
     CHECKPOINT NODES
     ---------------------------------------------------------- */

  .sales-locked-node {
    width:
      24px !important;

    height:
      24px !important;

    margin:
      0 auto !important;

    border-radius:
      50% !important;

    display:flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    box-sizing:
      border-box !important;
  }


  .sales-locked-node span {
    display:flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;
  }


  .sales-locked-milestone.achieved .sales-locked-node {
    border:
      1px solid #25e4f3 !important;

    background:
      #21ddeb !important;

    color:
      #03151d !important;

    box-shadow:
      0 0 12px rgba(31,224,243,.28) !important;
  }


  .sales-locked-milestone.next .sales-locked-node {
    border:
      2px solid #a645ec !important;

    background:
      rgba(100,37,142,.12) !important;

    box-shadow:
      0 0 13px rgba(166,69,236,.30) !important;
  }


  .sales-locked-milestone.upcoming .sales-locked-node {
    border:
      2px solid rgba(69,126,158,.70) !important;

    background:
      rgba(2,17,27,.94) !important;

    box-shadow:
      none !important;
  }


  /* ----------------------------------------------------------
     MILESTONE COPY
     amount / USDT
     M1...
     status
     ---------------------------------------------------------- */

  .sales-locked-node-copy {
    display:grid !important;

    grid-template-columns:
      auto auto !important;

    justify-content:
      center !important;

    align-items:
      baseline !important;

    column-gap:
      4px !important;

    row-gap:
      3px !important;

    margin-top:
      10px !important;
  }


  .sales-locked-node-copy strong {
    grid-column:
      1 !important;

    grid-row:
      1 !important;

    margin:
      0 !important;
  }


  .sales-locked-node-copy em {
    grid-column:
      2 !important;

    grid-row:
      1 !important;

    margin:
      0 !important;
  }


  .sales-locked-node-copy small {
    grid-column:
      1 / 3 !important;

    grid-row:
      2 !important;

    margin:
      0 !important;
  }


  .sales-locked-node-copy b {
    grid-column:
      1 / 3 !important;

    grid-row:
      3 !important;

    margin:
      1px 0 0 !important;
  }


  /* ----------------------------------------------------------
     TELEMETRY FOOTER
     ---------------------------------------------------------- */

  .sales-locked-telemetry {
    display:grid !important;

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

    margin-top:
      26px !important;

    border:
      1px solid rgba(49,195,235,.25) !important;

    border-radius:
      6px !important;

    background:
      rgba(3,17,27,.72) !important;

    overflow:
      hidden !important;
  }


  .sales-telemetry-cell {
    min-width:
      0 !important;

    padding:
      18px 16px !important;
  }

}


/* ============================================================
   561–760px COMPACT HORIZONTAL VERSION
   ============================================================ */

@media
  (min-width:561px)
  and
  (max-width:760px) {

  .sales-locked-program-grid {
    grid-template-columns:
      minmax(0,43%)
      minmax(0,57%) !important;

    column-gap:
      8px !important;
  }


  .sales-locked-identity {
    margin-top:
      38px !important;

    padding:
      17px 20px 14px !important;
  }


  .sales-locked-kpis {
    grid-template-columns:
      minmax(0,1.72fr)
      minmax(112px,.88fr) !important;

    gap:
      8px !important;

    margin:
      0 5px !important;
  }


  .sales-locked-kpi {
    min-height:
      96px !important;

    padding:
      12px 14px !important;
  }


  .sales-locked-master {
    height:
      192px !important;

    margin-top:
      14px !important;

    padding:
      0 8px !important;
  }


  .sales-locked-current {
    top:
      0 !important;
  }


  .sales-locked-track {
    top:
      46px !important;

    left:
      8px !important;

    right:
      8px !important;
  }


  .sales-locked-milestones {
    top:
      101px !important;

    left:
      8px !important;

    right:
      8px !important;

    height:
      86px !important;
  }


  .sales-locked-milestone {
    width:
      82px !important;
  }


  .sales-locked-milestone::before {
    top:
      -38px !important;

    height:
      38px !important;
  }


  .sales-locked-node {
    width:
      22px !important;

    height:
      22px !important;
  }


  .sales-locked-node-copy {
    column-gap:
      3px !important;

    row-gap:
      2px !important;

    margin-top:
      8px !important;
  }


  .sales-locked-telemetry {
    grid-template-columns:
      repeat(5,minmax(0,1fr)) !important;
  }


  .sales-telemetry-cell {
    padding:
      13px 10px !important;
  }

}


/* ============================================================
   TRUE MOBILE
   Preserve stacked architecture.
   ============================================================ */

@media(max-width:560px) {

  .sales-locked-program {
    border:
      1px solid rgba(58,207,247,.14) !important;

    border-radius:
      6px !important;
  }


  .sales-locked-program-grid {
    grid-template-columns:
      minmax(0,1fr) !important;

    grid-template-rows:
      auto auto !important;
  }


  .sales-locked-identity {
    margin:
      0 !important;
  }


  .sales-locked-progress {
    margin-top:
      14px !important;
  }


  .sales-locked-kpis {
    top:
      auto !important;
  }


  .sales-locked-master {
    height:
      auto !important;

    padding-top:
      52px !important;
  }


  .sales-locked-current-dot {
    left:
      var(--locked-progress) !important;

    top:
      50% !important;
  }

}


/* ============================================================
   END V22 FINAL LOCKED VISUAL REFERENCE
   ============================================================ */


/* ============================================================
   PREMONEON SALES INCENTIVE
   V23 — LOCKED SPACING CALIBRATION

   ONLY:
   1. Program header composition +25px DOWN
   2. Lower progress composition +20px DOWN

   KEEP:
   - left identity card
   - KPI cards
   - right KPI dimensions
   - progress geometry internally
   - telemetry footer
   ============================================================ */

@media (min-width: 561px) {

  /* ----------------------------------------------------------
     HEADER
     ACTIVE PROGRAMS
     MILESTONE PROGRAM MATRIX
     description
     SalesIncentiveReadModule
     ---------------------------------------------------------- */

  .sales-locked-program-head {
    position: relative !important;
    transform: translateY(25px) !important;
  }


  /* ----------------------------------------------------------
     LOWER RIGHT WORKSPACE

     Moves TOGETHER:
     - percentage badge
     - rail
     - live dot
     - milestone stems
     - milestone nodes
     - M1/M2/M3/M4 copy

     KPI cards remain fixed.
     ---------------------------------------------------------- */

  .sales-locked-master {
    transform: translateY(20px) !important;
  }

}


/* Do not force desktop offsets into true mobile */
@media (max-width: 560px) {

  .sales-locked-program-head,
  .sales-locked-master {
    transform: none !important;
  }

}

/* ============================================================
   END V23 — LOCKED SPACING CALIBRATION
   ============================================================ */


/* ============================================================
   PREMONEON SALES INCENTIVE
   V24 — PREMIUM POLICY VALUE ALIGNMENT

   Goal:
   - labels and values share the same left axis
   - icon stays as visual anchor
   - no right-biased values
   - stronger premium information hierarchy
   ============================================================ */

@media (min-width:561px) {

  .sales-locked-policy > div {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 26px minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;

    column-gap: 10px !important;
    row-gap: 5px !important;

    align-items: start !important;
    justify-items: start !important;

    text-align: left !important;
  }


  /* Label row */
  .sales-locked-policy > div > small {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;

    margin: 0 !important;

    text-align: left !important;
  }


  /* Icon sits on the same visual axis */
  .sales-locked-policy > div > small
  .sales-policy-semantic-icon {
    position: absolute !important;

    left: 0 !important;
    top: 50% !important;

    transform: translateY(-50%) !important;
  }


  /* Value directly below its label */
  .sales-locked-policy > div > strong {
    grid-column: 2 !important;
    grid-row: 2 !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    text-align: left !important;

    justify-self: start !important;
    align-self: start !important;
  }

}


/* Mobile keeps the same left-aligned hierarchy */
@media (max-width:560px) {

  .sales-locked-policy > div,
  .sales-locked-policy > div > small,
  .sales-locked-policy > div > strong {
    text-align: left !important;
    justify-items: start !important;
    justify-content: flex-start !important;
  }

}

/* ============================================================
   END V24 — PREMIUM POLICY VALUE ALIGNMENT
   ============================================================ */


/* ============================================================
   PREMONEON SALES INCENTIVE
   V25 — KPI GROUP MICRO LIFT

   Move ONLY:
   - MEASURED VOLUME container
   - NEXT MILESTONE container

   Direction:
   - 5px UP

   Preserve:
   - existing KPI top calibration
   - left card
   - progress master
   - percentage badge
   - rail
   - milestones
   - telemetry
   ============================================================ */

@media (min-width:561px) {

  .sales-locked-kpis {
    transform: translateY(-5px) !important;
  }

}

@media (max-width:560px) {

  .sales-locked-kpis {
    transform: none !important;
  }

}

/* ============================================================
   END V25 — KPI GROUP MICRO LIFT
   ============================================================ */


/* ============================================================
   SALES INCENTIVE V26 — VERIFIED REWARD DISPLAY
   Visual only. No rail positioning changes.
   ============================================================ */

.sales-locked-reward {
  display:block !important;

  margin-top:5px !important;

  min-height:22px !important;

  color:#8ea6b1 !important;

  font-size:.34rem !important;
  font-weight:800 !important;

  line-height:1.35 !important;

  letter-spacing:.045em !important;

  text-align:center !important;

  text-transform:uppercase !important;
}

.sales-locked-milestone.achieved
.sales-locked-reward {
  color:#6fe9d1 !important;
}

.sales-locked-milestone.next
.sales-locked-reward {
  color:#c4a3ff !important;
}

.sales-locked-milestone.upcoming
.sales-locked-reward {
  opacity:.72 !important;
}

@media(max-width:760px) {

  .sales-locked-reward {
    margin-top:3px !important;

    text-align:left !important;
  }

}

/* ============================================================
   END V26 — VERIFIED REWARD DISPLAY
   ============================================================ */


/* ============================================================
   SALES INCENTIVE V27 — REWARD LABEL VISIBILITY

   Scope:
   - Reward names ONLY
   - Preserve rail geometry
   - Preserve milestone positions
   - Preserve node positions
   - Preserve locked V22 composition
   ============================================================ */

@media (min-width: 761px) {

  .sales-locked-reward {
    display: block !important;

    width: 100% !important;
    max-width: 118px !important;

    margin:
      6px auto 0 !important;

    min-height:
      24px !important;

    font-size:
      .52rem !important;

    font-weight:
      800 !important;

    line-height:
      1.18 !important;

    letter-spacing:
      .018em !important;

    text-align:
      center !important;

    text-transform:
      uppercase !important;

    white-space:
      normal !important;

    overflow-wrap:
      normal !important;

    word-break:
      normal !important;
  }


  /* ACHIEVED */
  .sales-locked-milestone.achieved
  .sales-locked-reward {
    opacity:
      1 !important;

    text-shadow:
      0 0 10px rgba(64, 239, 218, .16) !important;
  }


  /* NEXT / CURRENT TARGET */
  .sales-locked-milestone.next
  .sales-locked-reward {
    opacity:
      1 !important;

    text-shadow:
      0 0 10px rgba(183, 112, 255, .18) !important;
  }


  /* LOCKED */
  .sales-locked-milestone.upcoming
  .sales-locked-reward {
    opacity:
      .82 !important;
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 561px) and (max-width: 900px) {

  .sales-locked-reward {
    max-width:
      100px !important;

    font-size:
      .47rem !important;

    line-height:
      1.16 !important;
  }

}


/* ============================================================
   TRUE MOBILE
   ============================================================ */

@media (max-width: 560px) {

  .sales-locked-reward {
    max-width:
      none !important;

    min-height:
      0 !important;

    margin-top:
      4px !important;

    font-size:
      .52rem !important;

    font-weight:
      800 !important;

    line-height:
      1.2 !important;

    letter-spacing:
      .015em !important;

    text-align:
      left !important;
  }

}

/* ============================================================
   END SALES INCENTIVE V27
   ============================================================ */


/* ============================================================
   PREMONEON SALES INCENTIVE
   V28 — LOCKED THREE-CARD KPI + NEXT PRIZE

   LOCKED:
   - narrower MEASURED card
   - NEXT MILESTONE moved naturally left via grid
   - dynamic NEXT PRIZE card
   - progress rail geometry preserved
   - milestone anchors preserved
   - left identity geometry preserved
   ============================================================ */


/* ============================================================
   DESKTOP / LARGE TABLET
   ============================================================ */

@media (min-width:761px) {

  .sales-locked-kpis {
    grid-template-columns:
      minmax(0,.86fr)
      minmax(0,.90fr)
      minmax(0,1.24fr) !important;

    gap:
      10px !important;

    align-items:
      stretch !important;
  }


  .sales-locked-kpi {
    min-width:
      0 !important;

    min-height:
      104px !important;

    padding:
      16px 15px 14px !important;
  }


  /* ----------------------------------------------------------
     MEASURED
     Smaller card; remove wasted horizontal area.
     ---------------------------------------------------------- */

  .sales-locked-kpi.measured {
    width:
      auto !important;

    max-width:
      none !important;
  }


  /* ----------------------------------------------------------
     NEXT MILESTONE
     Position comes from grid — no translate hack.
     ---------------------------------------------------------- */

  .sales-locked-kpi.next {
    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      none !important;
  }


  /* ----------------------------------------------------------
     NEXT PRIZE
     ---------------------------------------------------------- */

  .sales-locked-kpi.prize {
    position:
      relative !important;

    overflow:
      hidden !important;

    border:
      1px solid rgba(182,93,255,.30) !important;

    background:
      linear-gradient(
        145deg,
        rgba(46,18,74,.66),
        rgba(15,20,52,.72) 54%,
        rgba(4,25,37,.68)
      ) !important;

    box-shadow:
      inset 0 0 22px rgba(171,73,255,.035),
      0 0 18px rgba(117,50,202,.055) !important;
  }


  .sales-locked-kpi.prize::before {
    content:
      "" !important;

    position:
      absolute !important;

    top:
      0 !important;

    left:
      0 !important;

    width:
      3px !important;

    height:
      100% !important;

    background:
      linear-gradient(
        180deg,
        #a94eff,
        #7258ff,
        #23dfea
      ) !important;

    box-shadow:
      0 0 12px rgba(169,78,255,.38) !important;
  }


  .sales-locked-kpi.prize > small {
    color:
      #bda2ff !important;

    letter-spacing:
      .08em !important;
  }


  .sales-next-prize-title {
    display:
      block !important;

    margin-top:
      9px !important;

    color:
      #ffffff !important;

    font-size:
      .72rem !important;

    font-weight:
      850 !important;

    line-height:
      1.18 !important;

    letter-spacing:
      -.01em !important;

    text-transform:
      none !important;

    white-space:
      normal !important;
  }


  .sales-next-prize-title.complete {
    color:
      #68ead6 !important;
  }


  .sales-next-prize-meta {
    display:
      block !important;

    margin-top:
      9px !important;

    color:
      rgba(191,168,255,.70) !important;

    font-size:
      .43rem !important;

    font-weight:
      750 !important;

    line-height:
      1.1 !important;

    letter-spacing:
      .055em !important;

    text-transform:
      uppercase !important;
  }

}


/* ============================================================
   561–760px
   Preserve horizontal architecture.
   ============================================================ */

@media (min-width:561px) and (max-width:760px) {

  .sales-locked-kpis {
    grid-template-columns:
      minmax(0,.86fr)
      minmax(0,.92fr)
      minmax(0,1.22fr) !important;

    gap:
      6px !important;

    margin:
      0 4px !important;
  }


  .sales-locked-kpi {
    min-width:
      0 !important;

    min-height:
      96px !important;

    padding:
      11px 9px !important;
  }


  .sales-locked-kpi.next {
    min-width:
      0 !important;
  }


  .sales-next-prize-title {
    display:
      block !important;

    margin-top:
      7px !important;

    font-size:
      .54rem !important;

    font-weight:
      820 !important;

    line-height:
      1.14 !important;

    white-space:
      normal !important;
  }


  .sales-next-prize-meta {
    display:
      block !important;

    margin-top:
      6px !important;

    font-size:
      .34rem !important;

    line-height:
      1.1 !important;
  }

}


/* ============================================================
   TRUE MOBILE
   Stack KPI cards cleanly.
   ============================================================ */

@media (max-width:560px) {

  .sales-locked-kpis {
    display:
      grid !important;

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

    gap:
      10px !important;
  }


  .sales-locked-kpi.prize {
    border:
      1px solid rgba(182,93,255,.26) !important;

    background:
      linear-gradient(
        145deg,
        rgba(45,18,72,.58),
        rgba(4,24,36,.72)
      ) !important;
  }


  .sales-next-prize-title {
    display:
      block !important;

    margin-top:
      7px !important;

    font-size:
      .68rem !important;

    line-height:
      1.18 !important;
  }


  .sales-next-prize-meta {
    display:
      block !important;

    margin-top:
      6px !important;

    font-size:
      .42rem !important;
  }

}


/* ============================================================
   END V28 — LOCKED THREE-CARD KPI + NEXT PRIZE
   ============================================================ */


/* ============================================================
   PREMONEON SALES INCENTIVE
   V29 — LOCKED KPI + MILESTONE ALIGNMENT

   Browser forensic source:
   - KPI row actual: 97.73px
   - Prize card was ~5.73px too low
   - Reward labels were ~12px left of milestone axis
   - Different node sizes displaced lower copy vertically

   Preserve:
   - left card geometry
   - shared bottom
   - progress badge
   - rail
   - live dot
   - milestone X anchors
   - canonical runtime data
   ============================================================ */


/* ============================================================
   DESKTOP / LARGE TABLET
   ============================================================ */

@media (min-width:761px) {

  /* ----------------------------------------------------------
     KPI ROW — ONE COMMON GEOMETRY
     ---------------------------------------------------------- */

  .sales-locked-kpis {
    align-items:
      stretch !important;

    grid-auto-rows:
      104px !important;
  }


  .sales-locked-kpis >
  .sales-locked-kpi {
    box-sizing:
      border-box !important;

    align-self:
      stretch !important;

    height:
      104px !important;

    min-height:
      104px !important;

    max-height:
      104px !important;

    margin:
      0 !important;

    padding:
      15px 17px 14px !important;

    display:
      grid !important;

    grid-template-rows:
      auto
      1fr
      auto !important;

    align-items:
      start !important;

    justify-content:
      stretch !important;
  }


  /* Same top axis for all labels */

  .sales-locked-kpis >
  .sales-locked-kpi >
  small {
    align-self:
      start !important;

    margin:
      0 !important;
  }


  /* Main KPI value area */

  .sales-locked-kpis >
  .sales-locked-kpi >
  strong {
    align-self:
      center !important;

    justify-self:
      stretch !important;

    margin:
      4px 0 3px !important;
  }


  /* Bottom information row */

  .sales-locked-kpis >
  .sales-locked-kpi >
  span {
    align-self:
      end !important;

    margin:
      0 !important;

    padding-top:
      8px !important;

    border-top:
      1px solid rgba(71,205,239,.12) !important;
  }


  /* ----------------------------------------------------------
     NEXT PRIZE
     Force exact same top / bottom as sibling KPI cards.
     ---------------------------------------------------------- */

  .sales-locked-kpi.prize {
    align-self:
      stretch !important;

    height:
      104px !important;

    min-height:
      104px !important;

    max-height:
      104px !important;

    top:
      auto !important;

    bottom:
      auto !important;

    transform:
      none !important;
  }


  .sales-locked-kpi.prize >
  .sales-next-prize-title {
    align-self:
      center !important;

    justify-self:
      stretch !important;

    margin:
      3px 0 !important;

    font-size:
      .72rem !important;

    line-height:
      1.18 !important;
  }


  .sales-locked-kpi.prize >
  .sales-next-prize-meta {
    align-self:
      end !important;

    margin:
      0 !important;

    padding-top:
      8px !important;

    border-top:
      1px solid rgba(172,94,255,.16) !important;
  }


  /* ==========================================================
     MILESTONE GEOMETRY

     Fixed 36px node row means:
     - achieved node
     - next node
     - locked node

     may differ visually in diameter but the information below
     starts from one exact Y axis.
     ========================================================== */

  .sales-locked-milestone {
    display:
      grid !important;

    grid-template-rows:
      36px
      auto !important;

    align-items:
      start !important;

    justify-items:
      stretch !important;
  }


  .sales-locked-milestone >
  .sales-locked-node {
    grid-row:
      1 !important;

    align-self:
      center !important;

    justify-self:
      center !important;

    margin:
      0 !important;
  }


  /* ----------------------------------------------------------
     COPY
     row 1 = amount + USDT
     row 2 = M#
     row 3 = status
     row 4 = reward
     ---------------------------------------------------------- */

  .sales-locked-node-copy {
    grid-row:
      2 !important;

    display:
      grid !important;

    grid-template-columns:
      auto auto !important;

    grid-template-rows:
      auto
      auto
      auto
      auto !important;

    justify-content:
      center !important;

    justify-items:
      center !important;

    align-items:
      baseline !important;

    column-gap:
      5px !important;

    row-gap:
      4px !important;

    width:
      100% !important;

    margin-top:
      8px !important;

    text-align:
      center !important;
  }


  /* amount */

  .sales-locked-node-copy >
  strong {
    grid-column:
      1 !important;

    grid-row:
      1 !important;

    justify-self:
      end !important;

    margin:
      0 !important;
  }


  /* USDT */

  .sales-locked-node-copy >
  em {
    grid-column:
      2 !important;

    grid-row:
      1 !important;

    justify-self:
      start !important;

    margin:
      0 !important;
  }


  /* M1 / M2 / M3 / M4 */

  .sales-locked-node-copy >
  small {
    grid-column:
      1 / 3 !important;

    grid-row:
      2 !important;

    justify-self:
      center !important;

    width:
      100% !important;

    margin:
      0 !important;

    text-align:
      center !important;
  }


  /* State */

  .sales-locked-node-copy >
  b {
    grid-column:
      1 / 3 !important;

    grid-row:
      3 !important;

    justify-self:
      center !important;

    min-width:
      48px !important;

    margin:
      1px 0 0 !important;

    padding-top:
      5px !important;

    border-top:
      1px solid rgba(92,203,232,.15) !important;

    text-align:
      center !important;
  }


  /* Reward was previously auto-placed into column 1.
     Force it across the full amount/USDT grid. */

  .sales-locked-node-copy >
  .sales-locked-reward {
    grid-column:
      1 / 3 !important;

    grid-row:
      4 !important;

    justify-self:
      center !important;

    width:
      100% !important;

    max-width:
      128px !important;

    min-height:
      0 !important;

    margin:
      3px auto 0 !important;

    text-align:
      center !important;

    line-height:
      1.16 !important;
  }


  /* Slightly stronger reward hierarchy */

  .sales-locked-milestone.achieved
  .sales-locked-reward {
    opacity:
      1 !important;
  }


  .sales-locked-milestone.next
  .sales-locked-reward {
    opacity:
      1 !important;
  }


  .sales-locked-milestone.upcoming
  .sales-locked-reward {
    opacity:
      .76 !important;
  }

}


/* ============================================================
   COMPACT HORIZONTAL 561–760
   Same architecture, reduced dimensions.
   ============================================================ */

@media (min-width:561px) and (max-width:760px) {

  .sales-locked-kpis {
    align-items:
      stretch !important;

    grid-auto-rows:
      98px !important;
  }


  .sales-locked-kpis >
  .sales-locked-kpi {
    align-self:
      stretch !important;

    height:
      98px !important;

    min-height:
      98px !important;

    max-height:
      98px !important;

    margin:
      0 !important;

    display:
      grid !important;

    grid-template-rows:
      auto 1fr auto !important;
  }


  .sales-locked-kpi.prize {
    height:
      98px !important;

    min-height:
      98px !important;

    max-height:
      98px !important;

    transform:
      none !important;
  }


  .sales-locked-milestone {
    display:
      grid !important;

    grid-template-rows:
      32px auto !important;
  }


  .sales-locked-milestone >
  .sales-locked-node {
    align-self:
      center !important;

    justify-self:
      center !important;

    margin:
      0 !important;
  }


  .sales-locked-node-copy >
  .sales-locked-reward {
    grid-column:
      1 / 3 !important;

    justify-self:
      center !important;

    width:
      100% !important;

    margin:
      3px auto 0 !important;

    text-align:
      center !important;
  }

}


/* ============================================================
   TRUE MOBILE
   Keep stacked KPI layout.
   ============================================================ */

@media (max-width:560px) {

  .sales-locked-kpis >
  .sales-locked-kpi {
    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;
  }


  .sales-locked-node-copy >
  .sales-locked-reward {
    grid-column:
      1 / 3 !important;

    width:
      100% !important;

    text-align:
      center !important;
  }

}


/* ============================================================
   END V29 — LOCKED KPI + MILESTONE ALIGNMENT
   ============================================================ */


/* ============================================================
   PREMONEON SALES INCENTIVE
   V30 — LOWER PROGRESS SET 15PX LIFT

   ONLY MOVE:
   - percentage badge
   - progress rail
   - live dot
   - milestone stems
   - M1 / M2 / M3 / M4 nodes
   - amount / USDT / status / reward copy

   DO NOT MOVE:
   - KPI cards
   - left identity card
   - telemetry footer
   ============================================================ */

@media (min-width:561px) {

  .sales-locked-master {
    transform:
      translateY(5px) !important;
  }

}

@media (max-width:560px) {

  .sales-locked-master {
    transform:
      none !important;
  }

}

/* ============================================================
   END V30 — LOWER PROGRESS SET 15PX LIFT
   ============================================================ */


/* ============================================================
   PREMONEON SALES INCENTIVE
   V31 — LEFT IDENTITY FRIENDLY PROGRAM + ACTIVE STATUS

   PRESENTATION ONLY:
   - Program 1 friendly label
   - Active status badge beside canonical address/hash

   DOES NOT MODIFY:
   - required package
   - minimum rank
   - metric
   - metric package
   - on-chain policy values
   ============================================================ */

.sales-program-identity-copy {
  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  min-width:
    0 !important;
}


.sales-program-identity-copy > strong {
  margin-top:
    3px !important;
}


.sales-program-friendly-name {
  display:
    block !important;

  margin-top:
    4px !important;

  color:
    #eefbff !important;

  font-size:
    .48rem !important;

  font-weight:
    800 !important;

  line-height:
    1.15 !important;

  letter-spacing:
    .055em !important;

  text-transform:
    uppercase !important;

  opacity:
    .88 !important;
}


.sales-program-version-badge {
  flex:
    0 0 auto !important;
}


/* ------------------------------------------------------------
   ADDRESS + ACTIVE STATUS
   ------------------------------------------------------------ */

.sales-program-address-row {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    12px !important;

  min-width:
    0 !important;
}


.sales-program-address {
  min-width:
    0 !important;

  overflow:
    hidden !important;

  text-overflow:
    ellipsis !important;

  white-space:
    nowrap !important;
}


.sales-program-active-badge {
  display:
    inline-flex !important;

  align-items:
    center !important;

  gap:
    5px !important;

  flex:
    0 0 auto !important;

  padding:
    5px 8px !important;

  border:
    1px solid rgba(62,235,207,.20) !important;

  border-radius:
    999px !important;

  background:
    rgba(25,109,101,.12) !important;

  color:
    #76ead4 !important;

  font-size:
    .40rem !important;

  font-weight:
    850 !important;

  line-height:
    1 !important;

  letter-spacing:
    .08em !important;

  text-transform:
    uppercase !important;

  box-shadow:
    inset 0 0 12px rgba(59,231,205,.025) !important;
}


.sales-program-active-badge > i {
  display:
    block !important;

  width:
    6px !important;

  height:
    6px !important;

  border-radius:
    50% !important;

  background:
    #4ce5c9 !important;

  box-shadow:
    0 0 8px rgba(76,229,201,.58) !important;
}


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

@media (max-width:760px) {

  .sales-program-friendly-name {
    font-size:
      .42rem !important;
  }


  .sales-program-active-badge {
    padding:
      4px 6px !important;

    font-size:
      .34rem !important;
  }

}


/* ============================================================
   END V31
   ============================================================ */


/* ============================================================
   PREMONEON HISTORY — MOBILE UX ENHANCEMENT V1
   Scope: History page presentation only
   ============================================================ */

@media(max-width:700px){

  /* ----------------------------------------------------------
     ACTIVITY SECTION HEADING
     ---------------------------------------------------------- */

  .history-activity-heading{
    margin-top:20px !important;
    margin-bottom:10px !important;
    padding:0 2px !important;
    gap:8px !important;
  }

  .history-activity-heading span{
    font-size:10px !important;
    line-height:1.2 !important;
    letter-spacing:.07em !important;
  }

  .history-activity-heading strong{
    font-size:18px !important;
    line-height:1.15 !important;
  }


  /* ----------------------------------------------------------
     FILTER / CATEGORY SHELL
     Do not clip the mobile category rail.
     ---------------------------------------------------------- */

  .history-filter-shell{
    overflow:visible !important;
    border-radius:12px !important;
  }


  /* ----------------------------------------------------------
     MOBILE CATEGORY RAIL
     Horizontal scroll instead of compressed/clipped tabs.
     ---------------------------------------------------------- */

  .history-tabs{
    display:flex !important;
    width:100% !important;
    max-width:100% !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    gap:0 !important;

    scroll-snap-type:x proximity;
    scrollbar-width:none;

    border-bottom:
      1px solid rgba(97,221,255,.10);

    background:
      rgba(97,221,255,.025);
  }

  .history-tabs::-webkit-scrollbar{
    display:none;
  }

  .history-tabs button{
    flex:
      0 0
      min(46vw,174px) !important;

    width:
      min(46vw,174px) !important;

    min-width:
      min(46vw,174px) !important;

    min-height:64px !important;

    padding:
      10px
      12px !important;

    display:flex !important;
    flex-direction:row !important;

    align-items:center !important;
    justify-content:flex-start !important;

    gap:9px !important;

    scroll-snap-align:start;

    border:0 !important;
    border-right:
      1px solid
      rgba(97,221,255,.08) !important;

    white-space:normal !important;
  }

  .history-tabs button:last-child{
    border-right:0 !important;
  }

  .history-tab-icon{
    width:30px !important;
    height:30px !important;

    flex:
      0 0
      30px !important;

    border-radius:8px !important;
  }

  .history-tab-icon svg{
    width:16px !important;
    height:16px !important;
  }

  .history-tab-label{
    font-size:10px !important;
    line-height:1.2 !important;

    letter-spacing:.035em !important;

    text-align:left !important;
  }


  /* ----------------------------------------------------------
     FILTER CONTROLS
     Compact mobile stack.
     ---------------------------------------------------------- */

  .history-controls{
    display:grid !important;
    grid-template-columns:1fr !important;

    gap:0 !important;

    padding:10px !important;
  }

  .history-controls > label{
    display:flex !important;
    flex-direction:column !important;

    gap:6px !important;

    padding:
      10px
      4px !important;

    margin:0 !important;

    border:0 !important;
    border-bottom:
      1px solid
      rgba(97,221,255,.08) !important;

    background:transparent !important;
  }

  .history-controls > label:last-child{
    border-bottom:0 !important;
  }

  .history-controls > label > span{
    margin:0 !important;

    font-size:9px !important;
    line-height:1.15 !important;

    letter-spacing:.06em !important;
  }

  .history-controls input,
  .history-controls select{
    width:100% !important;

    height:44px !important;
    min-height:44px !important;

    margin:0 !important;

    padding:
      0
      12px !important;

    font-size:12px !important;

    border-radius:6px !important;
  }


  /* ----------------------------------------------------------
     PANEL SPACING
     ---------------------------------------------------------- */

  .history-filter-shell{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .history-record-list{
    margin-top:12px !important;
  }

}


/* Extra-small phones */

@media(max-width:420px){

  .history-tabs button{
    flex-basis:158px !important;
    width:158px !important;
    min-width:158px !important;
  }

  .history-activity-heading strong{
    font-size:17px !important;
  }

}

/* ============================================================
   END PREMONEON HISTORY — MOBILE UX ENHANCEMENT V1
   ============================================================ */

/* ============================================================
   PREMONEON HISTORY — FORENSIC SNAPSHOT MOBILE COMPACT V1
   Presentation only. Desktop and forensic data untouched.
   ============================================================ */

@media(max-width:700px){

  /*
   * Keep the existing 20px separation above the forensic block.
   * Only improve the internal mobile composition.
   */
  .history-purchase-card
  .history-forensic-details{
    margin-top:20px !important;
  }


  .history-purchase-card
  .history-forensic-details
  summary{
    min-height:0 !important;

    padding:
      12px
      14px !important;
  }


  .history-purchase-card
  .history-forensic-toggle{
    width:100% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:10px !important;
  }


  /*
   * Allow the title side to shrink cleanly instead of fighting
   * VIEW DETAILS for horizontal space.
   */
  .history-purchase-card
  .history-forensic-title{
    min-width:0 !important;

    flex:
      1 1 auto !important;

    gap:10px !important;
  }


  .history-purchase-card
  .forensic-toggle-icon{
    width:30px !important;
    height:30px !important;

    flex:
      0 0
      30px !important;
  }


  .history-purchase-card
  .history-forensic-title > div:last-child{
    min-width:0 !important;
  }


  .history-purchase-card
  .history-forensic-title strong{
    font-size:11px !important;
    line-height:1.25 !important;

    letter-spacing:.08em !important;

    overflow-wrap:normal !important;
    word-break:normal !important;
  }


  .history-purchase-card
  .history-forensic-title small{
    margin-top:4px !important;

    font-size:8px !important;
    line-height:1.3 !important;

    letter-spacing:.055em !important;
  }


  .history-purchase-card
  .forensic-toggle-action{
    flex:
      0 0 auto !important;

    margin-left:4px !important;

    font-size:8px !important;
    line-height:1.2 !important;

    letter-spacing:.08em !important;

    white-space:nowrap !important;
  }

}

/* ============================================================
   END FORENSIC SNAPSHOT MOBILE COMPACT V1
   ============================================================ */

/* ============================================================
   DASHBOARD — ACCOUNT ENERGY PREMO REFERENCE VALUE V1
   ============================================================ */

.account-energy-balance-main{
    display:flex;
    align-items:baseline;
    gap:7px;
}

.account-energy-value-grid{
    width:100%;

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

    gap:8px;

    margin-top:9px;
    padding-top:9px;

    border-top:
        1px solid
        rgba(86,224,255,.10);
}

.account-energy-value-item{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:3px;
}

.account-energy-value-item > span{
    font-size:7px;
    line-height:1.2;

    font-weight:800;

    letter-spacing:.09em;

    color:
        rgba(169,190,205,.62);
}

.account-energy-value-item > b{
    font-size:11px;
    line-height:1.25;

    font-weight:850;

    letter-spacing:.02em;

    color:
        rgba(224,246,255,.94);
}

.account-energy-value-item > b > small{
    margin-left:3px;

    font-size:7px;

    font-weight:700;

    color:
        rgba(127,209,233,.70);
}

.account-energy-value-item.total{
    padding-left:9px;

    border-left:
        1px solid
        rgba(86,224,255,.09);
}

.account-energy-value-item.total > b{
    color:#86eaff;

    text-shadow:
        0 0 12px
        rgba(50,221,255,.16);
}


@media(max-width:620px){

    .account-energy-value-grid{
        gap:6px;
    }

    .account-energy-value-item > b{
        font-size:10px;
    }

}

/* ============================================================
   END ACCOUNT ENERGY PREMO REFERENCE VALUE V1
   ============================================================ */

/* ============================================================
   DASHBOARD ACCOUNT ENERGY VALUE POLISH V2
   Exact Sales Incentive color treatment
   ============================================================ */

/*
 * REFERENCE VALUE
 * Align unit directly under 0.005.
 */
.account-energy-value-item:not(.total) > b{
    display:block !important;
}

.account-energy-value-item:not(.total) > b > small{
    display:block !important;

    margin-left:0 !important;
    margin-top:2px !important;

    padding-left:0 !important;

    line-height:1.15 !important;
}


/*
 * TOTAL VALUE
 * Match Sales Incentive NEXT MILESTONE amount:
 * rgb(255,201,79) = #FFC94F
 */
.account-energy-value-item.total > b{
    color:#FFC94F !important;

    text-shadow:none !important;
}


/*
 * If a USDT unit exists as its own element,
 * use exact Sales Incentive cyan:
 * rgb(67,231,255) = #43E7FF
 */
.account-energy-value-item.total > b small,
.account-energy-value-item.total .account-energy-total-unit{
    color:#43E7FF !important;
}


/* ============================================================
   END DASHBOARD ACCOUNT ENERGY VALUE POLISH V2
   ============================================================ */

.account-energy-total-amount{
    color:#FFC94F !important;
}

.account-energy-total-unit{
    display:inline-block !important;

    margin-left:5px !important;

    font-size:7px !important;
    line-height:1 !important;

    font-weight:800 !important;

    color:#43E7FF !important;

    vertical-align:baseline !important;
}


/* ============================================================
   DASHBOARD TOP CARDS — DESKTOP PROPORTION V2

   Goal:
   - Account Core and Account Energy Core share one row height
   - Energy artwork geometry remains untouched
   - Mobile/tablet stacked layout remains natural height
   ============================================================ */

@media(min-width:1000px){

    /*
     * Restore equal-height behavior only when the dashboard
     * is actually in its desktop two-column composition.
     */
    .dashboard-header{
        align-items:stretch !important;
    }


    /*
     * Both outer cards occupy the same grid-row height.
     */
    .dashboard-header > .neo-panel{
        align-self:stretch !important;
        height:100% !important;
    }


    /*
     * Let the inner panel fill the stretched outer card.
     */
    .dashboard-header > .neo-panel > .neo-panel-inner{
        height:100% !important;
    }


    /*
     * Account Core may stretch vertically, but its content
     * remains aligned naturally from the top.
     */
    .dashboard-header .account-core{
        min-height:100% !important;
        height:100% !important;

        align-items:flex-start !important;
    }


    /*
     * Preserve finalized Account Energy Core internal geometry.
     * We only allow its wrapper to define the shared row height.
     */
    .dashboard-header .account-energy-core{
        min-height:0 !important;
    }

}


/*
 * Tablet/mobile:
 * preserve natural stacked heights.
 */
@media(max-width:999px){

    .dashboard-header{
        align-items:start !important;
    }

    .dashboard-header > .neo-panel{
        align-self:start !important;
        height:auto !important;
    }

    .dashboard-header > .neo-panel > .neo-panel-inner{
        height:auto !important;
    }

    .dashboard-header .account-core{
        min-height:0 !important;
        height:auto !important;
    }

}

/* ============================================================
   END DASHBOARD TOP CARDS — DESKTOP PROPORTION V2
   ============================================================ */

/* ============================================================
   ACCOUNT ENERGY CORE — LIVE WALLET ENERGY TRACER V1

   Existing orb  →  existing value-grid line  →  LIVE WALLET

   No new static rail.
   The pseudo-element is only the moving energy packet.
   ============================================================ */


/*
 * The existing top border of this grid IS the travel path.
 */
.account-energy-value-grid{
    position:relative !important;
    overflow:visible !important;
}


/*
 * Moving energy streak.
 *
 * It begins to the LEFT of the value grid so its first visible
 * phase appears to launch from the existing signal orb.
 *
 * Shape:
 * soft trail → bright cyan body → white-hot head.
 */
.account-energy-value-grid::after{
    content:"";

    position:absolute;

    z-index:5;

    top:-1px;

    /*
     * Extends backward toward the existing glowing signal.
     */
    left:-48px;

    width:64px;
    height:2px;

    pointer-events:none;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,

            rgba(67,231,255,0) 0%,

            rgba(67,231,255,.10) 18%,

            rgba(67,231,255,.32) 44%,

            rgba(76,229,255,.72) 68%,

            rgba(192,249,255,.96) 86%,

            #ffffff 100%
        );

    box-shadow:
        0 0 4px rgba(76,229,255,.75),
        0 0 9px rgba(67,231,255,.55),
        0 0 16px rgba(67,231,255,.28);

    opacity:0;

    transform:
        translate3d(0,0,0)
        scaleX(.35);

    transform-origin:right center;

    animation:
        accountEnergyWalletTracer
        2.65s
        cubic-bezier(.42,0,.58,1)
        infinite;

    will-change:
        transform,
        opacity,
        filter;
}


/*
 * Bright head at the front of the streak.
 * This makes it feel like energy DRAWING across the line,
 * rather than a plain dot moving horizontally.
 */
.account-energy-value-grid::before{
    content:"";

    position:absolute;

    z-index:6;

    top:-3px;
    left:-48px;

    width:6px;
    height:6px;

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            circle,
            #ffffff 0 18%,
            #bff8ff 22%,
            #43e7ff 48%,
            rgba(67,231,255,.28) 72%,
            transparent 100%
        );

    box-shadow:
        0 0 4px #ffffff,
        0 0 8px #43e7ff,
        0 0 15px rgba(67,231,255,.70),
        0 0 24px rgba(67,231,255,.32);

    opacity:0;

    animation:
        accountEnergyWalletTracerHead
        2.65s
        cubic-bezier(.42,0,.58,1)
        infinite;

    will-change:
        transform,
        opacity;
}


/* ============================================================
   ENERGY STREAK
   ============================================================ */

@keyframes accountEnergyWalletTracer{

    /*
     * Hold briefly at source.
     */
    0%{
        opacity:0;

        transform:
            translate3d(0,0,0)
            scaleX(.15);

        filter:
            brightness(1);
    }


    /*
     * Ignition from existing signal orb.
     */
    8%{
        opacity:.25;

        transform:
            translate3d(5px,0,0)
            scaleX(.30);
    }


    15%{
        opacity:1;

        transform:
            translate3d(16px,0,0)
            scaleX(.72);

        filter:
            brightness(1.35);
    }


    /*
     * Energy packet stretches as it travels.
     */
    45%{
        opacity:1;

        transform:
            translate3d(
                calc(
                    (
                        100% +
                        92px
                    ) * .46
                ),
                0,
                0
            )
            scaleX(1);

        filter:
            brightness(1.15);
    }


    78%{
        opacity:.95;

        transform:
            translate3d(
                calc(
                    100% + 92px
                ),
                0,
                0
            )
            scaleX(.82);
    }


    /*
     * Dissipates toward LIVE WALLET.
     */
    91%{
        opacity:.32;

        transform:
            translate3d(
                calc(
                    100% + 120px
                ),
                0,
                0
            )
            scaleX(.50);

        filter:
            brightness(1.45);
    }


    100%{
        opacity:0;

        transform:
            translate3d(
                calc(
                    100% + 132px
                ),
                0,
                0
            )
            scaleX(.15);

        filter:
            brightness(1);
    }

}


/* ============================================================
   WHITE-HOT FRONT HEAD
   ============================================================ */

@keyframes accountEnergyWalletTracerHead{

    0%{
        opacity:0;

        transform:
            translate3d(0,0,0)
            scale(.45);
    }


    8%{
        opacity:.25;

        transform:
            translate3d(5px,0,0)
            scale(.65);
    }


    15%{
        opacity:1;

        transform:
            translate3d(74px,0,0)
            scale(1);
    }


    45%{
        opacity:1;

        transform:
            translate3d(
                calc(
                    100% + 98px
                ),
                0,
                0
            )
            scale(.88);
    }


    78%{
        opacity:.95;

        transform:
            translate3d(
                calc(
                    100% + 196px
                ),
                0,
                0
            )
            scale(1);
    }


    91%{
        opacity:.45;

        transform:
            translate3d(
                calc(
                    100% + 222px
                ),
                0,
                0
            )
            scale(.72);
    }


    100%{
        opacity:0;

        transform:
            translate3d(
                calc(
                    100% + 238px
                ),
                0,
                0
            )
            scale(.35);
    }

}


/*
 * Existing source orb gets a slightly stronger flash
 * exactly when each packet launches.
 *
 * Existing accountEnergySignalPulse is NOT removed.
 */
.account-energy-balance-signal{
    position:relative;
}

.account-energy-balance-signal::after{
    content:"";

    position:absolute;

    inset:5px;

    border-radius:50%;

    pointer-events:none;

    border:
        1px solid
        rgba(76,229,255,.38);

    box-shadow:
        0 0 8px
        rgba(76,229,255,.20);

    opacity:0;

    animation:
        accountEnergyWalletSourceFlash
        2.65s
        ease-out
        infinite;
}


@keyframes accountEnergyWalletSourceFlash{

    0%,
    3%{
        opacity:0;
        transform:scale(.65);
    }

    8%{
        opacity:.95;
        transform:scale(.92);
    }

    15%{
        opacity:.30;
        transform:scale(1.55);
    }

    25%,
    100%{
        opacity:0;
        transform:scale(1.85);
    }

}


/*
 * Subtle receive pulse when packet reaches LIVE WALLET.
 */
.account-energy-balance-state{
    position:relative;

    animation:
        accountEnergyWalletReceive
        2.65s
        ease-in-out
        infinite;
}


@keyframes accountEnergyWalletReceive{

    0%,
    72%{
        color:#4fe4ff;

        text-shadow:none;
    }

    82%{
        color:#c5f9ff;

        text-shadow:
            0 0 5px rgba(79,228,255,.90),
            0 0 13px rgba(79,228,255,.45);
    }

    94%,
    100%{
        color:#4fe4ff;

        text-shadow:none;
    }

}


/*
 * Respect reduced-motion users.
 */
@media(prefers-reduced-motion:reduce){

    .account-energy-value-grid::before,
    .account-energy-value-grid::after,
    .account-energy-balance-signal::after,
    .account-energy-balance-state{
        animation:none !important;
    }

}


/* ============================================================
   END ACCOUNT ENERGY CORE — LIVE WALLET ENERGY TRACER V1
   ============================================================ */

/* ============================================================
   ACCOUNT ENERGY CORE
   LIVE WALLET ENERGY TRACER V2 — SINGLE SOLID FADE

   FIX:
   - removes double-tail appearance
   - one continuous tapered energy streak
   - compact white-hot head
   - existing line remains the path
   - existing source orb remains untouched
   ============================================================ */


/* ------------------------------------------------------------
   EXISTING LINE / PATH
   ------------------------------------------------------------ */

.account-energy-value-grid{
    position:relative !important;
    overflow:visible !important;
}


/* ------------------------------------------------------------
   SINGLE ENERGY TRAIL

   IMPORTANT:
   This is ONE continuous gradient.
   No secondary tail.
   ------------------------------------------------------------ */

.account-energy-value-grid::after{
    content:"" !important;

    position:absolute !important;
    z-index:5 !important;

    top:-1px !important;

    /*
     * Start visually from the existing source orb side.
     */
    left:-44px;

    width:58px !important;
    height:2px !important;

    border-radius:999px !important;

    pointer-events:none !important;

    /*
     * ONE SOLID FADE:
     *
     * transparent rear
     *      ↓
     * soft cyan
     *      ↓
     * strong cyan
     *      ↓
     * white-hot front
     *
     * No separated secondary glow body.
     */
    background:
        linear-gradient(
            90deg,

            rgba(67,231,255,0) 0%,

            rgba(67,231,255,.06) 14%,

            rgba(67,231,255,.18) 32%,

            rgba(67,231,255,.44) 54%,

            rgba(76,229,255,.78) 74%,

            rgba(174,247,255,.96) 90%,

            #ffffff 100%
        ) !important;

    box-shadow:
        0 0 4px rgba(76,229,255,.58),
        0 0 9px rgba(67,231,255,.32) !important;

    opacity:0;

    transform:none !important;

    transform-origin:right center !important;

    animation:
        accountEnergySingleTracer
        2.65s
        cubic-bezier(.42,0,.58,1)
        infinite !important;

    will-change:
        left,
        opacity;
}


/* ------------------------------------------------------------
   COMPACT WHITE-HOT HEAD

   Head only.
   It does NOT create another tail.
   ------------------------------------------------------------ */

.account-energy-value-grid::before{
    content:"" !important;

    position:absolute !important;
    z-index:6 !important;

    top:-3px !important;
    left:8px;

    width:6px !important;
    height:6px !important;

    border-radius:50% !important;

    pointer-events:none !important;

    background:
        radial-gradient(
            circle,
            #ffffff 0 24%,
            #d5fbff 30%,
            #63edff 52%,
            rgba(67,231,255,.48) 68%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 4px rgba(255,255,255,.95),
        0 0 8px rgba(67,231,255,.85),
        0 0 14px rgba(67,231,255,.36) !important;

    opacity:0;

    transform:none !important;

    animation:
        accountEnergySingleTracerHead
        2.65s
        cubic-bezier(.42,0,.58,1)
        infinite !important;

    will-change:
        left,
        opacity;
}


/* ============================================================
   SINGLE TRAIL MOVEMENT
   ============================================================ */

@keyframes accountEnergySingleTracer{

    /*
     * Idle at source.
     */
    0%,
    5%{
        left:-44px;
        opacity:0;
    }


    /*
     * Ignition.
     */
    10%{
        left:-40px;
        opacity:.25;
    }


    16%{
        left:-28px;
        opacity:1;
    }


    /*
     * Travel across EXISTING line.
     */
    45%{
        left:34%;
        opacity:1;
    }


    72%{
        left:68%;
        opacity:.96;
    }


    /*
     * Approaching LIVE WALLET side.
     */
    87%{
        left:calc(100% - 58px);
        opacity:.82;
    }


    /*
     * Clean fade-out.
     * No split / no second tail.
     */
    95%{
        left:calc(100% - 48px);
        opacity:.20;
    }


    100%{
        left:calc(100% - 42px);
        opacity:0;
    }

}


/* ============================================================
   HEAD MOVEMENT
   Same timing and same destination as the trail.
   ============================================================ */

@keyframes accountEnergySingleTracerHead{

    0%,
    5%{
        left:8px;
        opacity:0;
    }


    10%{
        left:12px;
        opacity:.25;
    }


    16%{
        left:26px;
        opacity:1;
    }


    45%{
        left:calc(34% + 55px);
        opacity:1;
    }


    72%{
        left:calc(68% + 55px);
        opacity:.95;
    }


    87%{
        left:calc(100% - 4px);
        opacity:1;
    }


    95%{
        left:calc(100% + 5px);
        opacity:.25;
    }


    100%{
        left:calc(100% + 10px);
        opacity:0;
    }

}


/* ------------------------------------------------------------
   SOURCE ORB LAUNCH FLASH
   Existing original pulse remains.
   This is only the launch halo.
   ------------------------------------------------------------ */

.account-energy-balance-signal::after{
    animation:
        accountEnergySingleSourceFlash
        2.65s
        ease-out
        infinite !important;
}


@keyframes accountEnergySingleSourceFlash{

    0%,
    5%{
        opacity:0;
        transform:scale(.72);
    }

    10%{
        opacity:.85;
        transform:scale(.95);
    }

    17%{
        opacity:.18;
        transform:scale(1.48);
    }

    24%,
    100%{
        opacity:0;
        transform:scale(1.72);
    }

}


/* ------------------------------------------------------------
   LIVE WALLET RECEIVE GLOW
   ------------------------------------------------------------ */

.account-energy-balance-state{
    animation:
        accountEnergySingleReceive
        2.65s
        ease-in-out
        infinite !important;
}


@keyframes accountEnergySingleReceive{

    0%,
    78%{
        color:#4fe4ff;
        text-shadow:none;
    }

    87%{
        color:#d0fbff;

        text-shadow:
            0 0 5px rgba(79,228,255,.90),
            0 0 11px rgba(79,228,255,.42);
    }

    96%,
    100%{
        color:#4fe4ff;
        text-shadow:none;
    }

}


/* ------------------------------------------------------------
   TOTAL VALUE
   Keep label + number in the same locked gold treatment.
   USDT remains cyan.
   ------------------------------------------------------------ */

.account-energy-value-item.total > span,
.account-energy-total-amount{
    color:#FFC94F !important;
}

.account-energy-total-unit{
    color:#43E7FF !important;
}


/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */

@media(prefers-reduced-motion:reduce){

    .account-energy-value-grid::before,
    .account-energy-value-grid::after,
    .account-energy-balance-signal::after,
    .account-energy-balance-state{
        animation:none !important;
    }

}


/* ============================================================
   END ACCOUNT ENERGY CORE
   LIVE WALLET ENERGY TRACER V2
   ============================================================ */

/* ============================================================
   ACCOUNT ENERGY CORE
   LIVE WALLET ENERGY TRACER V3
   TRUE SINGLE-ELEMENT STREAK
   ============================================================ */


/*
 * Kill the separate moving head completely.
 * This removes the visual double-tail / twin-head effect.
 */
.account-energy-value-grid::before{
    content:none !important;
    display:none !important;
    animation:none !important;
}


/*
 * ONE tracer only.
 *
 * Rear = transparent fade
 * Middle = cyan energy
 * Front = white-hot tip
 */
.account-energy-value-grid::after{
    content:"" !important;

    position:absolute !important;
    z-index:6 !important;

    top:-2px !important;
    left:-42px;

    width:62px !important;
    height:4px !important;

    border-radius:
        999px !important;

    pointer-events:none !important;

    background:
        linear-gradient(
            90deg,

            transparent 0%,

            rgba(67,231,255,.04) 10%,

            rgba(67,231,255,.10) 24%,

            rgba(67,231,255,.28) 43%,

            rgba(67,231,255,.56) 62%,

            rgba(76,229,255,.82) 78%,

            rgba(186,249,255,.98) 91%,

            #ffffff 100%
        ) !important;

    /*
     * Soft bloom only.
     * No second visible streak.
     */
    box-shadow:
        0 0 4px
        rgba(255,255,255,.55),

        0 0 8px
        rgba(67,231,255,.48),

        0 0 14px
        rgba(67,231,255,.22) !important;

    opacity:0;

    transform:none !important;

    animation:
        accountEnergyTracerV3
        2.65s
        cubic-bezier(.42,0,.58,1)
        infinite !important;

    will-change:
        left,
        opacity;
}


/* ============================================================
   SINGLE STREAK MOVEMENT
   ============================================================ */

@keyframes accountEnergyTracerV3{

    0%,
    5%{
        left:-42px;
        opacity:0;
    }

    /*
     * Launch from source orb.
     */
    10%{
        left:-38px;
        opacity:.25;
    }

    16%{
        left:-26px;
        opacity:1;
    }

    /*
     * Travel across the existing line.
     */
    42%{
        left:30%;
        opacity:1;
    }

    68%{
        left:62%;
        opacity:1;
    }

    84%{
        left:calc(100% - 68px);
        opacity:.95;
    }

    /*
     * Final approach.
     */
    91%{
        left:calc(100% - 58px);
        opacity:.62;
    }

    /*
     * One clean fade.
     */
    97%{
        left:calc(100% - 48px);
        opacity:.15;
    }

    100%{
        left:calc(100% - 42px);
        opacity:0;
    }

}


/*
 * Source flash stays subtle.
 */
.account-energy-balance-signal::after{
    animation:
        accountEnergyTracerV3SourceFlash
        2.65s
        ease-out
        infinite !important;
}


@keyframes accountEnergyTracerV3SourceFlash{

    0%,
    5%{
        opacity:0;
        transform:scale(.75);
    }

    10%{
        opacity:.78;
        transform:scale(.95);
    }

    17%{
        opacity:.16;
        transform:scale(1.42);
    }

    24%,
    100%{
        opacity:0;
        transform:scale(1.62);
    }

}


/*
 * Receive pulse remains synchronized.
 */
.account-energy-balance-state{
    animation:
        accountEnergyTracerV3Receive
        2.65s
        ease-in-out
        infinite !important;
}


@keyframes accountEnergyTracerV3Receive{

    0%,
    80%{
        color:#4fe4ff;
        text-shadow:none;
    }

    88%{
        color:#d1fbff;

        text-shadow:
            0 0 5px rgba(79,228,255,.85),
            0 0 10px rgba(79,228,255,.38);
    }

    96%,
    100%{
        color:#4fe4ff;
        text-shadow:none;
    }

}


/*
 * Reduced motion.
 */
@media(prefers-reduced-motion:reduce){

    .account-energy-value-grid::after,
    .account-energy-balance-signal::after,
    .account-energy-balance-state{
        animation:none !important;
    }

}


/* ============================================================
   END ACCOUNT ENERGY CORE
   LIVE WALLET ENERGY TRACER V3
   ============================================================ */

/* ============================================================
   ACCOUNT ENERGY CORE
   LIVE WALLET ENERGY TRACER V4
   PREMIUM SINGLE FADE / THIN HOT TIP
   ============================================================ */


/*
 * Keep V3 single-element architecture.
 * Separate ::before head remains disabled.
 */
.account-energy-value-grid::before{
    content:none !important;
    display:none !important;
    animation:none !important;
}


/*
 * Premium tracer:
 *
 * - longer soft fade
 * - much thinner body
 * - tiny white-hot leading tip
 * - no capsule / bar appearance
 * - no second tail
 */
.account-energy-value-grid::after{
    content:"" !important;

    position:absolute !important;
    z-index:6 !important;

    top:-1px !important;
    left:-52px;

    width:78px !important;
    height:2px !important;

    border-radius:999px !important;

    pointer-events:none !important;

    background:
        linear-gradient(
            90deg,

            rgba(67,231,255,0) 0%,

            rgba(67,231,255,.015) 12%,

            rgba(67,231,255,.035) 24%,

            rgba(67,231,255,.075) 36%,

            rgba(67,231,255,.15) 49%,

            rgba(67,231,255,.27) 61%,

            rgba(67,231,255,.43) 72%,

            rgba(67,231,255,.63) 82%,

            rgba(76,229,255,.82) 90%,

            rgba(157,246,255,.96) 96%,

            #ffffff 100%
        ) !important;

    /*
     * Tight bloom around the tip/body.
     * No wide capsule glow.
     */
    box-shadow:
        0 0 2px rgba(255,255,255,.42),
        0 0 5px rgba(67,231,255,.38),
        0 0 9px rgba(67,231,255,.18) !important;

    opacity:0;

    transform:none !important;

    animation:
        accountEnergyTracerV4
        2.75s
        cubic-bezier(.42,0,.58,1)
        infinite !important;

    will-change:
        left,
        opacity;
}


/* ============================================================
   PREMIUM SINGLE-STREAK MOTION
   ============================================================ */

@keyframes accountEnergyTracerV4{

    /*
     * Quiet source phase.
     */
    0%,
    5%{
        left:-52px;
        opacity:0;
    }


    /*
     * Smooth ignition.
     */
    10%{
        left:-48px;
        opacity:.18;
    }


    16%{
        left:-35px;
        opacity:.72;
    }


    22%{
        left:-18px;
        opacity:1;
    }


    /*
     * Main travel.
     */
    43%{
        left:27%;
        opacity:1;
    }


    65%{
        left:55%;
        opacity:1;
    }


    81%{
        left:calc(100% - 88px);
        opacity:.96;
    }


    /*
     * Destination approach.
     */
    89%{
        left:calc(100% - 78px);
        opacity:.76;
    }


    /*
     * Smooth single fade-out.
     */
    95%{
        left:calc(100% - 66px);
        opacity:.26;
    }


    100%{
        left:calc(100% - 58px);
        opacity:0;
    }

}


/* ============================================================
   SOURCE FLASH — SUBTLE
   ============================================================ */

.account-energy-balance-signal::after{
    animation:
        accountEnergyTracerV4SourceFlash
        2.75s
        ease-out
        infinite !important;
}


@keyframes accountEnergyTracerV4SourceFlash{

    0%,
    6%{
        opacity:0;
        transform:scale(.78);
    }

    11%{
        opacity:.58;
        transform:scale(.96);
    }

    17%{
        opacity:.12;
        transform:scale(1.34);
    }

    24%,
    100%{
        opacity:0;
        transform:scale(1.50);
    }

}


/* ============================================================
   LIVE WALLET RECEIVE PULSE
   ============================================================ */

.account-energy-balance-state{
    animation:
        accountEnergyTracerV4Receive
        2.75s
        ease-in-out
        infinite !important;
}


@keyframes accountEnergyTracerV4Receive{

    0%,
    81%{
        color:#4fe4ff;
        text-shadow:none;
    }

    89%{
        color:#c9faff;

        text-shadow:
            0 0 4px rgba(79,228,255,.72),
            0 0 9px rgba(79,228,255,.28);
    }

    97%,
    100%{
        color:#4fe4ff;
        text-shadow:none;
    }

}


/* Reduced motion */
@media(prefers-reduced-motion:reduce){

    .account-energy-value-grid::after,
    .account-energy-balance-signal::after,
    .account-energy-balance-state{
        animation:none !important;
    }

}


/* ============================================================
   END ACCOUNT ENERGY CORE
   LIVE WALLET ENERGY TRACER V4
   ============================================================ */

/* ============================================================
   PREMONEON DASHBOARD
   ACCOUNT CORE — PREMIUM COMPOSITION V1

   Presentation only.
   No data / referral / account logic changes.
   ============================================================ */


/* ------------------------------------------------------------
   CORE COMPOSITION
   ------------------------------------------------------------ */

.dashboard-header .account-core{
    width:100%;
    min-width:0;

    display:flex !important;
    flex-direction:column;

    padding-bottom:0 !important;
}

.dashboard-header .account-core > div{
    width:100%;
    min-width:0;

    display:flex;
    flex-direction:column;
}


/* ------------------------------------------------------------
   WALLET IDENTITY
   Stronger hierarchy, less wasted vertical space.
   ------------------------------------------------------------ */

.dashboard-header .account-core .account-title{
    margin:
        9px
        0
        0 !important;

    font-size:
        clamp(
            1.35rem,
            2.4vw,
            2.15rem
        ) !important;

    line-height:
        1.05 !important;

    letter-spacing:
        -.035em;

    color:
        #f3fbff;

    text-shadow:
        0 0 18px
        rgba(71,228,255,.055);
}


.dashboard-header .account-core .account-sub{
    max-width:
        620px;

    margin-top:
        8px !important;

    color:
        #708a97;

    font-size:
        .70rem !important;

    line-height:
        1.5 !important;

    letter-spacing:
        .012em;
}


/* ------------------------------------------------------------
   ACCOUNT STATUS MATRIX

   Existing:
   Registered
   Sponsor
   Purchase
   Withdraw

   Reworked as premium protocol cells.
   ------------------------------------------------------------ */

.dashboard-header .account-core .account-meta{
    width:100%;

    display:grid !important;

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

    gap:
        7px !important;

    margin-top:
        14px !important;

    overflow:visible !important;
}


.dashboard-header .account-core .meta-cell{
    position:relative;

    min-width:0;

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

    gap:8px;

    min-height:
        36px;

    padding:
        8px
        11px !important;

    border:
        1px solid
        rgba(79,220,255,.105) !important;

    background:
        linear-gradient(
            135deg,
            rgba(8,27,38,.72),
            rgba(3,13,21,.84)
        ) !important;

    color:
        #d9edf3;

    font-size:
        .62rem !important;

    line-height:
        1.2;

    border-radius:
        2px;

    overflow:hidden;

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


/*
 * Tiny protocol accent.
 */
.dashboard-header .account-core .meta-cell::before{
    content:"";

    position:absolute;

    left:0;
    top:7px;
    bottom:7px;

    width:2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(67,231,255,.58),
            transparent
        );

    opacity:.72;
}


.dashboard-header .account-core .meta-cell b{
    flex:0 0 auto;

    color:
        #708996 !important;

    font-size:
        .47rem;

    font-weight:
        850;

    letter-spacing:
        .075em;

    text-transform:
        uppercase;
}


/*
 * Actual value inside cell.
 * YES / wallet address remains visually stronger.
 */
.dashboard-header .account-core .meta-cell{
    font-weight:
        800;
}


/* ------------------------------------------------------------
   REFERRAL TERMINAL
   ------------------------------------------------------------ */

.dashboard-header .account-core .dashboard-referral{
    position:relative;

    width:100%;

    margin-top:
        13px !important;

    padding-top:
        10px;

    border-top:
        1px solid
        rgba(73,220,255,.08);

    overflow:visible !important;
}


/*
 * Small active node on divider.
 */
.dashboard-header .account-core .dashboard-referral::before{
    content:"";

    position:absolute;

    left:0;
    top:-2px;

    width:4px;
    height:4px;

    border-radius:50%;

    background:
        #43e7ff;

    box-shadow:
        0 0 6px
        rgba(67,231,255,.65);
}


.dashboard-header .account-core .dashboard-referral-label{
    margin-bottom:
        6px !important;

    color:
        #6e8996 !important;

    font-size:
        .48rem !important;

    font-weight:
        850;

    letter-spacing:
        .12em;
}


/* ------------------------------------------------------------
   REFERRAL URL PLATE
   ------------------------------------------------------------ */

.dashboard-header .account-core .dashboard-referral-value{
    position:relative;

    width:100%;

    padding:
        10px
        12px !important;

    border:
        1px solid
        rgba(67,231,255,.12) !important;

    background:
        linear-gradient(
            90deg,
            rgba(6,25,35,.78),
            rgba(4,15,23,.72)
        ) !important;

    color:
        #d9f7ff !important;

    font-size:
        .62rem !important;

    line-height:
        1.25;

    letter-spacing:
        .015em;

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

    transition:
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}


.dashboard-header .account-core .dashboard-referral-value:hover{
    border-color:
        rgba(67,231,255,.27) !important;

    background:
        linear-gradient(
            90deg,
            rgba(7,30,42,.88),
            rgba(4,18,27,.82)
        ) !important;

    box-shadow:
        inset 0 0 18px
        rgba(67,231,255,.025);
}


/* ------------------------------------------------------------
   COPY REFERRAL BUTTON
   ------------------------------------------------------------ */

.dashboard-header .account-core .dashboard-referral-copy{
    width:100% !important;
    min-width:0 !important;

    min-height:
        48px;

    margin-top:
        7px !important;

    padding:
        9px
        13px !important;

    display:flex !important;

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

    gap:
        14px;

    text-align:left;

    border-color:
        rgba(65,223,255,.14) !important;

    background:
        linear-gradient(
            100deg,
            rgba(5,24,34,.78),
            rgba(3,14,22,.88)
        ) !important;

    transition:
        transform .18s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}


.dashboard-header .account-core .dashboard-referral-copy strong{
    flex:
        0 0 auto;

    color:
        #79eaff;

    font-size:
        .55rem;

    font-weight:
        900;

    letter-spacing:
        .085em;
}


.dashboard-header .account-core .dashboard-referral-copy small{
    margin:0 !important;

    color:
        #667f8b;

    font-size:
        .49rem;

    font-weight:
        700;

    line-height:
        1.25;

    letter-spacing:
        .025em;

    text-align:right;
}


.dashboard-header .account-core .dashboard-referral-copy:hover:not(:disabled){
    transform:
        translateY(-1px);

    border-color:
        rgba(67,231,255,.34) !important;

    background:
        linear-gradient(
            100deg,
            rgba(7,32,44,.90),
            rgba(3,18,27,.94)
        ) !important;

    box-shadow:
        0 7px 20px
        rgba(0,0,0,.16),
        inset 0 0 18px
        rgba(67,231,255,.025);
}


/* ------------------------------------------------------------
   PANEL BOTTOM SPACING
   Remove unnecessary dead area while retaining breathing room.
   ------------------------------------------------------------ */

.dashboard-header > .neo-panel:has(.account-core)
    > .neo-panel-inner{

    padding-bottom:
        13px !important;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media(min-width:1000px){

    /*
     * Four compact protocol cells on wide desktop.
     */
    .dashboard-header .account-core .account-meta{
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );
    }


    .dashboard-header .account-core .meta-cell{
        min-height:
            42px;

        flex-direction:column;

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

        gap:5px;
    }


    .dashboard-header .account-core .dashboard-referral-copy{
        width:
            min(
                100%,
                430px
            ) !important;
    }

}


/* ============================================================
   MOBILE
   Preserve current containment and readability.
   ============================================================ */

@media(max-width:620px){

    .dashboard-header .account-core .account-title{
        font-size:
            1.55rem !important;
    }


    .dashboard-header .account-core .account-meta{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            6px !important;
    }


    .dashboard-header .account-core .meta-cell{
        min-height:
            34px;

        padding:
            7px
            9px !important;

        font-size:
            .59rem !important;
    }


    .dashboard-header .account-core .dashboard-referral-copy{
        display:block !important;

        min-height:
            50px;

        text-align:left;
    }


    .dashboard-header .account-core .dashboard-referral-copy small{
        display:block;

        margin-top:
            4px !important;

        text-align:left;
    }

}


/* ============================================================
   END PREMONEON DASHBOARD
   ACCOUNT CORE — PREMIUM COMPOSITION V1
   ============================================================ */

/* ============================================================
   DASHBOARD TOP COMPOSITION V3
   ASYMMETRIC PREMIUM PROPORTION

   Account Core:
   compact / content-driven height

   Account Energy Core:
   retains its finalized visual height
   ============================================================ */


/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

@media(min-width:1000px){

    /*
     * Top-align both cards.
     * Never stretch Account Core to Energy Core height.
     */
    .dashboard-header{
        align-items:start !important;
    }


    /*
     * Restore natural outer-panel height.
     */
    .dashboard-header > .neo-panel{
        align-self:start !important;
        height:auto !important;
    }


    .dashboard-header > .neo-panel > .neo-panel-inner{
        height:auto !important;
    }


    /*
     * ACCOUNT CORE
     * Content determines card height.
     */
    .dashboard-header > .neo-panel:has(.account-core){
        height:auto !important;
        min-height:0 !important;
        align-self:start !important;
    }


    .dashboard-header
    > .neo-panel:has(.account-core)
    > .neo-panel-inner{

        height:auto !important;
        min-height:0 !important;

        padding-bottom:18px !important;
    }


    .dashboard-header .account-core{
        height:auto !important;
        min-height:0 !important;

        align-self:start !important;

        padding-bottom:0 !important;
    }


    .dashboard-header .account-core > div{
        height:auto !important;
        min-height:0 !important;
    }


    /*
     * Remove extra bottom margin from final action.
     * Panel padding itself provides the final breathing room.
     */
    .dashboard-header
    .account-core
    #copyReferralLinkButton{

        margin-bottom:0 !important;
    }


    /*
     * ENERGY CORE
     *
     * Keep its own visual geometry.
     * Do not inherit Account Core sizing.
     */
    .dashboard-header > .neo-panel:has(.account-energy-core){
        height:auto !important;
        align-self:start !important;
    }


    .dashboard-header .account-energy-core{
        height:auto !important;
        min-height:0 !important;
    }

}


/* ------------------------------------------------------------
   MOBILE / TABLET
   Both already use natural stacked heights.
   ------------------------------------------------------------ */

@media(max-width:999px){

    .dashboard-header{
        align-items:start !important;
    }

    .dashboard-header > .neo-panel{
        height:auto !important;
        align-self:start !important;
    }

    .dashboard-header > .neo-panel > .neo-panel-inner{
        height:auto !important;
    }

    .dashboard-header .account-core{
        height:auto !important;
        min-height:0 !important;
    }

}


/* ============================================================
   END DASHBOARD TOP COMPOSITION V3
   ============================================================ */

/* ============================================================
   DASHBOARD — ACCOUNT CORE FINAL PREMIUM LAYOUT V1
   ============================================================ */


/*
 * Account Core uses the full available height of its panel.
 * Content is distributed intentionally instead of creating
 * one large empty region at the bottom.
 */

.dashboard-header .account-core{
    height:100% !important;
    min-height:0 !important;
}

.dashboard-header .account-core > div{
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

    min-height:0;
}


/* ------------------------------------------------------------
   EXISTING PRIMARY CONTENT
   ------------------------------------------------------------ */

.dashboard-header .account-title{
    margin-bottom:6px;
}

.dashboard-header .account-sub{
    margin-bottom:0;
}


/*
 * Existing account state matrix.
 */

.dashboard-header .account-meta{
    margin-top:16px;
}


/*
 * Referral section remains visually important,
 * but spacing is tightened.
 */

.dashboard-header .dashboard-referral{
    margin-top:17px;
}

.dashboard-header .dashboard-referral-copy{
    margin-top:9px;
}


/* ------------------------------------------------------------
   RUNTIME IDENTITY STRIP
   ------------------------------------------------------------ */

.account-core-runtime{
    width:100%;

    display:grid;
    grid-template-columns:
        minmax(0,1.05fr)
        minmax(0,.95fr);

    gap:8px;

    margin-top:auto;
    padding-top:16px;

    border-top:
        1px solid
        rgba(75,220,255,.11);
}


/*
 * Premium compact telemetry cell.
 */

.account-core-runtime-item{
    position:relative;

    min-width:0;
    min-height:48px;

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

    gap:5px;

    padding:
        9px
        11px;

    border:
        1px solid
        rgba(78,219,255,.10);

    background:
        linear-gradient(
            135deg,
            rgba(10,32,43,.58),
            rgba(4,17,25,.36)
        );

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


/*
 * Small technical corner accent.
 */

.account-core-runtime-item::before{
    content:"";

    position:absolute;

    top:-1px;
    left:-1px;

    width:17px;
    height:1px;

    background:
        rgba(76,229,255,.48);

    box-shadow:
        0 0 8px
        rgba(76,229,255,.20);
}


.account-core-runtime-item > span{
    color:
        rgba(135,162,176,.66);

    font-size:.42rem;
    line-height:1;

    font-weight:800;

    letter-spacing:.105em;

    white-space:nowrap;
}


.account-core-runtime-item > strong{
    min-width:0;

    overflow:hidden;

    color:
        rgba(222,240,246,.90);

    font-size:.54rem;
    line-height:1.25;

    font-weight:850;

    letter-spacing:.035em;

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


/* ------------------------------------------------------------
   LIVE STATE
   ------------------------------------------------------------ */

.account-core-runtime-item.status > strong{
    color:#55e7ff;

    text-shadow:
        0 0 10px
        rgba(73,226,255,.22);
}


/* ------------------------------------------------------------
   NETWORK / CHAIN
   Same gold family as Account Energy TOTAL VALUE.
   ------------------------------------------------------------ */

.account-core-network-live{
    color:rgb(255,201,79) !important;

    text-shadow:
        0 0 8px
        rgba(255,201,79,.15);

    animation:
        accountCoreNetworkBlink
        2.25s
        ease-in-out
        infinite;
}


@keyframes accountCoreNetworkBlink{

    0%,
    100%{
        opacity:.72;

        text-shadow:
            0 0 4px
            rgba(255,201,79,.10);
    }

    48%{
        opacity:1;

        text-shadow:
            0 0 8px
            rgba(255,201,79,.34),
            0 0 16px
            rgba(255,201,79,.13);
    }

}


/* ------------------------------------------------------------
   DESKTOP — ACCOUNT CORE = ACCOUNT ENERGY CORE HEIGHT
   ------------------------------------------------------------ */

@media(min-width:960px){

    .dashboard-header{
        align-items:stretch !important;
    }

    .dashboard-header > .neo-panel{
        height:100% !important;
        align-self:stretch !important;
    }

    .dashboard-header > .neo-panel > .neo-panel-inner{
        height:100% !important;
    }

    .dashboard-header .account-core{
        height:100% !important;
    }

}


/* ------------------------------------------------------------
   MOBILE / TABLET
   Natural stacked cards — never force desktop height.
   ------------------------------------------------------------ */

@media(max-width:959px){

    .dashboard-header{
        align-items:start !important;
    }

    .dashboard-header > .neo-panel,
    .dashboard-header > .neo-panel > .neo-panel-inner,
    .dashboard-header .account-core,
    .dashboard-header .account-core > div{
        height:auto !important;
    }

    .account-core-runtime{
        margin-top:16px;
        padding-top:14px;
    }

}


@media(max-width:520px){

    .account-core-runtime{
        grid-template-columns:1fr 1fr;

        gap:7px;
    }

    .account-core-runtime-item{
        min-height:45px;

        padding:
            8px
            9px;
    }

    .account-core-runtime-item > span{
        font-size:.39rem;
    }

    .account-core-runtime-item > strong{
        font-size:.49rem;
    }

}


/*
 * Accessibility:
 * do not blink when reduced motion is requested.
 */

@media(prefers-reduced-motion:reduce){

    .account-core-network-live{
        animation:none !important;
        opacity:1 !important;
    }

}


/* ============================================================
   END DASHBOARD — ACCOUNT CORE FINAL PREMIUM LAYOUT V1
   ============================================================ */

/* ============================================================
   PREMONEON DASHBOARD
   LOCKED TOP DESIGN — FINAL OVERRIDE V1

   - Account Core == Account Energy Core height
   - Premium Account Core fill
   - Network / Chain true gold blink
   - Mobile remains natural-height
   ============================================================ */


/* ============================================================
   DESKTOP — LOCKED EQUAL HEIGHT
   ============================================================ */

@media(min-width:960px){

    /*
     * One shared row.
     * Both cards stretch to the exact same row height.
     */
    .dashboard-header{
        align-items:stretch !important;
    }


    .dashboard-header > .neo-panel{
        align-self:stretch !important;
        height:auto !important;
    }


    .dashboard-header > .neo-panel > .neo-panel-inner{
        height:100% !important;

        display:flex;
        flex-direction:column;
    }


    /*
     * ACCOUNT CORE
     * Consume the full shared row height.
     */
    .dashboard-header .account-core{
        flex:1 1 auto !important;

        width:100%;
        height:100% !important;
        min-height:0 !important;

        display:flex !important;
        flex-direction:column;
    }


    .dashboard-header .account-core > div{
        flex:1 1 auto;

        width:100%;
        height:100% !important;
        min-height:0 !important;

        display:flex !important;
        flex-direction:column;
    }


    /*
     * Push runtime telemetry toward the lower section
     * so the left card uses its height intentionally.
     */
    .dashboard-header .account-core-runtime{
        margin-top:auto !important;
    }


    /*
     * ENERGY CORE
     * Also fills the same outer panel height.
     */
    .dashboard-header .account-energy-core{
        flex:1 1 auto !important;

        width:100%;
        height:100% !important;
        min-height:0 !important;
    }

}


/* ============================================================
   ACCOUNT CORE — LOCKED PREMIUM SPACING
   ============================================================ */

.dashboard-header .account-core .account-title{
    margin-top:10px !important;
    margin-bottom:7px !important;
}


.dashboard-header .account-core .account-sub{
    margin-top:0 !important;
    margin-bottom:0 !important;
}


.dashboard-header .account-core .account-meta{
    margin-top:16px !important;
}


.dashboard-header .account-core .dashboard-referral{
    margin-top:16px !important;
}


.dashboard-header .account-core .dashboard-referral-copy{
    margin-top:8px !important;
}


/*
 * Give the runtime telemetry stronger visual presence
 * so the lower portion does not feel like filler.
 */
.account-core-runtime{
    gap:9px !important;

    padding-top:17px !important;

    border-top:
        1px solid
        rgba(67,231,255,.12) !important;
}


.account-core-runtime-item{
    min-height:49px !important;

    padding:
        10px
        12px !important;

    border:
        1px solid
        rgba(67,231,255,.13) !important;

    background:
        linear-gradient(
            135deg,
            rgba(8,29,40,.78),
            rgba(3,15,23,.72)
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.018),
        inset 0 0 18px
        rgba(67,231,255,.018) !important;
}


.account-core-runtime-item > span{
    color:
        rgba(130,158,171,.72) !important;

    font-size:
        .43rem !important;

    font-weight:
        850 !important;

    letter-spacing:
        .11em !important;
}


.account-core-runtime-item > strong{
    font-size:
        .56rem !important;

    font-weight:
        850 !important;
}


/* ============================================================
   NETWORK / CHAIN
   TRUE BLINK + TOTAL VALUE GOLD
   ============================================================ */

.account-core-runtime-item.network{
    position:relative;

    border-color:
        rgba(255,201,79,.16) !important;
}


/*
 * Gold edge accent.
 */
.account-core-runtime-item.network::after{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:28px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(255,201,79,.95),
            rgba(255,201,79,0)
        );

    box-shadow:
        0 0 8px
        rgba(255,201,79,.22);
}


/*
 * Exact TOTAL VALUE gold family.
 */
.account-core-network-live{
    color:#FFC94F !important;

    opacity:1;

    text-shadow:
        0 0 5px
        rgba(255,201,79,.20);

    animation:
        accountCoreLockedNetworkBlink
        1.65s
        ease-in-out
        infinite !important;

    will-change:
        opacity,
        text-shadow,
        filter;
}


/*
 * Stronger blink:
 * clearly visible but still premium.
 */
@keyframes accountCoreLockedNetworkBlink{

    0%{
        opacity:.58;

        filter:
            brightness(.88);

        text-shadow:
            0 0 2px
            rgba(255,201,79,.08);
    }

    38%{
        opacity:1;

        filter:
            brightness(1.18);

        text-shadow:
            0 0 5px
            rgba(255,201,79,.62),

            0 0 12px
            rgba(255,201,79,.34),

            0 0 20px
            rgba(255,201,79,.12);
    }

    58%{
        opacity:.92;

        filter:
            brightness(1.04);

        text-shadow:
            0 0 4px
            rgba(255,201,79,.34);
    }

    100%{
        opacity:.58;

        filter:
            brightness(.88);

        text-shadow:
            0 0 2px
            rgba(255,201,79,.08);
    }

}


/*
 * Small live pulse point beside the Network/Chain value.
 */
.account-core-network-live::before{
    content:"";

    display:inline-block;

    width:4px;
    height:4px;

    margin-right:6px;

    vertical-align:middle;

    border-radius:50%;

    background:
        #FFC94F;

    box-shadow:
        0 0 5px
        rgba(255,201,79,.85);

    animation:
        accountCoreNetworkDotPulse
        1.65s
        ease-in-out
        infinite;
}


@keyframes accountCoreNetworkDotPulse{

    0%,
    100%{
        opacity:.40;
        transform:scale(.78);
    }

    38%{
        opacity:1;
        transform:scale(1.18);
    }

}


/* ============================================================
   STATE — LIVE
   ============================================================ */

.account-core-runtime-item.status > strong{
    color:#43E7FF !important;

    text-shadow:
        0 0 8px
        rgba(67,231,255,.22);
}


/* ============================================================
   MOBILE / TABLET
   Never force equal desktop height.
   ============================================================ */

@media(max-width:959px){

    .dashboard-header{
        align-items:start !important;
    }


    .dashboard-header > .neo-panel{
        align-self:start !important;
        height:auto !important;
    }


    .dashboard-header > .neo-panel > .neo-panel-inner{
        height:auto !important;
        display:block;
    }


    .dashboard-header .account-core,
    .dashboard-header .account-core > div,
    .dashboard-header .account-energy-core{
        height:auto !important;
        min-height:0 !important;
    }


    .dashboard-header .account-core-runtime{
        margin-top:16px !important;
    }

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media(prefers-reduced-motion:reduce){

    .account-core-network-live,
    .account-core-network-live::before{
        animation:none !important;
        opacity:1 !important;
        filter:none !important;
    }

}


/* ============================================================
   END PREMONEON DASHBOARD
   LOCKED TOP DESIGN — FINAL OVERRIDE V1
   ============================================================ */


/* ============================================================
   DASHBOARD — ENERGY CORE BOTTOM ALIGNMENT FINAL
   Exact correction from live geometry audit

   Account Core inner bottom padding : 13px
   Energy Core inner bottom padding  : 22px
   Difference                        : 9px

   Normalize Energy Core to 13px.
   ============================================================ */

@media(min-width:960px){

    .dashboard-header
    > .neo-panel:has(.account-energy-core)
    > .neo-panel-inner{

        padding-bottom:13px !important;
    }

}

/* ============================================================
   END DASHBOARD — ENERGY CORE BOTTOM ALIGNMENT FINAL
   ============================================================ */

/* ============================================================
   DASHBOARD TOP CORES
   TRUE VISIBLE EQUAL HEIGHT — FINAL STRUCTURAL FIX

   Root cause:
   Outer panels were equal, but .account-energy-core did not
   consume the remaining inner-panel height.

   Solution:
   neo-panel-inner = 2-row grid
   row 1 = kicker
   row 2 = core / remaining height
   ============================================================ */

@media(min-width:960px){

    /*
     * Both top panels already have the same outer height.
     * Their inner structure must now use the same row model.
     */
    .dashboard-header > .neo-panel > .neo-panel-inner{
        height:100% !important;

        display:grid !important;

        grid-template-rows:
            auto
            minmax(0,1fr) !important;

        align-items:stretch !important;
    }


    /*
     * Kicker owns row 1 only.
     */
    .dashboard-header
    > .neo-panel
    > .neo-panel-inner
    > .panel-kicker{

        grid-row:1;

        align-self:start;
    }


    /*
     * LEFT CORE
     * Fill row 2.
     */
    .dashboard-header
    .account-core{

        grid-row:2;

        align-self:stretch !important;

        height:auto !important;
        min-height:0 !important;
    }


    .dashboard-header
    .account-core
    > div{

        height:100% !important;
        min-height:0 !important;
    }


    /*
     * RIGHT ENERGY CORE
     * This is the critical correction.
     *
     * Do NOT use content-driven height here.
     * Fill the exact remaining row height.
     */
    .dashboard-header
    .account-energy-core{

        grid-row:2;

        align-self:stretch !important;

        width:100% !important;

        height:auto !important;
        min-height:0 !important;

        box-sizing:border-box !important;
    }


    /*
     * Remove inherited flex sizing from previous iterations.
     * Grid now owns the geometry.
     */
    .dashboard-header
    .account-core,
    .dashboard-header
    .account-energy-core{

        flex:none !important;
    }


    /*
     * Normalize inner-panel bottom breathing room.
     */
    .dashboard-header
    > .neo-panel
    > .neo-panel-inner{

        padding-bottom:13px !important;
    }

}


/* ------------------------------------------------------------
   MOBILE
   Do not use desktop equal-height composition.
   ------------------------------------------------------------ */

@media(max-width:959px){

    .dashboard-header
    > .neo-panel
    > .neo-panel-inner{

        display:block !important;

        height:auto !important;
    }


    .dashboard-header
    .account-core,
    .dashboard-header
    .account-energy-core{

        height:auto !important;
        min-height:0 !important;

        flex:none !important;
    }

}


/* ============================================================
   END DASHBOARD TOP CORES
   TRUE VISIBLE EQUAL HEIGHT
   ============================================================ */


/* ============================================================
   PREMONEON DASHBOARD
   TOP CORE CANONICAL GEOMETRY V1

   SOURCE OF TRUTH:
   - Outer cards stretch from the same grid row
   - Both neo-panel-inner elements fill the same height
   - Both core bodies fill the same second row
   - No manual top offsets
   - No fake visual extensions
   - No viewport-dependent pixel calibration
   ============================================================ */

@media(min-width:960px){

    .dashboard-header{
        align-items:stretch !important;
    }


    /* --------------------------------------------------------
       OUTER PANELS
       -------------------------------------------------------- */

    .dashboard-header > .neo-panel{
        align-self:stretch !important;

        height:auto !important;

        min-height:0 !important;
    }


    /* --------------------------------------------------------
       INNER PANELS
       SAME PHYSICAL HEIGHT
       -------------------------------------------------------- */

    .dashboard-header
    > .neo-panel
    > .neo-panel-inner{

        height:100% !important;

        min-height:0 !important;

        box-sizing:border-box !important;

        display:grid !important;

        grid-template-rows:
            auto
            minmax(0,1fr) !important;

        align-items:stretch !important;

        padding-bottom:13px !important;
    }


    /* --------------------------------------------------------
       KICKERS
       -------------------------------------------------------- */

    .dashboard-header
    > .neo-panel
    > .neo-panel-inner
    > .panel-kicker{

        grid-row:1;

        align-self:start;
    }


    /* --------------------------------------------------------
       ACCOUNT CORE
       -------------------------------------------------------- */

    .dashboard-header
    .account-core{

        grid-row:2;

        align-self:stretch !important;

        height:auto !important;

        min-height:0 !important;

        flex:none !important;
    }


    .dashboard-header
    .account-core
    > div{

        height:100% !important;

        min-height:0 !important;
    }


    /* --------------------------------------------------------
       ENERGY CORE
       EXACT SAME STRUCTURAL ROW AS ACCOUNT CORE
       -------------------------------------------------------- */

    .dashboard-header
    .account-energy-core{

        grid-row:2;

        align-self:stretch !important;

        width:100% !important;

        height:auto !important;

        min-height:0 !important;

        flex:none !important;

        box-sizing:border-box !important;
    }


    /* --------------------------------------------------------
       REMOVE ALL HISTORICAL MANUAL CALIBRATION
       -------------------------------------------------------- */

    .dashboard-header
    .account-energy-core
    .account-energy-stage{

        position:relative !important;

        top:0 !important;

        transform:none !important;
    }


    .dashboard-header
    .account-energy-core
    .account-energy-balance{

        position:relative !important;

        top:0 !important;

        transform:none !important;

        /*
         * Let the wallet plate size from its real content.
         * It must NOT determine panel height.
         */

        height:auto !important;

        min-height:66px !important;

        box-sizing:border-box !important;

        border-bottom:
            1px solid
            rgba(87,229,255,.16) !important;

        overflow:visible !important;
    }


    /*
     * Permanently disable the abandoned fake
     * bottom-extension experiment.
     */

    .dashboard-header
    .account-energy-core
    .account-energy-balance::after{

        content:none !important;

        display:none !important;
    }

}


/* ============================================================
   MOBILE / NARROW VIEW
   Natural stacked composition.
   ============================================================ */

@media(max-width:959px){

    .dashboard-header{
        align-items:start !important;
    }


    .dashboard-header
    > .neo-panel{

        align-self:start !important;

        height:auto !important;
    }


    .dashboard-header
    > .neo-panel
    > .neo-panel-inner{

        display:block !important;

        height:auto !important;
    }


    .dashboard-header
    .account-core,
    .dashboard-header
    .account-energy-core{

        height:auto !important;

        min-height:0 !important;

        flex:none !important;
    }


    .dashboard-header
    .account-energy-core
    .account-energy-stage,
    .dashboard-header
    .account-energy-core
    .account-energy-balance{

        top:auto !important;

        transform:none !important;
    }


    .dashboard-header
    .account-energy-core
    .account-energy-balance{

        height:auto !important;

        min-height:0 !important;
    }

}


/* ============================================================
   END PREMONEON DASHBOARD
   TOP CORE CANONICAL GEOMETRY V1
   ============================================================ */


/* ============================================================
   DASHBOARD TOP CARDS
   FULL-WIDTH CANONICAL EQUAL HEIGHT V1

   Fixes viewport-dependent desktop mismatch.
   Applies only to true wide desktop.
   ============================================================ */

@media(min-width:1200px){

    /*
     * The dashboard row itself owns the height.
     * Both direct panel children MUST stretch to that row.
     */
    .dashboard-header{
        display:grid !important;
        align-items:stretch !important;
    }

    .dashboard-header > .neo-panel{
        align-self:stretch !important;

        height:100% !important;
        min-height:0 !important;

        box-sizing:border-box !important;
    }

    /*
     * Both visible panel interiors consume the full
     * outer-card height.
     */
    .dashboard-header
    > .neo-panel
    > .neo-panel-inner{

        height:100% !important;
        min-height:0 !important;

        box-sizing:border-box !important;

        display:grid !important;

        grid-template-rows:
            auto
            minmax(0,1fr) !important;

        align-items:stretch !important;

        padding-top:22px !important;
        padding-bottom:13px !important;
    }

    /*
     * Both primary core bodies occupy exactly
     * the same second grid row.
     */
    .dashboard-header
    > .neo-panel
    > .neo-panel-inner
    > .account-core,

    .dashboard-header
    > .neo-panel
    > .neo-panel-inner
    > .account-energy-core{

        grid-row:2 !important;

        align-self:stretch !important;

        height:100% !important;
        min-height:0 !important;

        box-sizing:border-box !important;
    }

    /*
     * Remove historical Energy-only vertical calibration.
     * Internal visual assets retain their natural dimensions.
     */
    .dashboard-header
    .account-energy-core
    .account-energy-stage,

    .dashboard-header
    .account-energy-core
    .account-energy-balance{

        top:0 !important;
        transform:none !important;
    }

}


/* ============================================================
   END FULL-WIDTH CANONICAL EQUAL HEIGHT V1
   ============================================================ */

/* ============================================================
   DASHBOARD — ACCOUNT ENERGY CORE
   CANONICAL VISIBLE OUTER FRAME V1

   IMPORTANT:
   Geometry is already verified equal:
   LEFT / RIGHT outer height difference = 0px.

   This layer fixes only the visible painted frame.
   ============================================================ */

@media(min-width:960px){

    /*
     * Do not alter layout geometry.
     */
    .dashboard-header
    > .neo-panel:has(.account-energy-core){

        position:relative !important;

        /*
         * ROOT FIX:
         * This panel must stretch exactly like Account Core.
         *
         * The previous height:auto !important declaration
         * overrode the shared equal-height desktop rules
         * because this :has(...) selector has higher specificity.
         */
        align-self:stretch !important;

        height:100% !important;
        min-height:0 !important;

        box-sizing:border-box !important;

        /*
         * Explicit inset frame painted against the TRUE
         * measured outer-panel rectangle.
         */
        box-shadow:
            inset 0 0 0 1px var(--line),
            inset 0 1px 0 rgba(255,255,255,.025),
            0 18px 48px rgba(0,0,0,.18) !important;
    }


    /*
     * Guarantee the visible bottom edge at the actual
     * outer-panel bottom regardless of internal layers.
     */
    .dashboard-header
    > .neo-panel:has(.account-energy-core){

        border-bottom:
            1px solid var(--line) !important;
    }


    /*
     * Repaint a subtle bottom cyan line on the true edge.
     * Existing ::after already lives at bottom:0;
     * these rules remove any inherited displacement.
     */
    .dashboard-header
    > .neo-panel:has(.account-energy-core)::after{

        top:auto !important;
        bottom:0 !important;

        left:0 !important;
        right:0 !important;

        height:1px !important;

        transform:scaleX(.24) !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(87,229,255,.68),
                transparent
            ) !important;
    }


    /*
     * Lock the lower-right marker to the TRUE panel edge.
     */
    .dashboard-header
    > .neo-panel:has(.account-energy-core)
    > .corner-mark.br{

        position:absolute !important;

        right:0 !important;
        bottom:0 !important;

        top:auto !important;
        left:auto !important;

        transform:none !important;

        z-index:20 !important;
    }

}


/* ============================================================
   END ACCOUNT ENERGY CORE
   CANONICAL VISIBLE OUTER FRAME V1
   ============================================================ */

/* PREMONEON_EARNINGS_MOBILE_FINAL_V1_START */

/*
 * ============================================================
 * EARNINGS — FINAL MOBILE NORMALIZATION
 * ============================================================
 *
 * Scope:
 *   - Maturity Schedules
 *   - Unilevel Reward History
 *
 * CSS ONLY.
 *
 * Does NOT modify:
 *   - EarningsManager logic
 *   - RewardManager logic
 *   - withdrawal logic
 *   - blockchain reads
 *   - accounting
 *   - desktop geometry
 * ============================================================
 */


@media (max-width:760px){


    /*
     * --------------------------------------------------------
     * OUTER SECTION NORMALIZATION
     * --------------------------------------------------------
     */

    .earnings-maturity-core,
    .earnings-unilevel-core{

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin-left:0 !important;
        margin-right:0 !important;

        overflow:hidden;
    }


    /*
     * Reduce desktop panel padding on narrow displays.
     */

    .earnings-maturity-core > .neo-panel-inner,
    .earnings-unilevel-core > .neo-panel-inner{

        width:100%;
        max-width:100%;
        min-width:0;

        padding:
            18px 14px
            20px !important;

        box-sizing:border-box;
    }



    /*
     * --------------------------------------------------------
     * SECTION HEADER
     * --------------------------------------------------------
     *
     * Desktop uses flex + large spacing.
     * Mobile becomes a clean vertical information block.
     */

    .earnings-maturity-core .earnings-core-head,
    .earnings-unilevel-core .earnings-core-head{

        display:flex !important;
        flex-direction:column !important;

        align-items:stretch !important;
        justify-content:flex-start !important;

        width:100%;
        max-width:100%;
        min-width:0;

        gap:12px !important;
    }


    .earnings-maturity-core .earnings-core-head > *,
    .earnings-unilevel-core .earnings-core-head > *{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;
    }



    /*
     * --------------------------------------------------------
     * TITLE
     * --------------------------------------------------------
     */

    .earnings-maturity-core .earnings-core-head h2,
    .earnings-unilevel-core .earnings-core-head h2{

        width:100%;
        max-width:100%;

        margin:
            5px 0 7px !important;

        font-size:
            clamp(1.05rem,5.5vw,1.32rem) !important;

        line-height:1.15 !important;

        letter-spacing:
            -.025em !important;

        white-space:normal !important;

        overflow-wrap:anywhere;
        word-break:normal;
    }



    /*
     * --------------------------------------------------------
     * DESCRIPTION
     * --------------------------------------------------------
     */

    .earnings-maturity-core .earnings-core-head p,
    .earnings-unilevel-core .earnings-core-head p{

        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        font-size:.66rem !important;
        line-height:1.65 !important;

        white-space:normal !important;

        overflow-wrap:anywhere;
        word-break:normal;
    }



    /*
     * --------------------------------------------------------
     * ACCOUNTING GRID
     * --------------------------------------------------------
     */

    .earnings-maturity-core
    .earnings-accounting-grid-v2,

    .earnings-unilevel-core
    .earnings-accounting-grid-v2,

    .earnings-maturity-core
    .earnings-accounting-grid,

    .earnings-unilevel-core
    .earnings-accounting-grid{

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

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

        margin-top:16px !important;
    }



    /*
     * Individual accounting cards.
     */

    .earnings-maturity-core
    .earnings-accounting-cell,

    .earnings-unilevel-core
    .earnings-accounting-cell,

    .earnings-maturity-core
    .earnings-accounting-grid > div,

    .earnings-unilevel-core
    .earnings-accounting-grid > div{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;
    }



    /*
     * --------------------------------------------------------
     * LABEL + INFO BUTTON
     * --------------------------------------------------------
     *
     * Preserve the existing locked right-side info button.
     */

    .earnings-maturity-core
    .earnings-accounting-label,

    .earnings-unilevel-core
    .earnings-accounting-label{

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            22px !important;

        align-items:center !important;

        column-gap:10px !important;
    }


    .earnings-maturity-core
    .earnings-accounting-label small,

    .earnings-unilevel-core
    .earnings-accounting-label small{

        grid-column:1;

        min-width:0;

        white-space:normal !important;

        overflow-wrap:anywhere;
    }


    .earnings-maturity-core
    .earnings-info-button,

    .earnings-unilevel-core
    .earnings-info-button{

        grid-column:2 !important;

        justify-self:end !important;
        align-self:center !important;

        width:22px !important;
        height:22px !important;

        min-width:22px !important;
        min-height:22px !important;

        margin:0 !important;

        flex:none !important;
    }



    /*
     * --------------------------------------------------------
     * MATURITY SCHEDULES
     * --------------------------------------------------------
     */

    .earnings-maturity-core
    .maturity-schedule-grid{

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        display:grid !important;

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

        gap:10px !important;

        margin-top:16px !important;
    }


    .earnings-maturity-core
    .maturity-schedule-card{

        width:100%;
        max-width:100%;
        min-width:0;

        min-height:0 !important;

        padding:15px !important;

        box-sizing:border-box;
    }


    .earnings-maturity-core
    .schedule-top{

        width:100%;
        min-width:0;

        align-items:flex-start;

        gap:8px;

        white-space:normal;
    }


    .earnings-maturity-core
    .schedule-top > *{

        min-width:0;

        overflow-wrap:anywhere;
    }


    .earnings-maturity-core
    .schedule-amount{

        margin-top:20px !important;

        font-size:
            clamp(1.45rem,8vw,1.9rem) !important;

        line-height:1.05;
    }


    .earnings-maturity-core
    .schedule-split{

        width:100%;
        min-width:0;

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


    .earnings-maturity-core
    .schedule-split > div{

        min-width:0;

        padding:9px;
    }


    .earnings-maturity-core
    .schedule-split strong{

        overflow-wrap:anywhere;
    }


    .earnings-maturity-core
    .schedule-data{

        width:100%;
        min-width:0;
    }


    .earnings-maturity-core
    .schedule-data > div{

        width:100%;
        min-width:0;

        align-items:flex-start;
    }


    .earnings-maturity-core
    .schedule-data span,

    .earnings-maturity-core
    .schedule-data b{

        min-width:0;

        overflow-wrap:anywhere;
    }



    /*
     * --------------------------------------------------------
     * UNILEVEL BALANCE
     * --------------------------------------------------------
     */

    .earnings-unilevel-core
    .unilevel-balance-core{

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

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

        margin-top:16px !important;
    }


    .earnings-unilevel-core
    .unilevel-balance-core > div{

        width:100%;
        max-width:100%;
        min-width:0;

        min-height:0;

        padding:14px;

        box-sizing:border-box;
    }



    /*
     * --------------------------------------------------------
     * UNILEVEL WITHDRAW COMMAND
     * --------------------------------------------------------
     */

    .earnings-unilevel-core
    .unilevel-command{

        width:100%;
        max-width:100%;
        min-width:0;

        display:grid;

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

        gap:9px;

        margin-top:12px;
    }


    .earnings-unilevel-core
    .unilevel-command > *{

        width:100%;
        max-width:100%;
        min-width:0;

        box-sizing:border-box;
    }



    /*
     * --------------------------------------------------------
     * UNILEVEL REWARD HISTORY TABLE
     * --------------------------------------------------------
     *
     * Keep canonical columns intact.
     * Do not compress the ledger until values become unreadable.
     *
     * Mobile gets a deliberate horizontal scroll surface.
     */

    .earnings-unilevel-core
    .table-scroll{

        display:block;

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        overflow-x:auto !important;
        overflow-y:hidden;

        -webkit-overflow-scrolling:touch;

        overscroll-behavior-x:contain;
    }


    .earnings-unilevel-core
    .earnings-ledger{

        width:max-content;
        min-width:760px !important;

        margin:0;
    }


    .earnings-unilevel-core
    .earnings-ledger th,

    .earnings-unilevel-core
    .earnings-ledger td{

        white-space:nowrap;
    }



    /*
     * --------------------------------------------------------
     * INFO POPOVER
     * --------------------------------------------------------
     */

    .earnings-maturity-core
    .earnings-info-popover,

    .earnings-unilevel-core
    .earnings-info-popover{

        width:
            min(300px,calc(100vw - 44px));

        max-width:
            min(300px,calc(100vw - 44px));

        white-space:normal;

        overflow-wrap:anywhere;
    }

}



/*
 * ============================================================
 * EXTRA NARROW PHONES
 * ============================================================
 */

@media (max-width:420px){

    .earnings-maturity-core > .neo-panel-inner,
    .earnings-unilevel-core > .neo-panel-inner{

        padding:
            16px 12px
            18px !important;
    }


    .earnings-maturity-core
    .schedule-split{

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


    .earnings-maturity-core
    .schedule-data > div{

        display:grid;

        grid-template-columns:
            minmax(0,.8fr)
            minmax(0,1.2fr);

        gap:8px;
    }


    .earnings-maturity-core
    .schedule-data b{

        text-align:right;
    }

}

/* PREMONEON_EARNINGS_MOBILE_FINAL_V1_END */


/* PREMONEON_EARNINGS_MOBILE_SCHEDULE_HISTORY_V1_START */

/*
 * ============================================================
 * EARNINGS MOBILE — SCHEDULE + HISTORY NORMALIZATION
 *
 * - Remove visible EARNINGSMANAGER terminal captions
 * - Improve Maturity Schedules mobile composition
 * - Improve Unilevel Reward History mobile composition
 * - No icons added
 * - No accounting/runtime changes
 * ============================================================
 */


/* ------------------------------------------------------------
   REMOVE REDUNDANT CORE CAPTION

   Only the visual terminal caption is hidden.
   Contract/runtime references remain untouched.
   ------------------------------------------------------------ */

.earnings-maturity-core
.terminal-caption,

.earnings-unilevel-core
.terminal-caption{

    display:none !important;
}


/* Remove unnecessary gap created by hidden caption */

.earnings-maturity-core
.earnings-core-head,

.earnings-unilevel-core
.earnings-core-head{

    row-gap:8px;
}



@media(max-width:760px){


    /* ========================================================
       MATURITY SCHEDULES
       ======================================================== */

    .neo-panel:has(.maturity-schedule-grid)
    > .neo-panel-inner{

        width:100%;
        max-width:100%;
        min-width:0;

        padding:
            18px
            14px
            20px !important;

        box-sizing:border-box;
    }


    /*
     * Header currently uses a desktop left/right composition.
     * Mobile gets one clean full-width column.
     */

    .neo-panel:has(.maturity-schedule-grid)
    .network-section-head{

        width:100%;
        max-width:100%;
        min-width:0;

        display:grid !important;

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

        align-items:start !important;

        gap:12px !important;
    }


    .neo-panel:has(.maturity-schedule-grid)
    .network-section-head > div{

        width:100%;
        max-width:100%;
        min-width:0;
    }


    .neo-panel:has(.maturity-schedule-grid)
    .section-title{

        width:100% !important;
        max-width:100% !important;

        margin:
            4px 0 8px !important;

        font-size:
            clamp(
                1.05rem,
                5.5vw,
                1.28rem
            ) !important;

        line-height:1.16 !important;

        letter-spacing:
            -.025em !important;

        white-space:normal !important;

        overflow-wrap:normal !important;
        word-break:normal !important;
    }


    .neo-panel:has(.maturity-schedule-grid)
    .section-copy{

        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        font-size:.65rem !important;

        line-height:1.6 !important;

        white-space:normal !important;
    }


    /*
     * Function source moves under description instead
     * of consuming the right half of the mobile header.
     */

    .neo-panel:has(.maturity-schedule-grid)
    .source-badge{

        justify-self:start !important;

        width:auto !important;
        max-width:100% !important;

        margin:0 !important;

        padding:
            7px 9px !important;

        font-size:.46rem !important;

        line-height:1.35;

        white-space:normal !important;

        overflow-wrap:anywhere;
    }


    .neo-panel:has(.maturity-schedule-grid)
    .maturity-schedule-grid{

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

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

        gap:10px !important;

        margin-top:16px !important;
    }


    .neo-panel:has(.maturity-schedule-grid)
    .maturity-schedule-card{

        width:100%;
        max-width:100%;
        min-width:0;

        min-height:0 !important;

        padding:15px !important;

        box-sizing:border-box;
    }


    .neo-panel:has(.maturity-schedule-grid)
    .schedule-top{

        width:100%;

        align-items:center;

        gap:10px;
    }


    .neo-panel:has(.maturity-schedule-grid)
    .schedule-top span,

    .neo-panel:has(.maturity-schedule-grid)
    .schedule-top b{

        min-width:0;
    }


    .neo-panel:has(.maturity-schedule-grid)
    .schedule-amount{

        margin-top:20px !important;

        font-size:
            clamp(
                1.4rem,
                7.5vw,
                1.8rem
            ) !important;
    }


    .neo-panel:has(.maturity-schedule-grid)
    .schedule-split{

        width:100%;

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

        margin-top:15px;
    }


    .neo-panel:has(.maturity-schedule-grid)
    .schedule-split > div{

        min-width:0;

        padding:9px;
    }


    .neo-panel:has(.maturity-schedule-grid)
    .schedule-data{

        width:100%;

        gap:8px;
    }


    .neo-panel:has(.maturity-schedule-grid)
    .schedule-data > div{

        width:100%;

        display:grid;

        grid-template-columns:
            minmax(0,.8fr)
            minmax(0,1.2fr);

        align-items:start;

        gap:10px;
    }


    .neo-panel:has(.maturity-schedule-grid)
    .schedule-data b{

        min-width:0;

        text-align:right;

        overflow-wrap:anywhere;
    }



    /* ========================================================
       UNILEVEL REWARD HISTORY
       ======================================================== */

    .neo-panel:has(.earnings-ledger)
    > .neo-panel-inner{

        width:100%;
        max-width:100%;
        min-width:0;

        padding:
            18px
            14px
            20px !important;

        box-sizing:border-box;
    }


    /*
     * Current mobile header leaves the title in a very narrow
     * left column because the source badge owns the right side.
     *
     * Stack them vertically instead.
     */

    .neo-panel:has(.earnings-ledger)
    .network-section-head{

        width:100%;
        max-width:100%;
        min-width:0;

        display:grid !important;

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

        align-items:start !important;

        gap:12px !important;
    }


    .neo-panel:has(.earnings-ledger)
    .network-section-head > div{

        width:100%;
        max-width:100%;
        min-width:0;
    }


    .neo-panel:has(.earnings-ledger)
    .section-title{

        width:100% !important;
        max-width:100% !important;

        margin:
            4px 0 8px !important;

        font-size:
            clamp(
                1.05rem,
                5.5vw,
                1.28rem
            ) !important;

        line-height:1.16 !important;

        letter-spacing:
            -.025em !important;

        white-space:normal !important;

        overflow-wrap:normal !important;
        word-break:normal !important;
    }


    .neo-panel:has(.earnings-ledger)
    .section-copy{

        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        font-size:.65rem !important;

        line-height:1.6 !important;
    }


    .neo-panel:has(.earnings-ledger)
    .source-badge{

        justify-self:start !important;

        width:auto !important;
        max-width:100% !important;

        margin:0 !important;

        padding:
            7px 9px !important;

        font-size:.46rem !important;

        line-height:1.35;

        white-space:normal !important;

        overflow-wrap:anywhere;
    }



    /*
     * --------------------------------------------------------
     * HISTORY LEDGER
     *
     * Preserve all canonical columns.
     * It becomes a deliberate horizontal data surface instead
     * of forcing the entire page wider.
     * --------------------------------------------------------
     */

    .neo-panel:has(.earnings-ledger)
    .table-scroll{

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;

        margin-top:16px;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        -webkit-overflow-scrolling:touch;

        overscroll-behavior-x:contain;
    }


    .neo-panel:has(.earnings-ledger)
    .earnings-ledger{

        width:100%;

        min-width:720px !important;

        table-layout:auto;
    }


    .neo-panel:has(.earnings-ledger)
    .earnings-ledger th,

    .neo-panel:has(.earnings-ledger)
    .earnings-ledger td{

        padding:
            11px
            12px !important;

        white-space:nowrap;
    }


    /*
     * First visible columns receive practical widths rather
     * than clustering against the far-left side.
     */

    .neo-panel:has(.earnings-ledger)
    .earnings-ledger th:nth-child(1),

    .neo-panel:has(.earnings-ledger)
    .earnings-ledger td:nth-child(1){

        min-width:130px;
    }


    .neo-panel:has(.earnings-ledger)
    .earnings-ledger th:nth-child(2),

    .neo-panel:has(.earnings-ledger)
    .earnings-ledger td:nth-child(2){

        min-width:90px;
    }


    .neo-panel:has(.earnings-ledger)
    .earnings-ledger th:nth-child(3),

    .neo-panel:has(.earnings-ledger)
    .earnings-ledger td:nth-child(3){

        min-width:70px;
    }

}



/* ============================================================
   VERY NARROW MOBILE
   ============================================================ */

@media(max-width:420px){

    .neo-panel:has(.maturity-schedule-grid)
    > .neo-panel-inner,

    .neo-panel:has(.earnings-ledger)
    > .neo-panel-inner{

        padding:
            16px
            12px
            18px !important;
    }


    .neo-panel:has(.maturity-schedule-grid)
    .schedule-split{

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

}

/* PREMONEON_EARNINGS_MOBILE_SCHEDULE_HISTORY_V1_END */


/* PREMONEON_SALES_INCENTIVE_MOBILE_PREMIUM_V32_START */

/*
 * ============================================================
 * SALES INCENTIVE — TRUE MOBILE PREMIUM FORMAT V32
 *
 * FORMAT / ALIGNMENT ONLY
 *
 * PRESERVED:
 * - colors
 * - icons
 * - borders
 * - glow
 * - milestone visual language
 * - data
 * - JS
 * - contract logic
 * - desktop/tablet design
 * ============================================================
 */

@media(max-width:560px){


    /* ========================================================
       HERO
       Keep the locked hero design.
       Only tighten vertical composition.
       ======================================================== */

    .sales-locked-hero{
        gap:18px !important;

        padding:
            17px
            15px
            16px !important;

        margin-bottom:
            10px !important;
    }


    .sales-locked-hero-side{
        gap:9px !important;

        align-items:center !important;
    }



    /* ========================================================
       SUMMARY — 2 × 2 MOBILE MATRIX
       ======================================================== */

    .sales-locked-summary{
        display:grid !important;

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

        grid-template-rows:
            auto !important;

        gap:
            8px !important;

        margin-bottom:
            12px !important;
    }


    .sales-locked-stat{
        width:100% !important;
        min-width:0 !important;

        min-height:
            118px !important;

        height:auto !important;

        padding:
            12px
            12px
            10px !important;
    }


    .sales-locked-stat-top{
        width:100% !important;

        gap:
            9px !important;

        align-items:center !important;
    }


    .sales-locked-stat-icon{
        width:
            38px !important;

        height:
            38px !important;

        flex:
            0 0
            38px !important;
    }


    .sales-locked-stat-icon svg{
        width:
            25px !important;

        height:
            25px !important;
    }


    .sales-locked-stat-head{
        min-width:0 !important;
    }


    .sales-locked-stat-value{
        margin-top:
            8px !important;
    }



    /* ========================================================
       ACTIVE PROGRAM PANEL
       ======================================================== */

    .sales-locked-program-panel
    > .neo-panel-inner{

        padding:
            15px
            14px
            12px !important;
    }


    .sales-locked-program-head{
        gap:
            10px !important;

        margin-bottom:
            10px !important;
    }


    .sales-locked-program-list{
        gap:
            12px !important;
    }



    /* ========================================================
       PROGRAM IDENTITY / POLICY
       Preserve visual design, reduce vertical dead space.
       ======================================================== */

    .sales-locked-identity{
        padding:
            15px
            16px
            12px !important;
    }


    .sales-locked-id-head{
        gap:
            12px !important;
    }


    .sales-locked-title{
        margin-top:
            10px !important;

        padding:
            9px
            0
            11px !important;
    }


    .sales-locked-policy{
        gap:
            0 !important;
    }


    .sales-locked-policy > *{
        min-height:
            0 !important;

        padding-top:
            11px !important;

        padding-bottom:
            11px !important;
    }



    /* ========================================================
       PROGRESS WORKSPACE
       ======================================================== */

    .sales-locked-progress{
        margin-top:
            10px !important;

        padding:
            15px
            14px
            10px !important;
    }



    /* ========================================================
       KPI — 2 + 1 PREMIUM MOBILE COMPOSITION
       ======================================================== */

    .sales-locked-kpis{
        display:grid !important;

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

        gap:
            8px !important;
    }


    .sales-locked-kpi{
        width:100% !important;
        min-width:0 !important;

        height:auto !important;
        min-height:
            92px !important;

        padding:
            13px
            12px !important;
    }


    .sales-locked-kpi.prize{
        grid-column:
            1 / -1 !important;

        min-height:
            72px !important;
    }


    .sales-locked-kpi strong,
    .sales-locked-kpi small{
        max-width:100%;

        overflow-wrap:anywhere;
    }



    /* ========================================================
       MILESTONE MASTER
       Preserve rail/node design.
       Tighten surrounding whitespace only.
       ======================================================== */

    .sales-locked-master{
        margin-top:
            10px !important;

        padding-top:
            44px !important;
    }


    .sales-locked-milestones{
        margin-top:
            24px !important;

        gap:
            10px !important;
    }



    /* ========================================================
       TELEMETRY — 2 COLUMN MOBILE PROTOCOL GRID
       ======================================================== */

    .sales-locked-telemetry{
        display:grid !important;

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

        width:100% !important;
        min-width:0 !important;

        margin-top:
            12px !important;
    }


    .sales-telemetry-cell{
        min-width:0 !important;

        padding:
            12px
            10px !important;
    }


    /*
     * Last item = Contract Module.
     * It contains the longest value, so span full width.
     */
    .sales-locked-telemetry
    > .sales-telemetry-cell:last-child{

        grid-column:
            1 / -1 !important;
    }



    /* ========================================================
       LOWER PAGE — GENERIC SALES SECTION PANELS
       Reduce desktop-like 22px mobile padding.
       ======================================================== */

    .sales-program-panel
    ~ .neo-panel
    > .neo-panel-inner{

        padding:
            17px
            14px
            18px !important;
    }



    /* ========================================================
       QUALIFICATION SECTION HEADING
       ======================================================== */

    .command-section-heading{
        margin:
            16px
            0
            10px !important;

        padding:
            0
            2px !important;

        display:flex !important;

        flex-direction:
            column !important;

        align-items:
            flex-start !important;

        gap:
            4px !important;
    }


    .command-section-heading span,
    .command-section-heading strong,
    .command-section-heading small{
        width:100%;

        margin:0 !important;
    }



    /* ========================================================
       QUALIFICATION PANEL HEADER
       ======================================================== */

    .network-section-head{
        min-width:0;
    }


    .sales-program-panel
    ~ .neo-panel
    .network-section-head{

        display:grid !important;

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

        gap:
            10px !important;
    }


    .sales-program-panel
    ~ .neo-panel
    .network-section-head
    > div{

        width:100%;
        min-width:0;
    }


    .sales-program-panel
    ~ .neo-panel
    .source-badge{

        justify-self:
            start !important;

        width:auto !important;
        max-width:100% !important;

        white-space:
            normal !important;

        overflow-wrap:
            anywhere;
    }



    /* ========================================================
       EMPTY QUALIFICATION STATE
       ======================================================== */

    .empty-state{
        min-height:
            0 !important;

        margin-top:
            14px !important;

        padding:
            18px
            14px !important;
    }



    /* ========================================================
       LIFECYCLE MATRIX — 2 × 3
       Current mobile is 6 × 1 = ~463px tall.
       ======================================================== */

    .sales-lifecycle-grid{
        display:grid !important;

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

        grid-template-rows:
            auto !important;

        gap:
            1px !important;

        width:100% !important;
        min-width:0 !important;
    }


    .sales-lifecycle-grid > div{
        width:100% !important;
        min-width:0 !important;

        min-height:
            72px !important;

        height:auto !important;

        padding:
            11px !important;

        box-sizing:
            border-box;
    }



    /* ========================================================
       LATEST QUALIFICATION
       Already 2-column.
       Just normalize mobile containment.
       ======================================================== */

    .sales-latest-state{
        width:100% !important;
        min-width:0 !important;

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

        gap:
            8px !important;

        padding:
            9px
            10px !important;
    }



    /* ========================================================
       TEXT SAFETY
       ======================================================== */

    .sales-locked-program-panel strong,
    .sales-locked-program-panel small,
    .sales-locked-program-panel span,
    .sales-lifecycle-grid strong,
    .sales-lifecycle-grid small{

        max-width:100%;
    }

}



/* ============================================================
   EXTRA-NARROW PHONES
   ============================================================ */

@media(max-width:420px){

    .sales-locked-summary{
        gap:
            7px !important;
    }


    .sales-locked-stat{
        padding:
            11px
            10px
            9px !important;
    }


    .sales-locked-kpis{
        gap:
            7px !important;
    }


    .sales-locked-kpi{
        padding:
            12px
            10px !important;
    }


    .sales-locked-telemetry{
        gap:
            0 !important;
    }


    .sales-lifecycle-grid > div{
        min-height:
            68px !important;

        padding:
            10px !important;
    }

}

/* PREMONEON_SALES_INCENTIVE_MOBILE_PREMIUM_V32_END */


/* PREMONEON_SALES_INCENTIVE_MOBILE_CALIBRATION_V33_START */

/*
 * SALES INCENTIVE MOBILE CALIBRATION V33
 *
 * Presentation only.
 *
 * - Lifecycle values aligned right
 * - Milestone rows normalized for mobile
 * - KPI layout preserved
 * - Existing icons preserved
 * - Existing colors preserved
 * - Desktop untouched
 */

@media (max-width:560px) {


    /* ========================================================
       01 — LIFECYCLE STATE MATRIX
       Compact horizontal label/value cells.
       ======================================================== */

    .sales-lifecycle-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        grid-template-rows:
            auto !important;

        gap:
            1px !important;
    }


    .sales-lifecycle-grid > div{
        display:flex !important;

        flex-direction:row !important;

        align-items:center !important;

        justify-content:space-between !important;

        gap:
            10px !important;

        min-height:
            62px !important;

        height:auto !important;

        padding:
            12px !important;
    }


    .sales-lifecycle-grid > div > span{
        flex:
            1 1 auto !important;

        min-width:
            0 !important;

        margin:
            0 !important;

        line-height:
            1.25 !important;
    }


    .sales-lifecycle-grid > div > strong{
        flex:
            0 0 auto !important;

        margin:
            0 !important;

        text-align:
            right !important;

        line-height:
            1 !important;
    }



    /* ========================================================
       02 — MILESTONE MASTER
       Preserve rail, badge and node design.
       ======================================================== */

    .sales-locked-master{
        padding-top:
            40px !important;

        margin-top:
            8px !important;
    }


    .sales-locked-milestones{
        margin-top:
            22px !important;

        gap:
            8px !important;
    }



    /* ========================================================
       03 — EACH MILESTONE
       Explicit mobile grid prevents inherited desktop/V29
       alignment from centering reward copy incorrectly.
       ======================================================== */

    .sales-locked-milestone{
        display:grid !important;

        grid-template-columns:
            44px
            28px
            minmax(0,1fr)
            auto !important;

        grid-template-rows:
            auto !important;

        column-gap:
            8px !important;

        row-gap:
            2px !important;

        align-items:center !important;

        width:
            100% !important;

        min-width:
            0 !important;
    }



    /* Node stays in first column. */

    .sales-locked-milestone >
    .sales-locked-node{

        grid-column:
            1 !important;

        grid-row:
            1 / span 2 !important;

        justify-self:
            center !important;

        align-self:
            center !important;

        margin:
            0 !important;
    }



    /* ========================================================
       04 — NODE COPY
       Convert old internal layout into predictable mobile grid.
       ======================================================== */

    .sales-locked-node-copy{
        grid-column:
            2 / 5 !important;

        display:grid !important;

        grid-template-columns:
            28px
            minmax(0,1fr)
            auto !important;

        grid-template-rows:
            auto
            auto !important;

        column-gap:
            8px !important;

        row-gap:
            3px !important;

        align-items:center !important;

        justify-content:stretch !important;

        width:
            100% !important;

        min-width:
            0 !important;

        margin:
            0 !important;
    }



    /* M1 / M2 / M3 / M4 */

    .sales-locked-node-copy > strong{
        grid-column:
            1 !important;

        grid-row:
            1 !important;

        justify-self:
            start !important;

        align-self:
            center !important;

        margin:
            0 !important;
    }



    /* Amount */

    .sales-locked-node-copy > em{
        grid-column:
            2 !important;

        grid-row:
            1 !important;

        justify-self:
            start !important;

        margin:
            0 !important;

        text-align:
            left !important;
    }



    /* Status */

    .sales-locked-node-copy > b{
        grid-column:
            3 !important;

        grid-row:
            1 / span 2 !important;

        justify-self:
            end !important;

        align-self:
            center !important;

        margin:
            0 !important;

        white-space:
            nowrap !important;

        text-align:
            right !important;
    }



    /* ========================================================
       05 — REWARD DESCRIPTION
       Override old V29 mobile:
       grid-column:1/3 + centered.
       ======================================================== */

    .sales-locked-node-copy >
    .sales-locked-reward{

        grid-column:
            2 !important;

        grid-row:
            2 !important;

        justify-self:
            start !important;

        align-self:
            start !important;

        width:
            auto !important;

        max-width:
            100% !important;

        margin:
            0 !important;

        text-align:
            left !important;

        line-height:
            1.25 !important;

        overflow-wrap:
            anywhere !important;
    }



    /* ========================================================
       06 — OTHER SMALL COPY INSIDE NODE
       Prevent old grid rules from producing odd positioning.
       ======================================================== */

    .sales-locked-node-copy > small{
        min-width:
            0 !important;

        margin:
            0 !important;
    }



    /* ========================================================
       07 — NEXT PRIZE / RAIL RHYTHM
       Keep current 2 + 1 KPI design.
       ======================================================== */

    .sales-locked-kpi.prize{
        margin-bottom:
            0 !important;
    }


    .sales-locked-kpis + .sales-locked-master{
        margin-top:
            7px !important;
    }

}


/* Extra narrow mobile */

@media (max-width:420px){

    .sales-locked-milestone{
        grid-template-columns:
            40px
            minmax(0,1fr) !important;

        column-gap:
            7px !important;
    }


    .sales-locked-milestone >
    .sales-locked-node{

        grid-column:
            1 !important;
    }


    .sales-locked-node-copy{
        grid-column:
            2 !important;

        grid-template-columns:
            25px
            minmax(0,1fr)
            auto !important;

        column-gap:
            6px !important;
    }


    .sales-lifecycle-grid > div{
        min-height:
            58px !important;

        padding:
            10px !important;
    }

}

/* PREMONEON_SALES_INCENTIVE_MOBILE_CALIBRATION_V33_END */


/* PREMONEON_SALES_INCENTIVE_LOCKED_MOBILE_V34_START */

/*
 * ============================================================
 * SALES INCENTIVE — LOCKED MOBILE FORMAT V34
 *
 * #1 PROGRAM IDENTITY
 *    icon + label LEFT
 *    canonical value RIGHT
 *
 * #2 MILESTONE PROGRESS
 *    node | M# | amount + reward | state
 *
 * MOBILE PRESENTATION ONLY
 *
 * PRESERVED:
 * - desktop/tablet
 * - colors
 * - icons
 * - borders
 * - glow
 * - KPI design
 * - rail design
 * - program data
 * - contract/runtime logic
 * ============================================================
 */

@media (max-width:560px){


    /* ========================================================
       #1 — PROGRAM POLICY
       ======================================================== */

    .sales-locked-policy{

        width:100% !important;
        min-width:0 !important;

        display:grid !important;

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

        gap:0 !important;
    }


    /*
     * Each policy item becomes one clean horizontal row.
     */

    .sales-locked-policy > div{

        width:100% !important;
        min-width:0 !important;

        min-height:56px !important;
        height:auto !important;

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            minmax(80px,1.15fr) !important;

        align-items:center !important;

        column-gap:14px !important;

        padding:
            11px
            0 !important;

        box-sizing:border-box;
    }


    /*
     * LEFT:
     * semantic icon + label remain together.
     */

    .sales-locked-policy > div > small{

        min-width:0 !important;

        display:flex !important;

        align-items:center !important;

        gap:8px !important;

        margin:0 !important;

        line-height:1.2 !important;

        white-space:normal !important;
    }


    .sales-locked-policy
    .sales-policy-semantic-icon{

        flex:
            0 0 auto !important;

        margin:0 !important;
    }


    /*
     * RIGHT:
     * canonical value aligned consistently.
     */

    .sales-locked-policy > div > strong{

        min-width:0 !important;

        margin:0 !important;

        justify-self:end !important;

        align-self:center !important;

        text-align:right !important;

        line-height:1.25 !important;

        overflow-wrap:anywhere;
    }



    /* ========================================================
       #2 — PROGRESS / MILESTONE WORKSPACE
       ======================================================== */

    .sales-locked-progress{

        padding:
            14px
            14px
            12px !important;
    }


    /*
     * Maintain existing KPI layout.
     */

    .sales-locked-kpis{

        margin-bottom:0 !important;
    }


    /*
     * Slightly tighten transition from KPI → percentage/rail.
     */

    .sales-locked-master{

        width:100% !important;
        min-width:0 !important;

        margin-top:
            6px !important;

        padding-top:
            40px !important;
    }


    .sales-locked-current{

        margin:0 !important;
    }


    .sales-locked-milestones{

        width:100% !important;
        min-width:0 !important;

        margin-top:
            22px !important;

        gap:
            10px !important;
    }



    /* ========================================================
       MILESTONE ROW
       ======================================================== */

    .sales-locked-milestone{

        position:relative !important;

        left:auto !important;

        width:100% !important;
        min-width:0 !important;

        min-height:42px !important;

        display:grid !important;

        grid-template-columns:
            42px
            minmax(0,1fr) !important;

        grid-template-rows:
            auto !important;

        column-gap:
            8px !important;

        row-gap:
            0 !important;

        align-items:center !important;

        margin:0 !important;
    }



    /* ========================================================
       NODE
       ======================================================== */

    .sales-locked-milestone >
    .sales-locked-node{

        grid-column:
            1 !important;

        grid-row:
            1 !important;

        justify-self:center !important;

        align-self:center !important;

        margin:0 !important;
    }


    /*
     * ACHIEVED NODE:
     *
     * Existing source inserts ✓ for a satisfied milestone.
     * Locked mobile design uses a clean glowing achieved node,
     * so hide that character without modifying JS/data.
     */

    .sales-locked-milestone.achieved
    > .sales-locked-node
    > span{

        font-size:0 !important;

        line-height:0 !important;

        color:transparent !important;

        text-shadow:none !important;
    }



    /* ========================================================
       MILESTONE COPY
       M# | AMOUNT + USDT | STATE
            REWARD
       ======================================================== */

    .sales-locked-node-copy{

        grid-column:
            2 !important;

        grid-row:
            1 !important;

        width:100% !important;
        min-width:0 !important;

        display:grid !important;

        grid-template-columns:
            28px
            max-content
            minmax(0,1fr)
            auto !important;

        grid-template-rows:
            auto
            auto !important;

        column-gap:
            7px !important;

        row-gap:
            3px !important;

        align-items:center !important;

        justify-content:stretch !important;

        margin:0 !important;
    }



    /*
     * M1 / M2 / M3 / M4
     */

    .sales-locked-node-copy > small{

        grid-column:
            1 !important;

        grid-row:
            1 / span 2 !important;

        justify-self:start !important;

        align-self:start !important;

        width:auto !important;

        margin:
            2px 0 0 !important;

        padding:0 !important;

        text-align:left !important;
    }



    /*
     * Required milestone value.
     */

    .sales-locked-node-copy > strong{

        grid-column:
            2 !important;

        grid-row:
            1 !important;

        justify-self:start !important;

        align-self:center !important;

        width:auto !important;

        margin:0 !important;

        text-align:left !important;

        white-space:nowrap !important;
    }



    /*
     * USDT belongs directly beside amount.
     */

    .sales-locked-node-copy > em{

        grid-column:
            3 !important;

        grid-row:
            1 !important;

        justify-self:start !important;

        align-self:center !important;

        width:auto !important;

        margin:0 !important;

        text-align:left !important;

        white-space:nowrap !important;
    }



    /*
     * State pinned to the far right.
     */

    .sales-locked-node-copy > b{

        grid-column:
            4 !important;

        grid-row:
            1 / span 2 !important;

        justify-self:end !important;

        align-self:center !important;

        min-width:0 !important;

        margin:0 !important;

        padding:0 !important;

        border:0 !important;

        text-align:right !important;

        white-space:nowrap !important;
    }



    /*
     * Reward directly below amount.
     */

    .sales-locked-node-copy >
    .sales-locked-reward{

        grid-column:
            2 / 4 !important;

        grid-row:
            2 !important;

        justify-self:start !important;

        align-self:start !important;

        width:auto !important;
        max-width:100% !important;

        min-height:0 !important;

        margin:0 !important;

        padding:0 !important;

        text-align:left !important;

        line-height:1.18 !important;

        white-space:normal !important;

        overflow-wrap:anywhere !important;
    }



    /* ========================================================
       ROW RHYTHM
       ======================================================== */

    .sales-locked-milestone + .sales-locked-milestone{

        margin-top:
            1px !important;
    }


    /*
     * Preserve achieved / next / locked visual hierarchy.
     * No color changes.
     */

    .sales-locked-milestone.achieved
    .sales-locked-reward,

    .sales-locked-milestone.next
    .sales-locked-reward{

        opacity:1 !important;
    }


    .sales-locked-milestone.upcoming
    .sales-locked-reward{

        opacity:.72 !important;
    }

}



/* ============================================================
   EXTRA NARROW
   ============================================================ */

@media (max-width:420px){

    .sales-locked-policy > div{

        grid-template-columns:
            minmax(0,.9fr)
            minmax(95px,1.1fr) !important;

        column-gap:
            10px !important;

        min-height:
            54px !important;
    }


    .sales-locked-node-copy{

        grid-template-columns:
            25px
            max-content
            minmax(0,1fr)
            auto !important;

        column-gap:
            6px !important;
    }


    .sales-locked-node-copy > em{

        font-size:
            .42rem !important;
    }


    .sales-locked-node-copy > b{

        font-size:
            .42rem !important;
    }

}

/* PREMONEON_SALES_INCENTIVE_LOCKED_MOBILE_V34_END */


/* PREMONEON_SALES_INCENTIVE_MOBILE_MILESTONE_V35_START */

/*
 * ============================================================
 * SALES INCENTIVE
 * LOCKED MOBILE MILESTONE PRESENTATION V35
 *
 * FORMAT ONLY
 *
 * LOCKED DESIGN:
 * NODE | M# | VALUE + USDT | STATUS
 *             REWARD
 *
 * PRESERVED:
 * - KPI cards
 * - percentage badge
 * - progress rail
 * - colors
 * - node states
 * - glow
 * - milestone data
 * - desktop/tablet
 * ============================================================
 */

@media (max-width:560px){


    /* ========================================================
       PROGRESS WORKSPACE
       ======================================================== */

    .sales-locked-progress{

        padding:
            14px
            14px
            14px !important;
    }


    .sales-locked-master{

        width:
            100% !important;

        min-width:
            0 !important;

        margin-top:
            8px !important;

        padding-top:
            42px !important;

        transform:
            none !important;
    }



    /* ========================================================
       PERCENT BADGE
       ======================================================== */

    .sales-locked-current{

        margin:
            0 !important;

        z-index:
            20 !important;
    }



    /* ========================================================
       TRACK
       ======================================================== */

    .sales-locked-track{

        margin-bottom:
            20px !important;
    }



    /* ========================================================
       MILESTONE FRAME
       ======================================================== */

    .sales-locked-milestones{

        position:
            relative !important;

        top:
            auto !important;

        left:
            auto !important;

        right:
            auto !important;

        width:
            100% !important;

        min-width:
            0 !important;

        display:
            grid !important;

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

        gap:
            0 !important;

        margin:
            20px 0 0 !important;

        padding:
            12px
            10px
            12px !important;

        border:
            1px solid rgba(74,202,235,.18);

        background:
            linear-gradient(
                145deg,
                rgba(4,18,28,.32),
                rgba(3,10,17,.16)
            );

        box-sizing:
            border-box !important;
    }



    /* ========================================================
       VERTICAL NODE RAIL
       ======================================================== */

    .sales-locked-milestones::before{

        content:
            "" !important;

        position:
            absolute !important;

        top:
            34px !important;

        bottom:
            34px !important;

        left:
            30px !important;

        width:
            2px !important;

        background:
            linear-gradient(
                180deg,
                rgba(67,231,255,.52),
                rgba(151,88,255,.40) 37%,
                rgba(74,108,128,.26) 72%,
                rgba(74,108,128,.10)
            ) !important;

        box-shadow:
            0 0 12px rgba(67,231,255,.10);

        pointer-events:
            none;

        z-index:
            0;
    }



    /* ========================================================
       MILESTONE ROW
       ======================================================== */

    .sales-locked-milestone{

        position:
            relative !important;

        left:
            auto !important;

        top:
            auto !important;

        width:
            100% !important;

        min-width:
            0 !important;

        height:
            auto !important;

        min-height:
            68px !important;

        display:
            grid !important;

        grid-template-columns:
            42px
            minmax(0,1fr) !important;

        grid-template-rows:
            auto !important;

        column-gap:
            10px !important;

        align-items:
            center !important;

        padding:
            8px
            0 !important;

        margin:
            0 !important;

        box-sizing:
            border-box !important;

        transform:
            none !important;

        z-index:
            2 !important;
    }


    .sales-locked-milestone +
    .sales-locked-milestone{

        border-top:
            1px solid rgba(71,181,210,.11);
    }



    /* ========================================================
       REMOVE OLD STEM / GENERATED GEOMETRY
       ======================================================== */

    .sales-locked-milestone::before{

        content:
            none !important;

        display:
            none !important;
    }



    /* ========================================================
       NODE
       ======================================================== */

    .sales-locked-milestone >
    .sales-locked-node{

        position:
            relative !important;

        grid-column:
            1 !important;

        grid-row:
            1 !important;

        justify-self:
            center !important;

        align-self:
            center !important;

        width:
            30px !important;

        height:
            30px !important;

        margin:
            0 !important;

        z-index:
            4 !important;
    }



    /*
     * First achieved node:
     * JS now renders no checkmark.
     * This keeps the intended clean luminous core.
     */

    .sales-locked-milestone.achieved
    > .sales-locked-node::after{

        content:
            "" !important;

        position:
            absolute;

        inset:
            8px;

        border-radius:
            50%;

        background:
            rgba(235,253,255,.96);

        box-shadow:
            0 0 12px rgba(235,253,255,.68);

        pointer-events:
            none;
    }



    /* ========================================================
       COPY GRID
       ======================================================== */

    .sales-locked-node-copy{

        grid-column:
            2 !important;

        grid-row:
            1 !important;

        width:
            100% !important;

        min-width:
            0 !important;

        display:
            grid !important;

        grid-template-columns:
            27px
            max-content
            minmax(0,1fr)
            auto !important;

        grid-template-rows:
            auto
            auto !important;

        column-gap:
            7px !important;

        row-gap:
            4px !important;

        align-items:
            center !important;

        margin:
            0 !important;

        padding:
            0 !important;
    }



    /* ========================================================
       M1 / M2 / M3 / M4
       ======================================================== */

    .sales-locked-node-copy > small{

        grid-column:
            1 !important;

        grid-row:
            1 / span 2 !important;

        justify-self:
            start !important;

        align-self:
            start !important;

        width:
            auto !important;

        min-width:
            0 !important;

        margin:
            3px 0 0 !important;

        padding:
            0 !important;

        text-align:
            left !important;

        white-space:
            nowrap !important;
    }



    /* ========================================================
       VALUE
       ======================================================== */

    .sales-locked-node-copy > strong{

        grid-column:
            2 !important;

        grid-row:
            1 !important;

        justify-self:
            start !important;

        align-self:
            center !important;

        width:
            auto !important;

        margin:
            0 !important;

        padding:
            0 !important;

        text-align:
            left !important;

        white-space:
            nowrap !important;

        line-height:
            1 !important;
    }



    /* ========================================================
       USDT
       ======================================================== */

    .sales-locked-node-copy > em{

        grid-column:
            3 !important;

        grid-row:
            1 !important;

        justify-self:
            start !important;

        align-self:
            center !important;

        width:
            auto !important;

        margin:
            0 !important;

        padding:
            0 !important;

        white-space:
            nowrap !important;

        text-align:
            left !important;

        line-height:
            1 !important;
    }



    /* ========================================================
       STATUS
       ======================================================== */

    .sales-locked-node-copy > b{

        grid-column:
            4 !important;

        grid-row:
            1 / span 2 !important;

        justify-self:
            end !important;

        align-self:
            center !important;

        width:
            auto !important;

        min-width:
            44px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        border:
            0 !important;

        text-align:
            right !important;

        white-space:
            nowrap !important;

        line-height:
            1 !important;
    }



    /* ========================================================
       REWARD
       ======================================================== */

    .sales-locked-node-copy >
    .sales-locked-reward{

        grid-column:
            2 / 4 !important;

        grid-row:
            2 !important;

        justify-self:
            start !important;

        align-self:
            start !important;

        width:
            auto !important;

        max-width:
            100% !important;

        min-height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        text-align:
            left !important;

        white-space:
            normal !important;

        overflow-wrap:
            normal !important;

        word-break:
            normal !important;

        line-height:
            1.2 !important;
    }



    /* ========================================================
       STATE VISIBILITY
       ======================================================== */

    .sales-locked-milestone.achieved
    .sales-locked-reward,

    .sales-locked-milestone.next
    .sales-locked-reward{

        opacity:
            1 !important;
    }


    .sales-locked-milestone.upcoming
    .sales-locked-reward{

        opacity:
            .68 !important;
    }

}



/* ============================================================
   VERY NARROW MOBILE
   ============================================================ */

@media (max-width:420px){

    .sales-locked-milestones{

        padding:
            10px
            8px
            10px !important;
    }


    .sales-locked-milestones::before{

        left:
            27px !important;
    }


    .sales-locked-milestone{

        grid-template-columns:
            38px
            minmax(0,1fr) !important;

        column-gap:
            8px !important;

        min-height:
            64px !important;
    }


    .sales-locked-milestone >
    .sales-locked-node{

        width:
            28px !important;

        height:
            28px !important;
    }


    .sales-locked-node-copy{

        grid-template-columns:
            24px
            max-content
            minmax(0,1fr)
            auto !important;

        column-gap:
            5px !important;
    }


    .sales-locked-node-copy > em,
    .sales-locked-node-copy > b{

        font-size:
            .40rem !important;
    }

}

/* PREMONEON_SALES_INCENTIVE_MOBILE_MILESTONE_V35_END */


/* PREMONEON_SALES_MOBILE_FINAL_MICRO_FIX_V36_START */

/*
 * FINAL MICRO FIX
 *
 * ONLY:
 * 1. Summary values -> right aligned
 * 2. Achieved milestone node -> hide check character
 *
 * No structural or visual redesign.
 */

@media (max-width:560px){


    /* ========================================================
       FOUR SUMMARY CARDS
       Value only -> RIGHT
       ======================================================== */

    .sales-locked-stat-value{

        width:
            100% !important;

        margin:
            8px 0 0 !important;

        text-align:
            right !important;
    }



    /* ========================================================
       FIRST ACHIEVED MILESTONE NODE
       Hide literal ✓ while preserving node/glow.
       ======================================================== */

    .sales-locked-milestone.achieved
    > .sales-locked-node
    > span{

        font-size:
            0 !important;

        line-height:
            0 !important;

        color:
            transparent !important;

        text-shadow:
            none !important;
    }

}

/* PREMONEON_SALES_MOBILE_FINAL_MICRO_FIX_V36_END */


/* PREMONEON_SALES_FINAL_VALUE_NODE_FIX_V37_START */

/*
 * ============================================================
 * SALES INCENTIVE — FINAL MICRO ROOT FIX V37
 *
 * ONLY:
 *
 * 1. Summary metric values
 *    -> RIGHT aligned on ALL viewports
 *
 * 2. Achieved M1 node
 *    -> remove literal/check/generated character
 *    -> preserve node circle / glow / state design
 *
 * No other formatting or design changes.
 * ============================================================
 */


/* ============================================================
   01 — FOUR SUMMARY CARDS
   VALUE RIGHT ALIGNMENT
   DESKTOP + TABLET + MOBILE
   ============================================================ */

.sales-locked-stat-value{

    width:
        100% !important;

    text-align:
        right !important;
}


/* ============================================================
   02 — ACHIEVED MILESTONE NODE

   The source span contains the achieved check character.
   Older CSS also generates another glyph using ::before.

   Disable BOTH text layers while keeping the physical node.
   ============================================================ */

.sales-locked-milestone.achieved
.sales-locked-node
> span{

    font-size:
        0 !important;

    line-height:
        0 !important;

    color:
        transparent !important;

    text-shadow:
        none !important;
}


/*
 * ROOT CAUSE:
 * Older Sales Incentive CSS generates additional content
 * through span::before.
 */

.sales-locked-milestone.achieved
.sales-locked-node
> span::before{

    content:
        none !important;

    display:
        none !important;

    width:
        0 !important;

    height:
        0 !important;

    font-size:
        0 !important;
}


/*
 * Defensive cleanup:
 * no generated glyph should exist on the achieved node span.
 */

.sales-locked-milestone.achieved
.sales-locked-node
> span::after{

    content:
        none !important;

    display:
        none !important;
}


/* PREMONEON_SALES_FINAL_VALUE_NODE_FIX_V37_END */


/* PREMONEON_SALES_FINAL_MICRO_POLISH_V38_START */

/*
 * ============================================================
 * SALES INCENTIVE — FINAL MICRO POLISH V38
 *
 * TWO INDEPENDENT CHANGES ONLY:
 *
 * SECTION A
 * - Four summary-card numeric values
 * - Keep visible
 * - Align to RIGHT
 * - Desktop + Tablet + Mobile
 *
 * SECTION B
 * - Enhance ACHIEVED M1 circle only
 * - No character inside
 * - Preserve all other milestone elements
 * ============================================================
 */


/* ============================================================
   SECTION A
   FOUR SUMMARY CARDS — VALUE ONLY
   ============================================================ */

.sales-locked-stat-value {

    display:
        block !important;

    width:
        100% !important;

    max-width:
        100% !important;

    margin:
        8px 0 0 !important;

    text-align:
        right !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    transform:
        none !important;
}


/*
 * Protect the numeric value from any old alignment rules.
 */

.sales-locked-stat
> .sales-locked-stat-value {

    display:
        block !important;

    justify-self:
        stretch !important;

    align-self:
        auto !important;

    text-align:
        right !important;
}



/* ============================================================
   SECTION B
   M1 ACHIEVED NODE — CIRCLE ONLY
   ============================================================ */

.sales-locked-milestone.achieved
> .sales-locked-node {

    position:
        relative !important;

    overflow:
        visible !important;

    border:
        2px solid rgba(74,235,255,.96) !important;

    border-radius:
        50% !important;

    color:
        transparent !important;

    background:
        radial-gradient(
            circle at 42% 36%,
            rgba(232,253,255,.98) 0%,
            rgba(156,249,255,.96) 20%,
            rgba(50,225,245,.98) 47%,
            rgba(16,177,210,.92) 72%,
            rgba(5,68,89,.96) 100%
        ) !important;

    box-shadow:
        0 0 0 4px rgba(5,18,27,.96),
        0 0 0 6px rgba(46,226,248,.16),
        0 0 15px rgba(43,227,249,.58),
        0 0 28px rgba(30,199,232,.22),
        inset 0 0 10px rgba(236,254,255,.28) !important;
}


/*
 * Decorative inner ring.
 * No text/content.
 */

.sales-locked-milestone.achieved
> .sales-locked-node::before {

    content:
        "" !important;

    display:
        block !important;

    position:
        absolute !important;

    inset:
        4px !important;

    width:
        auto !important;

    height:
        auto !important;

    border:
        1px solid rgba(224,253,255,.70) !important;

    border-radius:
        50% !important;

    background:
        transparent !important;

    box-shadow:
        inset 0 0 7px rgba(221,253,255,.20) !important;

    pointer-events:
        none !important;
}


/*
 * Bright energy core.
 */

.sales-locked-milestone.achieved
> .sales-locked-node::after {

    content:
        "" !important;

    display:
        block !important;

    position:
        absolute !important;

    inset:
        9px !important;

    width:
        auto !important;

    height:
        auto !important;

    border:
        0 !important;

    border-radius:
        50% !important;

    background:
        rgba(238,254,255,.96) !important;

    box-shadow:
        0 0 8px rgba(238,254,255,.90),
        0 0 15px rgba(61,232,250,.62) !important;

    pointer-events:
        none !important;
}


/* ============================================================
   ABSOLUTELY REMOVE OLD ACHIEVED CHARACTER
   ============================================================ */

.sales-locked-milestone.achieved
> .sales-locked-node
> span {

    font-size:
        0 !important;

    line-height:
        0 !important;

    color:
        transparent !important;

    text-shadow:
        none !important;

    visibility:
        hidden !important;
}


.sales-locked-milestone.achieved
> .sales-locked-node
> span::before,

.sales-locked-milestone.achieved
> .sales-locked-node
> span::after {

    content:
        none !important;

    display:
        none !important;
}


/* ============================================================
   MOBILE NODE SCALE
   Same design — only proportional sizing.
   ============================================================ */

@media (max-width:560px) {

    .sales-locked-milestone.achieved
    > .sales-locked-node {

        width:
            30px !important;

        height:
            30px !important;
    }


    .sales-locked-milestone.achieved
    > .sales-locked-node::before {

        inset:
            4px !important;
    }


    .sales-locked-milestone.achieved
    > .sales-locked-node::after {

        inset:
            9px !important;
    }

}


/* PREMONEON_SALES_FINAL_MICRO_POLISH_V38_END */


/* PREMONEON_PREMIUM_VALUE_ALIGNMENT_V39_SAFE_START */

/*
 * ============================================================
 * PREMONEON PREMIUM VALUE ALIGNMENT V39 SAFE
 *
 * PRESENTATION ONLY.
 *
 * VALUES:
 * RIGHT ALIGNED
 *
 * LABELS:
 * UNCHANGED
 *
 * DESKTOP:
 * ENABLED
 *
 * TABLET:
 * ENABLED
 *
 * MOBILE:
 * ENABLED
 *
 * NO DATA OR CONTRACT LOGIC CHANGES.
 * ============================================================
 */


/* ============================================================
   DASHBOARD
   SIX PRIMARY METRIC VALUES
   ============================================================ */

.metric-grid .metric-value {

    width:
        100% !important;

    max-width:
        100% !important;

    text-align:
        right !important;
}


/* ============================================================
   DASHBOARD
   ACCOUNT CORE RUNTIME VALUES
   ============================================================ */

.account-core-runtime-item > strong {

    min-width:
        0 !important;

    text-align:
        right !important;

    justify-self:
        end !important;

    margin-left:
        auto !important;

    overflow-wrap:
        anywhere;
}


/* ============================================================
   DASHBOARD
   PREMO REFERENCE VALUE AND TOTAL VALUE
   ============================================================ */

.account-energy-value-item > b {

    min-width:
        0 !important;

    text-align:
        right !important;

    justify-self:
        end !important;

    margin-left:
        auto !important;
}


.account-energy-value-item > b > small {

    text-align:
        right !important;
}


/* ============================================================
   PACKAGES
   PACKAGE PRICE
   ============================================================ */

.package-card > .package-price {

    width:
        100% !important;

    text-align:
        right !important;
}


/* ============================================================
   PACKAGES
   REQUESTED SPECIFICATION VALUES
   ============================================================ */

.package-card div > small + strong:not(.package-unilevel-rates) {

    min-width:
        0 !important;

    text-align:
        right !important;

    justify-self:
        end !important;

    margin-left:
        auto !important;
}


/* ============================================================
   NETWORK
   THREE PRIMARY METRIC VALUES
   ============================================================ */

.network-metrics .metric-value {

    width:
        100% !important;

    text-align:
        right !important;
}


/* ============================================================
   EARNINGS
   FOUR PRIMARY METRIC VALUES
   ============================================================ */

.earnings-metric-grid .metric-value {

    width:
        100% !important;

    text-align:
        right !important;
}


/* ============================================================
   VESTING
   FOUR PRIMARY METRIC VALUES ONLY
   ============================================================ */

.vesting-metric-grid .metric-value {

    width:
        100% !important;

    text-align:
        right !important;
}


/* ============================================================
   HISTORY
   SUMMARY COUNTS ONLY
   ============================================================ */

.history-summary-main > strong,
.history-summary-secondary > strong {

    min-width:
        0 !important;

    text-align:
        right !important;

    justify-self:
        end !important;

    margin-left:
        auto !important;
}


/* ============================================================
   MOBILE
   REASSERT ALIGNMENT ONLY
   ============================================================ */

@media (max-width:560px) {

    .metric-grid .metric-value,
    .network-metrics .metric-value,
    .earnings-metric-grid .metric-value,
    .vesting-metric-grid .metric-value,
    .package-card > .package-price,
    .account-core-runtime-item > strong,
    .account-energy-value-item > b,
    .history-summary-main > strong,
    .history-summary-secondary > strong {

        max-width:
            100% !important;

        text-align:
            right !important;
    }


    .package-card div > small + strong:not(.package-unilevel-rates) {

        max-width:
            100% !important;

        text-align:
            right !important;
    }

}

/* PREMONEON_PREMIUM_VALUE_ALIGNMENT_V39_SAFE_END */