.erine-live-super-wrapper {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  padding: 20px 15px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  clear: both !important;
  background: transparent !important;
  font-family: "Garamond", "Times New Roman", serif !important;
}

/* KARTU UTAMA */
#erine-live-container {
  --c-bg: #faf7f5;
  --c-card: #e1ddd2;
  --c-card-soft: #d6c9b6;
  --c-text: #372e27;
  --c-border-soft: rgba(55, 46, 39, 0.12);

  max-width: 460px !important;
  margin: 0 auto !important;
  padding: 26px 22px !important;
  background: radial-gradient(
    circle at top,
    #faf7f5 0%,
    #e1ddd2 50%,
    #d6c9b6 100%
  ) !important;
  border-radius: 26px !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.18) !important;
  font-family: "Garamond", "Times New Roman", serif !important;
  color: var(--c-text) !important;
  position: relative !important;
  overflow: visible !important;
}

/* garis dekor tipis di atas kartu */
#erine-live-container::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 40px;
  right: 40px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(55, 46, 39, 0.3),
    transparent
  );
  opacity: 0.7;
}

/* HEADER: bagi dua, kiri (status bubble + nama), kanan (foto + stats) */
#erine-live-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 16px 16px 14px !important;
  border-radius: 18px !important;
  background: rgba(250, 247, 245, 0.9) !important;
  border: 1px solid var(--c-border-soft) !important;
  backdrop-filter: blur(4px);
}

/* kiri: icon + teks */
.erine-header-left {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
}

/* bubble icon status */
#erine-live-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #faf7f5, #e1ddd2) !important;
  border: 2px solid rgba(55, 46, 39, 0.28) !important;
  position: relative !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !important;
}

/* titik status di tengah – merah */
#erine-live-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f3b2b0; /* merah lembut */
  box-shadow: 0 0 10px rgba(240, 98, 90, 0.65);
  transition: all 0.3s ease;
}

/* ketika online, merah glow lebih kuat */
#erine-live-icon.online::before {
  background: #c0392b; /* merah tua */
  box-shadow: 0 0 16px rgba(192, 57, 43, 0.95);
}

/* teks header (nama + waktu) */
#erine-live-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#erine-live-text b {
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* nama di header (wrap b biar bisa di-style terpisah kalau mau) */
.erine-display-name b {
  font-size: 18px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

#erine-waktu {
  font-size: 13px !important;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  background: #e1ddd2 !important;
  margin-top: 6px !important;
  display: inline-block !important;
  letter-spacing: 0.04em !important;
}

/* kanan: foto profil + stats */
.erine-profile-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: "Garamond", "Times New Roman", serif !important;
}

/* frame bulat + ring di DEPAN foto + mahkota coklat */
.erine-avatar-wrapper {
  position: relative !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #faf7f5 !important;
  z-index: 1;
}

/* ring gradient di depan foto */
.erine-avatar-wrapper::after {
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  background: conic-gradient(
    from 200deg,
    #d6c9b6,
    #e1ddd2,
    #faf7f5,
    #d6c9b6
  ) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
  z-index: 2 !important;
}

/* mahkota tuan putri coklat di atas frame */
.erine-avatar-wrapper::before {
  content: "♛" !important;
  position: absolute !important;
  top: -20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 20px !important;
  color: #8b5a2b !important; /* coklat */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
  z-index: 3 !important;
}

/* foto di dalam frame (di belakang ring) */
.erine-avatar {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #faf7f5 !important;
  position: relative !important;
  z-index: 1 !important; /* di bawah ::after supaya bingkai tampak di depan */
}

/* stats: following & follower */
.erine-stats {
  font-size: 11px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #372e27 !important;
  background: rgba(250, 247, 245, 0.9) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(55, 46, 39, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.erine-stat strong {
  font-weight: 700 !important;
}

.erine-stat-sep {
  opacity: 0.7;
}

/* STATUS BOX – persegi panjang & dinamis */
#erine-status {
  margin-top: 18px !important;
  padding: 16px 18px !important;
  background: rgba(250, 247, 245, 0.95) !important;
  border-radius: 14px !important;
  min-height: 0 !important; /* tinggi ikut isi */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-weight: 600 !important;
  border: 1px dashed var(--c-border-soft) !important;
  line-height: 1.4 !important;
}

/* offline: lembut */
#erine-status.offline {
  background: #faf7f5 !important;
  color: var(--c-text) !important;
}

/* online: sedikit lebih kontras */
#erine-status.online {
  background: rgba(225, 221, 210, 0.65) !important;
  color: var(--c-text) !important;
  border-style: solid !important;
}

/* KONTEN LIVE (kartu dalam status) */
.erine-card {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
}

/* foto erine di dalam card status */
.erine-card img {
  width: 95px !important;
  height: 130px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(250, 247, 245, 0.9) !important;
}

/* teks info */
.erine-info {
  text-align: left !important;
  font-size: 14px !important;
}

.erine-name {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

/* link + detail */
.erine-info div {
  margin-bottom: 3px !important;
}

/* tombol “Lihat Live Sekarang” */
.erine-btn {
  display: inline-block !important;
  margin-top: 12px !important;
  padding: 10px 22px !important;
  background: linear-gradient(135deg, #372e27, #5a4c41) !important;
  color: #faf7f5 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(250, 247, 245, 0.85) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important;
}

.erine-btn:hover {
  opacity: 0.96 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25) !important;
}

/* RESPONSIVE */
@media (max-width: 480px) {
  .erine-live-super-wrapper {
    padding: 24px 10px !important;
  }

  #erine-live-container {
    padding: 22px 16px !important;
  }

  /* header di-stack saat layar kecil */
  #erine-live-header {
    flex-direction: column !important;
    align-items: center !important;
  }

  .erine-header-left {
    justify-content: center !important;
  }

  .erine-card {
    flex-direction: column !important;
    text-align: center !important;
  }

  .erine-card img {
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
    margin: 0 auto 14px !important;
  }

  .erine-info {
    text-align: center !important;
  }

  #erine-live-container::before {
    left: 24px;
    right: 24px;
  }
}