.smp-static-mode-dot {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 99999;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: none;
  pointer-events: none;
  font-size: 0;
  line-height: 0;
}
.smp-static-mode-dot::after {
  content: "·";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 42px;
  line-height: 0.35;
  color: #0a6b2d;
  text-shadow: 0 0 2px #fff, 0 0 4px #fff;
}

.top-banner {
    background-color: #610f2b; /* 背景顏色 */
    padding: 10px 20px; /* 上下與左右內距 */
    display: flex; /* 啟用 Flexbox */
    align-items: center; /* 垂直置中 */
    justify-content: space-between; /* 左中右分佈 */
    /*color: #fff;*/ /* 字體顏色 */
}

.left-content {
    flex: 1; /* 左側內容占據空間 */
    text-align: left; /* 左對齊 */
}

.center-content {
    flex: 1; /* 中間內容占據空間 */
    text-align: center; /* 中間對齊 */
}

.right-content {
    flex: 1; /* 右側內容占據空間 */
    text-align: right; /* 右對齊 */
}

.top-banner .btn {
    background-color: #f78ca0;
    /*color: #fff;*/
    border: none;
    font-weight: bold;
}

.hero-section {
	text-align: center;
	margin-top: 20px;
	padding: 20px 0;
}

.hero-section h1 {
	font-weight: bold;
}

.hero-section .btn {
	background-color: #f78ca0;
	/*color: #fff;*/
	font-weight: bold;
	border: none;
}

.explore-section h2 {
	font-weight: bold;
	margin-top: 40px;
	text-align: center;
}

.explore-section .btn-group {
	display: flex;
	justify-content: center;
	margin: auto;
	width: 300px;
}

.explore-section .btn {
	background-color: #292929;
	color: #fff;
	border: none;
	margin: 0 5px;
}

.explore-section .btn.active {
	background-color: #f78ca0;
}

.card-grid {
	display: grid;
	/*grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));*/
	grid-template-columns: repeat(auto-fit, minmax(220px, 240px));
	justify-content: center;
	max-width: 1500px;
	gap: 1rem;
}

.card-wrapper {
	width: 100%;
}

.card {
	background-color: var(--bg-color-sidebar);
	border: none;
	color: #fff;
}

.card img {
	border-radius: 5px;
}

.card-body {
	text-align: left;
}

.card-body h5{
	min-height: 48px;
}

.card .age {
	font-size: 14px;
	color: #999;
}

.chat-icon {
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #f78ca0;
	color: #fff;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
}
.tag-item {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 4px 10px;
  background-color: #444;
  color: #fff;
  border-radius: 15px;
  white-space: nowrap; /* ✅ 防止換行 */
  cursor: pointer;
}
.tag-item a {
  background-color: transparent;
  color: var(--text-color);
}


@media (max-width: 875px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}