.modal-overlay.up-overlay {
  background: rgba(2, 3, 8, 0.80) !important;
  backdrop-filter: blur(14px) saturate(0.9);
  -webkit-backdrop-filter: blur(14px) saturate(0.9);
}

.up-cine {
  animation: upCardIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes upCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.up-plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.up-plate__pan {
  position: absolute;
  inset: 0;
  z-index: 0;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .up-plate__pan { will-change: transform; }
}

.up-plate__bg {
  position: absolute;
  inset: -8%;
  z-index: 0;
  background-color: #05060f;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.16);
}

.up-plate__veil { position: absolute; inset: 0; z-index: 1; }

.up-plate__inner {
  position: relative;
  z-index: 2;
  padding: 38px 34px 24px;
  text-align: center;
  color: rgba(232, 240, 255, 0.86);
}
.up-plate__inner--roomy { padding: 52px 34px 32px; }

.up-eyebrow, .up-title, .up-story, .up-cell, .up-actions, .up-foot {
  animation: upRise 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(300ms + var(--i, 0) * 42ms);
}
@keyframes upRise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.up-cine--warp .up-plate__bg {
  background-image: url('https://assets.melodreams.com/assets/media/upgrade/plus-bg.jpg');
  animation:
    upWarpIn 1100ms cubic-bezier(0.16, 1, 0.3, 1) both,
    upDrift 22s ease-in-out 1100ms infinite alternate;
}
@keyframes upWarpIn {
  from { transform: scale(1.5); opacity: 0; filter: blur(5px); }
  to   { transform: scale(1.16); opacity: 1; filter: none; }
}
@keyframes upDrift {
  from { transform: scale(1.16) translate3d(0, 0, 0); }
  to   { transform: scale(1.26) translate3d(0, -1.4%, 0); }
}

.up-cine--warp .up-plate__veil {
  background:
    radial-gradient(115% 80% at 50% 26%,
      rgba(8, 12, 32, 0.16) 0%,
      rgba(6, 9, 24, 0.70) 44%,
      rgba(3, 4, 12, 0.95) 76%),
    linear-gradient(180deg,
      rgba(4, 6, 16, 0.34) 0%,
      rgba(4, 6, 16, 0.62) 42%,
      rgba(3, 4, 12, 0.97) 100%);
}

.up-cine--warp .up-eyebrow { color: #8ab4ff; }
.up-cine--warp .up-cell i  { background: rgba(59, 130, 246, 0.15); border-color: rgba(120, 170, 255, 0.20); color: #9cc4ff; }
.up-cine--warp .up-cta {
  background: linear-gradient(135deg, #4f8dff 0%, #3b82f6 55%, #2f6fe0 100%);
  box-shadow: 0 8px 26px -10px rgba(59, 130, 246, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.up-cine--warp .up-cta:hover:not(:disabled) {
  box-shadow: 0 12px 32px -10px rgba(59, 130, 246, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.up-cine--welcome .up-plate__bg {
  background-image: url('https://assets.melodreams.com/assets/media/upgrade/welcome-hero.png');
  background-position: center 30%;
  animation:
    upLift 1300ms cubic-bezier(0.16, 1, 0.3, 1) both,
    upCruise 24s ease-in-out 1300ms infinite alternate;
}
@keyframes upLift {
  from { transform: scale(1.34) translate3d(0, 3%, 0); opacity: 0; }
  to   { transform: scale(1.16) translate3d(0, 0, 0);  opacity: 1; }
}
@keyframes upCruise {
  from { transform: scale(1.16) translate3d(0, 0, 0); }
  to   { transform: scale(1.2) translate3d(1.2%, -1%, 0); }
}

.up-cine--welcome .up-plate__inner--roomy { padding: 150px 34px 34px; }

.up-cine--welcome .up-plate__veil {
  background:
    radial-gradient(120% 62% at 50% 30%,
      rgba(58, 30, 120, 0.05) 0%,
      rgba(20, 12, 52, 0.22) 42%,
      rgba(8, 6, 26, 0.72) 72%),
    linear-gradient(180deg,
      rgba(10, 8, 30, 0.28) 0%,
      rgba(9, 7, 26, 0.16) 24%,
      rgba(7, 6, 22, 0.62) 50%,
      rgba(5, 4, 16, 0.93) 74%,
      rgba(4, 3, 14, 0.98) 100%);
}

.up-cine--welcome .up-eyebrow { color: #b9a4ff; }
.up-cine--welcome .up-cta {
  background: linear-gradient(135deg, #7c6bff 0%, #6455f0 52%, #4f8dff 100%);
  box-shadow: 0 8px 26px -10px rgba(108, 92, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.up-cine--welcome .up-cta:hover:not(:disabled) {
  box-shadow: 0 12px 34px -10px rgba(108, 92, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.up-cine--sphere .up-plate__bg {
  background-image: url('https://assets.melodreams.com/assets/media/upgrade/welcome-bg.jpg');
  background-position: center 88%;
  animation:
    upLand 1400ms cubic-bezier(0.16, 1, 0.3, 1) both,
    upBreathe 26s ease-in-out 1400ms infinite alternate;
}
@keyframes upLand {
  from { transform: scale(1.30) translate3d(0, 5%, 0); opacity: 0; }
  to   { transform: scale(1.16) translate3d(0, 0, 0);  opacity: 1; }
}
@keyframes upBreathe {
  from { transform: scale(1.16) translate3d(0, 0, 0); }
  to   { transform: scale(1.21) translate3d(0, -0.8%, 0); }
}

.up-cine--sphere .up-plate__veil {
  background:
    linear-gradient(180deg,
      rgba(3, 3, 8, 0.94) 0%,
      rgba(4, 4, 12, 0.86) 30%,
      rgba(8, 4, 20, 0.55) 58%,
      rgba(14, 4, 28, 0.30) 100%);
}

.up-cine--sphere .up-eyebrow { color: #e8a0e8; }
.up-cine--sphere .up-cta {
  background: linear-gradient(135deg, #b45bff 0%, #a03ce0 50%, #d63a94 100%);
  box-shadow: 0 8px 26px -10px rgba(190, 70, 200, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.up-cine--sphere .up-cta:hover:not(:disabled) {
  box-shadow: 0 12px 32px -10px rgba(200, 80, 210, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.up-cine--sphere .up-title { letter-spacing: -0.03em; }

.up-cine--ribbon .up-plate__bg {
  background-image: url('https://assets.melodreams.com/assets/media/upgrade/plan-bg.webp');
  background-position: center 62%;
  animation:
    upSettle 1500ms cubic-bezier(0.16, 1, 0.3, 1) both,
    upBreathe 30s ease-in-out 1500ms infinite alternate;
}
@keyframes upSettle {
  from { transform: scale(1.24) translate3d(0, 2.5%, 0); opacity: 0; }
  to   { transform: scale(1.16) translate3d(0, 0, 0);    opacity: 1; }
}

/* The prism art is far brighter in the lower half than the artwork this
   variant used to carry, so the veil has to hold more there or the story
   and footnote lines drop below readable contrast over the highlights. */
.up-cine--ribbon .up-plate__veil {
  background:
    linear-gradient(180deg,
      rgba(2, 2, 8, 0.95) 0%,
      rgba(4, 3, 14, 0.88) 34%,
      rgba(10, 5, 26, 0.64) 64%,
      rgba(16, 6, 34, 0.73) 100%);
}

.up-cine--ribbon .up-eyebrow { color: #c4a6ff; }
.up-cine--ribbon .up-cell i {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(167, 139, 250, 0.22);
  color: #c4b5fd;
}
.up-cine--ribbon .up-cta {
  background: linear-gradient(135deg, #7c5cff 0%, #6d4aff 50%, #8b5cf6 100%);
  box-shadow: 0 8px 26px -10px rgba(124, 92, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.up-cine--ribbon .up-cta:hover:not(:disabled) {
  box-shadow: 0 12px 32px -10px rgba(140, 110, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.up-cine--ribbon .up-title { letter-spacing: -0.03em; }

.up-cine--valley .up-plate__bg {
  background-image: url('https://assets.melodreams.com/assets/media/upgrade/org-bg.webp');
  background-position: center center;
  animation:
    upSettle 1500ms cubic-bezier(0.16, 1, 0.3, 1) both,
    upBreathe 30s ease-in-out 1500ms infinite alternate;
}

/* Chrome-on-black art whose specular highlights reach pure white, so the
   lower stops carry far more than the previous artwork needed or the story
   and footnote lines wash out. Tint is neutral: the image is 76% chrome and
   barely 1% blue, and a coloured veil just dirties the metal. */
.up-cine--valley .up-plate__veil {
  background:
    linear-gradient(180deg,
      rgba(4, 4, 6, 0.94) 0%,
      rgba(6, 6, 9, 0.88) 34%,
      rgba(10, 10, 14, 0.74) 64%,
      rgba(14, 13, 18, 0.86) 100%);
}

.up-cine--valley .up-eyebrow { color: #a8b6ee; }
.up-cine--valley .up-cell i {
  background: rgba(60, 78, 168, 0.18);
  border-color: rgba(140, 158, 236, 0.24);
  color: #a8b6ee;
}
.up-cine--valley .up-cta {
  background: linear-gradient(135deg, #3a4c9e 0%, #2b3d89 50%, #4a5cb8 100%);
  box-shadow: 0 8px 26px -10px rgba(58, 76, 158, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.up-cine--valley .up-cta:hover:not(:disabled) {
  box-shadow: 0 12px 32px -10px rgba(94, 116, 216, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.up-cine--valley .up-title { letter-spacing: -0.03em; }

.up-cine--ribbon.is-pastdue .up-plate__bg {
  background-image: url('https://assets.melodreams.com/assets/media/upgrade/pastdue-bg.jpg');
  background-position: center center;
}

.up-cine--ribbon.is-pastdue .up-plate__veil {
  background:
    linear-gradient(180deg,
      rgba(6, 2, 6, 0.95) 0%,
      rgba(10, 3, 10, 0.89) 34%,
      rgba(20, 5, 14, 0.62) 64%,
      rgba(28, 6, 16, 0.40) 100%);
}

.up-cine--ribbon.is-pastdue .up-eyebrow { color: #fca5a5; }
.up-cine--ribbon.is-pastdue .up-cell i {
  background: rgba(239, 68, 68, 0.13);
  border-color: rgba(248, 113, 113, 0.22);
  color: #fca5a5;
}
.up-cine--ribbon.is-pastdue .up-cta {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
  box-shadow: 0 8px 26px -10px rgba(239, 68, 68, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.up-cine--ribbon.is-pastdue .up-cta:hover:not(:disabled) {
  box-shadow: 0 12px 32px -10px rgba(248, 113, 113, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.up-eyebrow {
  margin: 0 0 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.up-title {
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  text-wrap: balance;
}

.up-story {
  margin: 0 auto 30px;
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 450;
  color: rgba(226, 236, 255, 0.80);
  text-wrap: balance;
}

.up-grid {
  list-style: none;
  margin: 0 auto 26px;
  padding: 0;
  max-width: 430px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 10px;
  text-align: left;
}

.up-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 7px;
  border-radius: 9px;
  font-size: 12.5px;
  line-height: 1.3;
  color: rgba(228, 237, 252, 0.88);
  transition: background 160ms ease;
}
.up-cell:hover { background: rgba(255, 255, 255, 0.05); }

.up-cell i {
  flex: 0 0 auto;
  width: 23px; height: 23px;
  display: grid; place-items: center;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.75);
  font-size: 10px;
}

.up-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.up-cta {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 430px;
  padding: 14px 24px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms ease;
}
.up-cta:hover:not(:disabled) { transform: translateY(-1.5px); }
.up-cta:active:not(:disabled) { transform: translateY(0); }
.up-cta:disabled { opacity: 0.65; cursor: default; }

.up-cta__label { position: relative; z-index: 1; }

.up-cta__shine {
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 42%;
  z-index: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.34) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: upShine 5s ease-in-out 1.6s infinite;
}
@keyframes upShine {
  0%        { left: -60%; }
  36%, 100% { left: 140%; }
}
.up-cta:disabled .up-cta__shine { animation: none; opacity: 0; }

.up-price {
  margin: 11px 0 0;
  font-size: 12px;
  color: rgba(206, 220, 245, 0.5);
}

.up-quiet {
  margin-top: 14px;
  padding: 2px 2px 3px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: rgba(190, 205, 235, 0.38);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.up-quiet:hover {
  color: rgba(232, 240, 255, 0.9);
  border-bottom-color: rgba(232, 240, 255, 0.35);
}
.up-quiet:focus-visible {
  outline: none;
  color: #fff;
  border-bottom-color: #fff;
}

.up-foot {
  margin: 22px auto 0;
  max-width: 42ch;
  font-size: 11.5px;
  line-height: 1.75;
  color: rgba(186, 202, 234, 0.38);
}

.up-plate__x {
  position: absolute;
  top: 13px; right: 13px;
  z-index: 3;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9px;
  background: rgba(8, 10, 22, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(214, 226, 248, 0.55);
  font-size: 13px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.up-plate__x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

@media (max-width: 560px) {
  .up-plate__inner          { padding: 32px 20px 20px; }
  .up-plate__inner--roomy   { padding: 44px 20px 26px; }
  .up-title                 { font-size: 24px; }
  .up-grid                  { grid-template-columns: 1fr; gap: 0; margin-bottom: 22px; }
  .up-story                 { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .up-cine,
  .up-plate__bg,
  .up-eyebrow, .up-title, .up-story, .up-cell, .up-actions, .up-foot {
    animation: none !important;
  }
  .up-plate__bg  { transform: scale(1.16); opacity: 1; }
  .up-cta__shine { display: none; }
  .up-cta        { transition: none; }
  .up-plate__pan { transform: none !important; }
}

.analytics-upgrade {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 28px;
  max-width: 460px;
  margin: 0 auto;
}

.analytics-upgrade i {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 17px;
  margin-bottom: 18px;
}

.analytics-upgrade h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.analytics-upgrade p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 42ch;
}

.analytics-upgrade__sub {
  font-size: 13px !important;
  color: var(--text-tertiary) !important;
}

.analytics-upgrade__cta {
  margin-top: 18px;
  padding: 11px 22px;
  border: 0;
  border-radius: 11px;
  background: var(--accent);
  color: var(--accent-foreground);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease;
}
.analytics-upgrade__cta:hover { background: var(--accent-hover); }