.live-beta {
  --live-bg: linear-gradient(180deg, #f4f8fc 0%, #eef4fb 100%);
  --live-card-bg: rgba(255, 255, 255, .92);
  --live-border: rgba(14, 34, 54, .10);
  --live-border-strong: rgba(14, 34, 54, .16);
  --live-shadow: 0 22px 60px rgba(7, 32, 58, .10);
  --live-shadow-soft: 0 12px 30px rgba(7, 32, 58, .08);
  --live-phone-shadow: 0 30px 70px rgba(5, 21, 39, .24);
  --live-red: #9e2432;
  --live-red-dark: #7f1c27;
  --live-gold: #ffd447;
  --live-ink: #081b2f;
  --live-muted: #62748a;
  --live-white: #fff;
  background: var(--live-bg);
  padding: 2.25rem 0 4rem;
}

.live-beta .container-fluid {
  max-width: 1480px;
}

.live-beta__hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.live-beta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(10, 70, 119, .08);
  border: 1px solid rgba(10, 70, 119, .12);
  color: #0a4677;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.live-beta__eyebrow-dot {
  width: .6rem;
  height: .6rem;
  border-radius: 999px;
  background: #dd3041;
  box-shadow: 0 0 0 6px rgba(221, 48, 65, .12);
}

.live-beta__title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(2rem, 3vw, 3.6rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.03em;
  margin: .8rem 0 .55rem;
  color: var(--live-ink);
}

.live-beta__copy {
  max-width: 760px;
  color: var(--live-muted);
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0;
}

.live-beta__hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .75rem;
}

.live-beta__hero-pill {
  min-width: 150px;
  padding: .85rem 1rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--live-border);
  box-shadow: var(--live-shadow-soft);
}

.live-beta__hero-label {
  display: block;
  color: var(--live-muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .32rem;
}

.live-beta__hero-value {
  display: block;
  color: var(--live-ink);
  font-weight: 800;
  font-size: 1.02rem;
}

.live-beta__grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 430px;
  gap: 1.35rem;
  align-items: start;
}

.live-card {
  background: var(--live-card-bg);
  border: 1px solid var(--live-border);
  border-radius: 26px;
  box-shadow: var(--live-shadow-soft);
  backdrop-filter: blur(12px);
}

.live-card--padded {
  padding: 1.35rem;
}

.live-sidebar {
  position: sticky;
  top: 118px;
  display: grid;
  gap: 1rem;
}

.live-lot__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.06;
  color: var(--live-ink);
  margin: 0;
}

.live-lot__subtitle {
  color: var(--live-muted);
  font-weight: 600;
  margin-top: .55rem;
  margin-bottom: 0;
}

.live-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1rem;
}

.live-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: 999px;
  padding: .35rem .7rem;
  background: #081b2f;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.live-tag--green {
  background: #3d9d58;
}

.live-tag--outline {
  background: transparent;
  color: #0a4677;
  border: 1px solid rgba(10, 70, 119, .16);
}

.live-bidbox {
  display: grid;
  gap: .85rem;
  padding: 1rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(10, 70, 119, .06), rgba(10, 70, 119, .01));
  border: 1px solid rgba(10, 70, 119, .12);
}

.live-bidbox__amount {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.1rem;
  font-weight: 900;
  line-height: .95;
  color: var(--live-red);
}

.live-bidbox__countdown {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 800;
  color: var(--live-red-dark);
}

.live-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 54px;
  border: 0;
  border-radius: 18px;
  padding: .9rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  cursor: pointer;
}

.live-button:hover,
.live-button:focus-visible {
  transform: translateY(-1px);
}

.live-button--primary {
  background: linear-gradient(135deg, var(--live-red), #c33042);
  color: #fff;
  box-shadow: 0 18px 38px rgba(158, 36, 50, .22);
}

.live-button--dark {
  background: #081b2f;
  color: #fff;
}

.live-button--ghost {
  background: rgba(255, 255, 255, .75);
  color: var(--live-ink);
  border: 1px solid var(--live-border-strong);
}

.live-button[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.live-bidbox__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .7rem;
}

.live-input {
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(14, 34, 54, .14);
  background: rgba(255, 255, 255, .9);
  padding: .85rem 1rem;
  color: var(--live-ink);
  font-weight: 700;
}

.live-input:focus {
  outline: none;
  border-color: rgba(10, 70, 119, .28);
  box-shadow: 0 0 0 4px rgba(10, 70, 119, .08);
}

.live-stats {
  display: grid;
  gap: .55rem;
}

.live-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(14, 34, 54, .08);
}

.live-stat__label {
  color: var(--live-muted);
  font-size: .88rem;
  font-weight: 700;
}

.live-stat__value {
  color: var(--live-ink);
  font-size: .96rem;
  font-weight: 800;
}

.live-stat__value--accent {
  color: var(--live-red);
}

.live-notice {
  color: var(--live-muted);
  font-size: .96rem;
  line-height: 1.7;
  margin: 0;
}

.live-detail {
  display: grid;
  gap: 1rem;
}

.live-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}

.live-gallery__figure {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(14, 34, 54, .08);
}

.live-gallery__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.live-gallery__label {
  display: block;
  padding: .8rem 1rem;
  border-top: 1px solid rgba(14, 34, 54, .08);
  color: var(--live-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.live-copy-block {
  color: var(--live-muted);
  line-height: 1.8;
  font-size: 1rem;
}

.live-copy-block p:last-child {
  margin-bottom: 0;
}

.live-floor {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 1rem;
}

.live-panel-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--live-ink);
  margin: 0;
}

.live-panel-subtitle {
  color: var(--live-muted);
  font-size: .9rem;
  margin-top: .3rem;
  margin-bottom: 0;
}

.live-chat-list,
.live-bid-list {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
}

.live-chat-item,
.live-bid-item {
  padding: .85rem 1rem;
  border-radius: 18px;
  background: rgba(10, 70, 119, .04);
  border: 1px solid rgba(10, 70, 119, .08);
}

.live-chat-item__meta,
.live-bid-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .35rem;
}

.live-chat-item__name,
.live-bid-item__name {
  color: var(--live-ink);
  font-size: .92rem;
  font-weight: 800;
}

.live-chat-item__time,
.live-bid-item__time {
  color: var(--live-muted);
  font-size: .78rem;
  font-weight: 700;
}

.live-chat-item__body {
  color: var(--live-ink);
  font-size: .95rem;
  line-height: 1.6;
}

.live-bid-item__amount {
  display: inline-block;
  margin-top: .3rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.08rem;
  font-weight: 900;
  color: var(--live-red);
}

.live-rail {
  position: sticky;
  top: 118px;
}

.live-phone-wrap {
  display: grid;
  gap: 1rem;
}

.live-phone {
  position: relative;
  width: min(100%, 420px);
  margin-inline: auto;
  padding: 12px;
  border-radius: 36px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08)),
    linear-gradient(180deg, #1a1f25, #090c11);
  box-shadow: var(--live-phone-shadow);
}

.live-phone::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 32%;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 0 0 18px 18px;
  background: #07090c;
  z-index: 4;
}

.live-stage {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  aspect-ratio: 9 / 16;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, .10), transparent 32%),
    linear-gradient(180deg, #10141a 0%, #05080c 100%);
}

.live-player,
.live-player__fallback {
  position: absolute;
  inset: 0;
}

.live-player__fallback {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(4, 10, 18, .18), rgba(4, 10, 18, .72)),
    center / cover no-repeat;
}

.live-player__fallback-copy {
  width: min(82%, 320px);
  padding: 1rem 1.05rem;
  border-radius: 22px;
  background: rgba(8, 27, 47, .72);
  border: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
  color: #fff;
  backdrop-filter: blur(12px);
}

.live-player__fallback-copy h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: .5rem;
}

.live-player__fallback-copy p {
  color: rgba(255, 255, 255, .76);
  margin-bottom: 0;
  line-height: 1.55;
}

.live-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.live-overlay__top,
.live-overlay__bottom {
  position: absolute;
  left: 0;
  right: 0;
  padding-inline: 1rem;
}

.live-overlay__top {
  top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.live-overlay__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 34px;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(8, 27, 47, .64);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
  backdrop-filter: blur(12px);
}

.live-overlay__badge strong {
  color: #fff;
}

.live-overlay__badge--brand {
  color: rgba(255, 255, 255, .82);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.live-overlay__badge--brand span {
  color: #ff5a66;
}

.live-overlay__status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 36px;
  padding: .4rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .88);
  font-size: .8rem;
  font-weight: 800;
  backdrop-filter: blur(12px);
}

.live-overlay__status-dot {
  width: .62rem;
  height: .62rem;
  border-radius: 999px;
  background: #ff5866;
  box-shadow: 0 0 0 6px rgba(255, 88, 102, .16);
}

.live-overlay__chat {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 5.75rem;
  display: grid;
  gap: .5rem;
}

.live-overlay__bubble {
  max-width: 78%;
  padding: .72rem .85rem;
  border-radius: 18px 18px 18px 6px;
  background: rgba(7, 13, 24, .74);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  backdrop-filter: blur(12px);
}

.live-overlay__bubble strong {
  display: block;
  color: #fff;
  font-size: .86rem;
  font-weight: 800;
  margin-bottom: .15rem;
}

.live-overlay__bubble span {
  color: rgba(255, 255, 255, .82);
  font-size: .9rem;
  line-height: 1.45;
}

.live-overlay__bottom {
  bottom: 0;
  padding-bottom: 1rem;
}

.live-overlay__winning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .8rem;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 10px 24px rgba(0, 0, 0, .42);
}

.live-overlay__winning strong {
  font-size: 1.1rem;
}

.live-overlay__winning span {
  color: rgba(255, 255, 255, .76);
  font-size: .82rem;
  display: block;
}

.live-overlay__price {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255, 212, 71, .92);
  color: #552600;
  padding: .28rem .55rem;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 900;
}

.live-composer {
  display: grid;
  gap: .65rem;
  pointer-events: auto;
}

.live-composer__input {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  border-radius: 999px;
  padding: .35rem .4rem .35rem .95rem;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px);
}

.live-composer__input input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: .95rem;
}

.live-composer__input input::placeholder {
  color: rgba(255, 255, 255, .7);
}

.live-composer__send {
  flex: 0 0 auto;
  min-width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, .88);
  color: var(--live-ink);
  font-weight: 900;
}

.live-bidbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  pointer-events: auto;
}

.live-bidbar .live-button {
  min-height: 50px;
  border-radius: 16px;
  font-size: .88rem;
}

.live-bidbar .live-button--ghost {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .16);
}

.live-phone-note {
  color: var(--live-muted);
  font-size: .9rem;
  line-height: 1.7;
  text-align: center;
  margin: 0;
}

.live-status {
  display: none;
  margin-top: .9rem;
  padding: .85rem 1rem;
  border-radius: 18px;
  font-weight: 700;
}

.live-status.is-visible {
  display: block;
}

.live-status--error {
  background: rgba(158, 36, 50, .08);
  color: var(--live-red-dark);
  border: 1px solid rgba(158, 36, 50, .14);
}

.live-status--success {
  background: rgba(61, 157, 88, .10);
  color: #22663b;
  border: 1px solid rgba(61, 157, 88, .18);
}

.live-mobile-stack {
  display: none;
}

@media (max-width: 1199px) {
  .live-beta__grid {
    grid-template-columns: 290px minmax(0, 1fr) 390px;
  }
}

@media (max-width: 991px) {
  .live-beta {
    padding-top: 1.2rem;
  }

  .live-beta .container-fluid {
    padding-inline: 14px;
  }

  .live-beta__hero {
    margin-bottom: 1rem;
  }

  .live-beta__hero-meta {
    justify-content: flex-start;
  }

  .live-beta__grid {
    grid-template-columns: 1fr;
  }

  .live-rail,
  .live-sidebar {
    position: static;
  }

  .live-rail {
    order: 1;
  }

  .live-sidebar {
    order: 2;
  }

  .live-detail {
    order: 3;
  }

  .live-floor {
    grid-template-columns: 1fr;
  }

  .live-phone {
    width: 100%;
    max-width: 520px;
  }

  .live-mobile-stack {
    display: grid;
    gap: 1rem;
  }

  .live-desktop-only {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .live-beta__title {
    font-size: clamp(1.7rem, 9vw, 2.45rem);
  }

  .live-card--padded {
    padding: 1rem;
    border-radius: 22px;
  }

  .live-gallery {
    grid-template-columns: 1fr;
  }

  .live-overlay__top,
  .live-overlay__bottom {
    padding-inline: .75rem;
  }

  .live-overlay__chat {
    left: .75rem;
    right: .75rem;
    bottom: 5.4rem;
  }

  .live-overlay__bubble {
    max-width: 85%;
  }

  .live-overlay__winning strong {
    font-size: 1rem;
  }

  .live-bidbar {
    grid-template-columns: 1fr 1.1fr;
  }
}

@media (max-width: 575px) {
  .live-beta {
    padding-bottom: 2.5rem;
  }

  .live-phone {
    padding: 8px;
    border-radius: 28px;
  }

  .live-phone::before {
    top: 8px;
    height: 14px;
  }

  .live-stage {
    border-radius: 22px;
  }

  .live-overlay__badge,
  .live-overlay__status {
    font-size: .74rem;
  }

  .live-overlay__price {
    font-size: .92rem;
  }

  .live-bidbox__row {
    grid-template-columns: 1fr;
  }
}