*, *::before, *::after {
      box-sizing: border-box;
    }

/* 讓所有連結在任何狀態下都維持指定的顏色 */
.placeholder-note a,
.placeholder-note a:link,
.placeholder-note a:visited,
.placeholder-note a:hover,
.placeholder-note a:active {
    /* 使用您 section-title 的顏色，確保是白色 */
    color: #f9fafb !important; 
    
    /* 移除文字裝飾 (可選：保持乾淨) */
    text-decoration: none; 
}

/* 加上點擊時的微小視覺回饋 (可選) */
.placeholder-note a:hover {
    opacity: 0.8;
}

/* 容器佈局：啟用 Flexbox 並讓子元素平均分配空間 */
.act-admin-buttons {
    display: flex;
    justify-content: space-between; /* 確保按鈕之間有間隙 */
    gap: 8px; /* 按鈕之間的間距 */
    padding: 10px 0; /* 上下邊距 */
    margin-bottom: 10px; /* 區塊下方間距 */
}

/* 針對按鈕的通用設定 */
.act-admin-buttons button {
    flex-basis: 50%; /* 讓每個按鈕佔據父容器寬度的 50% */
    padding: 10px 0; 
    border-radius: 8px; /* 圓角 */
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    font-size: 14px;
}

/* 編輯按鈕：藍色系 (配合 primary-button 的風格) */
.act-btn-edit {
    background-color: #3b82f6; /* 亮藍色 */
    color: #ffffff;
    border: 1px solid #2563eb;
}

.act-btn-edit:hover {
    background-color: #2563eb;
}

/* 刪除按鈕：危險紅色系 (與你的下架標籤 #ef4444 相似) */
.act-btn-delete {
    background-color: #ef4444; /* 紅色 */
    color: #ffffff;
    border: 1px solid #dc2626;
}

.act-btn-delete:hover {
    background-color: #dc2626;
}

/* 點擊回饋 */
.act-admin-buttons button:active {
    transform: scale(0.98);
}

.member-card-more {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #374151;
  color: #ffffff;           /* 文字改為白色 */
  font-size: 13px;
  line-height: 1.5;
}

.member-more-row {
  margin-bottom: 4px;
  color: #FFFFFF;
}

/* 遮罩背景 */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* 確保在最上層 */
}

/* 視窗本體 */
.modal-content {
    background: #fff; /* 內容使用白色背景，增加可讀性 */
    border-radius: 10px;
    width: 90%; /* 手機版寬度 */
    max-width: 650px; /* 電腦版最大寬度 */
    max-height: 90vh; /* 限制最大高度，讓內容可以捲動 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f8f8;
    color: #333;
}

.modal-header h2 {
    font-size: 18px;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

/* 視窗內容 (可捲動區域) */
.modal-body {
    padding: 20px;
    overflow-y: auto; /* 內容超過時垂直捲動 */
    line-height: 1.6;
    flex-grow: 1; /* 佔據剩餘空間 */
    color: #333;
}

.modal-footer {
    padding: 10px 20px;
    border-top: 1px solid #eee;
    text-align: right;
}

/* ===== 會員卡片細部樣式 ===== */

/* 卡片上半部 */
.member-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* 頭像尺寸微調一下 */
.member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-card-main {
  flex: 1;
}

/* 暱稱顏色 */
.member-nickname {
  font-size: 16px;
  font-weight: 600;
}

.member-nickname-male {
  color: #3b82f6; /* 藍色 */
}

.member-nickname-female {
  color: #fb7185; /* 粉紅 */
}

.member-account {
  font-size: 13px;
  color: #9ca3af;
}

.member-age-location {
  margin-top: 2px;
  font-size: 13px;
  color: #e5e7eb;
}

.member-status-badge {
  margin-left: 8px;
}

/* 簡易資訊區 */
.member-extra {
  margin-top: 6px;
  font-size: 13px;
  color: #e5e7eb;
}

/* ===== 操作列：同一行 ===== */
.member-actions-row {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.member-status-inline {
  display: flex;
  align-items: center;
  gap: 4px;
}

.member-status-label {
  font-size: 13px;
  color: #e5e7eb;
}

.member-istatus-select {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #111827;
  color: #e5e7eb;
  font-size: 13px;
}

/* 通用按鈕樣式 */
.member-btn {
  border: none;
  outline: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  background: #374151;
  color: #e5e7eb;
  transition: background 0.15s, transform 0.1s;
}

.member-btn:hover {
  background: #4b5563;
  transform: translateY(-1px);
}

/* 你也可以依功能分色（自由調整） */
.member-istatus-save {
  background: #10b981;
}
.member-istatus-save:hover {
  background: #059669;
}

.member-reset-pwd-btn {
  background: #f59e0b;
}
.member-reset-pwd-btn:hover {
  background: #d97706;
}

.member-more-btn {
  background: #3b82f6;
}
.member-more-btn:hover {
  background: #2563eb;
}

/* ===== 分頁列 ===== */

.member-pagination {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.member-page-btn {
  min-width: 32px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #4b5563;
  background: #111827;
  color: #e5e7eb;
  font-size: 13px;
  cursor: pointer;
}

.member-page-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
}

.member-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}


.member-card {
  background:#fff;
  border-radius:12px;
  padding:12px;
  margin-bottom:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  font-size:14px;
}


.member-row {
  display:flex;
  justify-content:space-between;
}

.member-label {
  color:#777;
}

.member-value {
  font-weight:500;
}

.member-card-actions {
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.member-istatus-select {
  padding:2px 6px;
  font-size:13px;
}

.member-card-more {
  margin-top:8px;
  border-top:1px solid #eee;
  padding-top:8px;
  font-size:13px;
  color:#555;
}


.member-status-0 { background:#dcfce7; color:#166534; }  /* 啟用 */
.member-status-1 { background:#fef9c3; color:#854d0e; }  /* 待審核 */
.member-status-2 { background:#fee2e2; color:#b91c1c; }  /* 封鎖 */


.act-tag.act-join-count {
  background-color: #1f2933;
  color: #e5e7eb;
}

.myact-status-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
}

.myact-status-tag.status-pending {
  background-color: #374151;
  color: #e5e7eb;
}

.myact-status-tag.status-approved {
  background-color: #16a34a;
  color: #f9fafb;
}

.myact-status-tag.status-rejected {
  background-color: #b91c1c;
  color: #fee2e2;
}

.calendar-day.has-vote .calendar-day-inner {

}

/* 資料編輯：密碼區塊分隔線 */
.profile-section-divider {
  border: none;
  border-top: 1px solid rgba(55, 65, 81, 0.9);
  margin: 14px 0 10px;
}

/* 資料編輯畫面專用：登出按鈕 */
.logout-button {
  width: 100%;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  background: #dc2626;   /* 紅底 */
  color: #ffffff;        /* 白字 */
  cursor: pointer;
  text-align: center;
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.7);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.08s ease;
}

.logout-button:hover {
  background: #b91c1c;
  box-shadow: 0 6px 16px rgba(185, 28, 28, 0.75);
  transform: translateY(-1px);
}

.logout-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(153, 27, 27, 0.7);
}

/* 我的活動畫面區塊 */
.activity-block {
  margin-bottom: 12px;
  padding: 10px 10px 12px;
  border-radius: 14px;
  background: radial-gradient(circle at top left, #020617, #020617 40%, #020617 100%);
  border: 1px solid rgba(55, 65, 81, 0.9);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}

.activity-block-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #f9fafb;
}

.activity-list-inner {
  display: flex;
  flex-direction: column;
}


/* 報名送出按鈕 */
#btnWantgoSubmit {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background-color: #16a34a; /* 綠色 */
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

#btnWantgoSubmit:hover {
  background-color: #15803d; /* 稍微深一點的綠 */
  transform: translateY(-1px);
}

/* 被禁用時（已送出報名） */
#btnWantgoSubmit:disabled {
  background-color: #9ca3af; /* 灰色 */
  color: #ffffff;
  cursor: not-allowed;
  transform: none;
}

.calendar-day-count {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  display: inline-block;
}

/* 報名名單卡片：頭像 */
.activity-join-card {
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: #111827;
  border: 1px solid #1f2937;
}

.activity-join-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.activity-join-avatar {
  width: 100px;
  height: 100px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-join-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-join-avatar--placeholder i {
  font-size: 32px;
  color: #9ca3af;
}

.activity-join-card-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activity-join-name {
  font-size: 16px;
  font-weight: 600;
  color: #f9fafb;
}

/* 右上角審核狀態標籤 */
.activity-join-status-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.activity-join-status-tag.status-pending {
  background: #6b7280;
  color: #ffffff;
}

.activity-join-status-tag.status-approved {
  background: #16a34a;
  color: #ffffff;
}

.activity-join-status-tag.status-rejected {
  background: #dc2626;
  color: #ffffff;
}

.activity-join-extra {
  margin-top: 6px;
  font-size: 13px;
  color: #e5e7eb;
  line-height: 1.5;
}

.activity-join-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.activity-join-actions .join-review-btn {
  flex: 1;
  min-width: 40px;
  padding: 6px 10px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}

.activity-join-actions .join-delete-btn {
  flex: 1;
  min-width: 40px;
  padding: 6px 10px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}

.activity-join-actions .join-review-btn.approve {
  background: #16a34a;
  color: #ffffff;
}

.activity-join-actions .join-review-btn.reject {
  background: #dc2626;
  color: #ffffff;
}

.activity-join-actions .join-review-btn.pending {
  background: #6b7280;
  color: #ffffff;
}

.activity-join-actions .join-delete-btn.reject {
  background: #666666;
  color: #ffffff;
}

/* 自己報名狀態提示區塊 */
.join-status-hint {
  margin-top: 10px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}

.join-status-hint.pending {
  background: #6b7280;
  color: #ffffff;
}

.join-status-hint.approved {
  background: #16a34a;
  color: #ffffff;
}

.join-status-hint.rejected {
  background: #dc2626;
  color: #ffffff;
}

/* 已送出報名的按鈕樣式 */
#btnWantgoSubmit.btn-join-disabled {
  background: #6b7280 !important;
  color: #ffffff !important;
  cursor: not-allowed;
}



	/* === 哪天有空：行事曆樣式 === */

	.calendar-shell {
	  background: radial-gradient(circle at top left, #020617, #020617 45%, #020617 100%);
	  border-radius: 18px;
	  border: 1px solid rgba(55, 65, 81, 0.9);
	  padding: 12px 12px 14px;
	  box-shadow:
		0 16px 36px rgba(15, 23, 42, 0.95),
		0 0 0 1px rgba(15, 23, 42, 1);
	}

	.calendar-header {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  margin-bottom: 8px;
	}

	.calendar-title {
	  font-size: 16px;
	  font-weight: 600;
	  color: #e5e7eb;
	}

	.calendar-nav-btn {
	  width: 32px;
	  height: 32px;
	  border-radius: 999px;
	  border: 1px solid rgba(75, 85, 99, 0.9);
	  background: radial-gradient(circle at top, #020617, #020617 70%);
	  color: #e5e7eb;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  cursor: pointer;
	  outline: none;
	  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.9);
	}

	.calendar-nav-btn i {
	  font-size: 20px;
	}

	.calendar-weekdays {
	  display: grid;
	  grid-template-columns: repeat(7, 1fr);
	  font-size: 12px;
	  color: #9ca3af;
	  text-align: center;
	  padding: 4px 0 2px;
	  border-bottom: 1px solid rgba(55, 65, 81, 0.9);
	  margin-bottom: 4px;
	}

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

	.calendar-day {
	  min-height: 40px;
	  font-size: 12px;
	  color: #e5e7eb;
	}

	.calendar-day.is-empty {
	  opacity: 0.12;
	}

	.calendar-day-inner {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: flex-start;
	  border-radius: 12px;
	  border: 1px solid rgba(55, 65, 81, 0.9);
	  padding: 4px 2px 6px;
	  cursor: pointer;
	  background: radial-gradient(circle at top, #020617, #020617 60%, #020617 100%);
	  box-shadow:
		0 10px 22px rgba(15, 23, 42, 0.9),
		inset 0 0 0 1px rgba(15, 23, 42, 0.9);
	  transition:
		background 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.08s ease;
	}

	.calendar-day-number {
	  font-size: 13px;
	  margin-bottom: 3px;
	}

	.calendar-day-checkbox {
	  position: relative;
	}

	/* 徹底隱藏哪天有空用的 checkbox（只留下圓點當視覺） */
	.calendar-day-checkbox input[type="checkbox"].freeday-checkbox {
	  position: absolute !important;
	  left: -9999px !important;
	  top: -9999px !important;
	  width: 1px !important;
	  height: 1px !important;
	  margin: 0 !important;
	  padding: 0 !important;
	  opacity: 0 !important;
	  border: none !important;
	  outline: none !important;
	  background: transparent !important;
	  appearance: none !important;
	  -webkit-appearance: none !important;
	  -moz-appearance: none !important;
	  pointer-events: none !important;
	}



	/* 行事曆的小圓點（未選取） */
	.freeday-indicator {
	  width: 18px;
	  height: 18px;
	  border-radius: 50%;
	  display: inline-block;
	  background: rgba(100, 116, 139, 0.25);  /* 深色微透明 */
	  border: 1.5px solid rgba(148, 163, 184, 0.5);
	  transition: all 0.2s ease;
	  box-sizing: border-box;
	  margin-top: 4px;
	}

	/* 選取的日期（整個格子會有 class） */
	.calendar-day.is-selected .freeday-indicator {
	  background: #3b82f6; /* iOS 藍 */
	  border-color: #60a5fa;
	  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
	}

	.calendar-day-checkbox {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}

	.calendar-day-checkbox .freeday-indicator {
	  flex: 0 0 auto !important; /* 不允許自動拉伸 */
	}


	/* 選取狀態整格高亮 */
	.calendar-day.is-selected .calendar-day-inner {
	  background: linear-gradient(135deg, #2563eb, #7c3aed);
	  border-color: rgba(96, 165, 250, 0.9);
	  box-shadow:
		0 18px 32px rgba(37, 99, 235, 0.9),
		0 0 0 1px rgba(37, 99, 235, 0.8);
	  transform: translateY(-1px);
	}

	.calendar-day.is-selected .calendar-day-number {
	  color: #f9fafb;
	}

	.calendar-day.is-selected .freeday-indicator {
	  border-color: transparent;
	  background: radial-gradient(circle at center, #f9fafb 0, #e5e7eb 40%, #d1d5db 100%);
	}

	/* 資料編輯大頭照區塊 */
	.profile-avatar-wrapper {
	  display: flex;
	  justify-content: center;
	  margin-top: 8px;
	  margin-bottom: 4px;
	}

	.profile-avatar {
	  width: 96px;
	  height: 96px;                         /* 正方形 */
	  border-radius: 50%;                   /* 完整圓形 */
	  overflow: hidden;
	  border: 2px solid rgba(148, 163, 184, 0.85);
	  background: radial-gradient(circle at top, #1f2937, #020617);
	  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.9);
	  display: none;
	}

	/* 圓形內的大頭照 */
	.profile-avatar img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	  object-position: center center;
	  display: block;
	}


    body {
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
      background: radial-gradient(circle at top, #111827 0, #020617 55%);
      color: #e5e7eb;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

	.viewport {
	  width: 100%;
	  min-height: 100vh;
	  display: flex;
	  justify-content: center;   /* 水平仍置中 */
	  align-items: flex-start;   /* 垂直改成靠上 */
	  padding: 8px 16px 16px;
	}


    .app-shell {
      width: 100%;
      max-width: 430px;
      background: linear-gradient(180deg, #020617 0%, #020617 40%, #030712 100%);
      display: flex;
      flex-direction: column;
      min-height: 600px;
      max-height: 900px;
      box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(15, 23, 42, 0.8);
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(148, 163, 184, 0.2);
      position: relative;
    }

    @media (max-width: 768px) {
      .viewport {
        padding: 0;
      }
      .app-shell {
        max-width: 100%;
        max-height: none;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
        border: none;
      }
    }

	.act-create-card {
	  margin-top: 8px;
	}
    .app-header {
      padding: 16px 20px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid rgba(148, 163, 184, 0.16);
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7));
      backdrop-filter: blur(18px);
      z-index: 10;
    }

    .app-title {
      font-size: 18px;
      font-weight: 600;
      color: #f9fafb;
    }

    .app-content {
      flex: 1;
      padding: 20px 20px 90px; /* 預留底部 tab 空間 */
      overflow-y: auto;
      background: radial-gradient(circle at top, #020617 0, #020617 45%, #020617 100%);
    }

    .screen {
      display: none;
    }

    .screen.is-active {
      display: block;
    }

    .section-header {
      margin-bottom: 16px;
    }

    .section-title {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 4px;
      color: #f9fafb;
    }

    .section-subtitle {
      font-size: 14px;
      color: #9ca3af;
      margin-bottom: 6px;
    }

    .section-note {
      display: block;
      font-size: 12px;
      line-height: 1.6;
      color: #9ca3af;
      background: rgba(15, 23, 42, 0.8);
      border-radius: 10px;
      padding: 8px 10px;
      border: 1px solid rgba(55, 65, 81, 0.9);
    }


/* --- 新增的影片列表樣式 --- */

.video-list {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 每個影片之間的間距 */
}

.video-item {
  display: flex;           /* 讓圖跟文左右並排 */
  align-items: flex-start; /* 對齊上方 */
  text-decoration: none;   /* 移除連結底線 */
  
  /* 為了配合你原本的風格，這裡加一點點互動背景色 */
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.video-item:active {
  background: rgba(255, 255, 255, 0.05); /* 點擊時稍微變亮 */
}

/* 左側縮圖設定 */
.video-thumb {
  width: 120px;          /* 固定寬度，可依需求調整 */
  flex-shrink: 0;        /* 確保圖片不會被擠壓 */
  aspect-ratio: 16 / 9;  /* 鎖定 16:9 比例 */
  border-radius: 6px;    /* 圖片圓角 */
  overflow: hidden;
  background: #000;      /* 圖片載入前的底色 */
  margin-right: 12px;    /* 圖文之間的距離 */
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 填滿框框不變形 */
  display: block;
}

/* 右側文字區塊 */
.video-info {
  flex: 1;              /* 佔滿剩餘空間 */
  min-width: 0;         /* 關鍵：防止文字過長撐爆版面 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直置中 (如果想要文字區塊置中的話) */
}

/* 標題樣式 (配合你原本的 #f9fafb 色系) */
.video-title {
  font-size: 15px;
  font-weight: 600;
  color: #f9fafb;       /* 跟你的 section-title 同色系 */
  margin-bottom: 4px;
  line-height: 1.4;

  /* 標題限制顯示 1 行，超過變... */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 描述樣式 (配合你原本的 #9ca3af 色系) */
.video-desc {
  font-size: 13px;
  color: #9ca3af;       /* 跟你的 section-subtitle 同色系 */
  line-height: 1.5;

  /* 描述限制顯示 2 行，超過變... */
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden;
}
    .form-group {
      margin-bottom: 16px;
    }

    .form-group.required .form-label::before {
      content: "*";
      color: #f97373;
      margin-right: 4px;
    }

    .form-label {
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 6px;
      display: block;
      color: #e5e7eb;
    }

    .form-input {
      width: 100%;
      padding: 11px 14px;
      border-radius: 12px;
      border: 1px solid rgba(55, 65, 81, 0.9);
      background: radial-gradient(circle at top left, #020617, #020617 40%, #020617 100%);
      font-size: 15px;
      outline: none;
      color: #f9fafb;
      transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        transform 0.1s ease;
      box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.9),
        0 10px 25px rgba(15, 23, 42, 0.9);
    }

    .form-input::placeholder {
      color: #6b7280;
    }

    .form-input:focus {
      border-color: #3b82f6;
      background: radial-gradient(circle at top left, #020617, #020617 40%, #020617 100%);
      box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.7),
        0 0 28px rgba(37, 99, 235, 0.4);
      transform: translateY(-1px);
    }

    /* 下拉選單 wrapper */
    .select-wrapper {
      position: relative;
      width: 100%;
    }

    .select-wrapper .form-input {
      padding-right: 34px;
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    .select-wrapper::after {
      content: "";
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid #9ca3af;
      pointer-events: none;
      opacity: 0.9;
    }

    .inline-select-group {
      display: flex;
      gap: 8px;
    }

    .inline-select-group .select-wrapper {
      flex: 1;
    }

    .form-textarea {
      width: 100%;
      min-height: 160px;
      resize: vertical;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(55, 65, 81, 0.9);
      background: radial-gradient(circle at top left, #020617, #020617 40%, #020617 100%);
      font-size: 14px;
      outline: none;
      color: #f9fafb;
      font-family: inherit;
      transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        transform 0.1s ease;
      box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.9),
        0 10px 25px rgba(15, 23, 42, 0.9);
    }

    .form-textarea::placeholder {
      color: #6b7280;
    }

    .form-textarea:focus {
      border-color: #3b82f6;
      box-shadow:
        0 0 0 1px rgba(59, 130, 246, 0.7),
        0 0 28px rgba(37, 99, 235, 0.4);
      transform: translateY(-1px);
    }

    .checkbox-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .checkbox-option {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: #e5e7eb;
    }

    .checkbox-option input {
      width: 16px;
      height: 16px;
      accent-color: #3b82f6;
      cursor: pointer;
    }

    .primary-button {
      width: 100%;
      margin-top: 8px;
      padding: 12px 16px;
      border-radius: 999px;
      border: none;
      font-size: 16px;
      font-weight: 600;
      background: linear-gradient(135deg, #2563eb, #4f46e5);
      color: #ffffff;
      cursor: pointer;
      outline: none;
      transition: transform 0.1s ease, box-shadow 0.12s ease;
      box-shadow: 0 12px 28px rgba(37, 99, 235, 0.75);
    }

    .primary-button:active {
      transform: translateY(1px);
      box-shadow: 0 6px 16px rgba(37, 99, 235, 0.6);
    }

    .helper-text {
      margin-top: 12px;
      font-size: 12px;
      color: #9ca3af;
      text-align: center;
    }

    .placeholder {
      padding: 12px 12px 16px;
      font-size: 14px;
      color: #e5e7eb;
      background: radial-gradient(circle at top left, #0f172a, #020617);
      border-radius: 16px;
      border: 1px solid rgba(75, 85, 99, 0.8);
      box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.9),
        0 0 0 1px rgba(15, 23, 42, 0.9);
    }

    .placeholder-title {
      font-weight: 600;
      margin-bottom: 4px;
      color: #e5e7eb;
    }

    .placeholder-note {
      font-size: 12px;
      color: #9ca3af;
      margin-top: 8px;
    }

    .tab-bar {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 430px;
      display: flex;
      border-top: 1px solid rgba(30, 64, 175, 0.8);
      background: rgba(15, 23, 42, 0.95);
      backdrop-filter: blur(18px);
      padding-bottom: env(safe-area-inset-bottom, 12px);
      padding-top: 6px;
      z-index: 999;
    }

    .tab-bar.hidden {
      display: none;
    }

    .tab-item {
      flex: 1;
      padding: 6px 0 8px;
      border: none;
      background: none;
      font-size: 11px;
      font-weight: 500;
      color: #9ca3af;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      outline: none;
      -webkit-tap-highlight-color: transparent;
      gap: 1px;
    }

    .tab-item-icon {
      font-size: 20px;
      line-height: 1;
    }

    .tab-item-label {
      margin-top: 1px;
    }

    .tab-item-indicator {
      width: 20px;
      height: 3px;
      border-radius: 999px;
      margin-top: 2px;
      opacity: 0;
      background: linear-gradient(90deg, #60a5fa, #a855f7);
      transition: opacity 0.18s ease;
    }

    .tab-item.is-active {
      color: #bfdbfe;
      font-weight: 600;
    }

    .tab-item.is-active .tab-item-icon {
      text-shadow: 0 0 10px rgba(96, 165, 250, 0.8);
    }

    .tab-item.is-active .tab-item-indicator {
      opacity: 1;
    }


	/* ===== 活動列表區塊 ===== */

	.section-header-with-action {
	  display: flex;
	  justify-content: space-between;
	  align-items: flex-end;
	  gap: 8px;
	}

	.create-activity-button {
	  border: 1px solid rgba(59, 130, 246, 0.9);
	  background: radial-gradient(circle at top left, #1d283a, #0f172a);
	  color: #dbeafe;
	  font-size: 13px;
	  font-weight: 500;
	  border-radius: 999px;
	  padding: 6px 12px;
	  display: inline-flex;
	  align-items: center;
	  cursor: pointer;
	  box-shadow:
		0 10px 24px rgba(15, 23, 42, 0.95),
		0 0 0 1px rgba(15, 23, 42, 0.9);
	  transition: transform 0.1s ease, box-shadow 0.12s ease, background 0.15s ease;
	}

	.create-activity-button:hover {
	  background: radial-gradient(circle at top left, #1d4ed8, #111827);
	}

	.create-activity-button:active {
	  transform: translateY(1px);
	  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.9);
	}

	.act-list {
	  margin-top: 8px;
	  display: flex;
	  flex-direction: column;
	  gap: 12px;
	}

	.act-month {
	  padding: 10px 12px 6px;
	  border-radius: 16px;
	  background: radial-gradient(circle at top left, #020617, #020617 45%, #020617 100%);
	  border: 1px solid rgba(55, 65, 81, 0.95);
	  box-shadow:
		0 14px 32px rgba(15, 23, 42, 0.95),
		0 0 0 1px rgba(15, 23, 42, 0.98);
	}

.act-month-header {
  width: 100%;
  border: none;
  outline: none;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.95), rgba(17, 24, 39, 0.9));
  color: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* 左右兩側 */
  padding: 10px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.act-month-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}

/* 右邊：活動數量＋箭頭 */
.act-month-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.act-month-count {
  font-size: 12px;
  color: #9ca3af;
}

.act-month-arrow {
  font-size: 18px;
  transition: transform 0.18s ease;
}

.act-month-header.is-open .act-month-arrow {
  transform: rotate(180deg);
}



	.act-month-sub {
	  font-size: 11px;
	  color: #6b7280;
	}

	.act-month-list {
	  display: flex;
	  flex-direction: column;
	}

	.act-item {
	  display: flex;
	  align-items: center;
	  gap: 10px;
	  padding: 8px 2px 8px 0;
	  border-bottom: 1px solid rgba(31, 41, 55, 0.9);
	  cursor: pointer;
	  -webkit-tap-highlight-color: transparent;
	}

	.act-item:last-child {
	  border-bottom: none;
	}

	.act-item-date {
	  width: 64px;
	  font-size: 14px;
	  font-weight: 500;
	  color: #e5e7eb;
	  text-align: left;
	  flex-shrink: 0;
	}

	.act-item-main {
	  flex: 1;
	  min-width: 0;
	}

	.act-item-title {
	  font-size: 15px;
	  font-weight: 600;
	  color: #f9fafb;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}

	.act-item-meta {
	  font-size: 11px;
	  color: #9ca3af;
	  margin-top: 2px;
	}

	.act-item-badges {
	  margin-top: 4px;
	  display: flex;
	  flex-wrap: wrap;
	  gap: 4px;
	}

	.act-badge {
	  font-size: 10px;
	  padding: 2px 6px;
	  border-radius: 999px;
	  border: 1px solid rgba(75, 85, 99, 0.9);
	  color: #e5e7eb;
	  background: rgba(15, 23, 42, 0.95);
	}

	.act-badge-lv-1 {
	  border-color: rgba(52, 211, 153, 0.9);
	  color: #bbf7d0;
	}

	.act-badge-lv-2 {
	  border-color: rgba(59, 130, 246, 0.9);
	  color: #bfdbfe;
	}

	.act-badge-lv-3 {
	  border-color: rgba(248, 113, 113, 0.95);
	  color: #fecaca;
	}

	.act-badge-pay {
	  border-color: rgba(251, 191, 36, 0.9);
	  color: #fef3c7;
	}

	.act-badge-biz {
	  border-color: rgba(168, 85, 247, 0.9);
	  color: #e9d5ff;
	}

	.act-item-arrow {
	  flex-shrink: 0;
	  font-size: 18px;
	  color: #6b7280;
	}

	/* 詳細活動卡片 */

	.act-detail {
	  margin-top: 16px;
	}

	.act-detail-card {
	  padding: 12px 12px 14px;
	  border-radius: 18px;
	  background: radial-gradient(circle at top left, #020617, #020617 45%, #020617 100%);
	  border: 1px solid rgba(55, 65, 81, 0.95);
	  box-shadow:
		0 18px 40px rgba(15, 23, 42, 0.98),
		0 0 0 1px rgba(15, 23, 42, 0.98);
	}

	.act-detail-title {
	  font-size: 18px;
	  font-weight: 700;
	  color: #f9fafb;
	  margin-bottom: 4px;
	}

	.act-detail-date {
	  font-size: 13px;
	  color: #9ca3af;
	  margin-bottom: 8px;
	}

	.act-detail-meta-row {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 6px;
	  margin-bottom: 8px;
	}

	.act-detail-meta-item {
	  font-size: 12px;
	  color: #e5e7eb;
	  background: rgba(15, 23, 42, 0.9);
	  border-radius: 999px;
	  padding: 4px 8px;
	  border: 1px solid rgba(55, 65, 81, 0.95);
	}

	.act-detail-note {
	  font-size: 13px;
	  color: #e5e7eb;
	  line-height: 1.6;
	  margin-top: 6px;
	  margin-bottom: 10px;
	}

	.act-detail-note small {
	  font-size: 11px;
	  color: #9ca3af;
	}

	/* 報名表單區塊 */

	.act-join-section-title {
	  font-size: 14px;
	  font-weight: 600;
	  margin-top: 10px;
	  margin-bottom: 4px;
	  color: #f9fafb;
	}

	.act-join-hint {
	  font-size: 12px;
	  color: #9ca3af;
	  margin-bottom: 6px;
	}

	.act-join-status {
	  font-size: 12px;
	  color: #e5e7eb;
	  margin-bottom: 4px;
	}

	/* 活動日期投票：簡易行事曆 */

	/* 活動日期投票：簡易行事曆（只作用在活動詳細的投票區） */

	.act-vote-block {
	  margin-top: 8px;
	  padding: 8px 8px 10px;
	  border-radius: 14px;
	  background: radial-gradient(circle at top left, #020617, #020617 45%, #020617 100%);
	  border: 1px solid rgba(55, 65, 81, 0.95);
	}

	.act-vote-block .calendar-header-sm {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  font-size: 12px;
	  margin-bottom: 4px;
	  color: #e5e7eb;
	}

	.act-vote-block .calendar-header-sm span {
	  color: #9ca3af;
	  font-size: 11px;
	}

	.act-vote-block .calendar-weekdays {
	  display: grid;
	  grid-template-columns: repeat(7, 1fr);
	  font-size: 11px;
	  color: #9ca3af;
	  text-align: center;
	  margin-bottom: 4px;
	}

	.act-vote-block .calendar-weekdays div {
	  padding: 2px 0;
	}

	.act-vote-block .calendar-grid {
	  display: grid;
	  grid-template-columns: repeat(7, 1fr);
	  gap: 4px;
	}

	.act-vote-block .calendar-day {
	  min-height: 40px;
	  border-radius: 10px;
	  background: rgba(15, 23, 42, 0.96);
	  border: 1px solid rgba(31, 41, 55, 0.95);
	  font-size: 12px;
	  color: #e5e7eb;
	  display: flex;
	  justify-content: center;
	  align-items: flex-start;
	  padding-top: 4px;
	  cursor: pointer;
	  transition:
		background 0.12s ease,
		border-color 0.12s ease,
		box-shadow 0.12s ease,
		transform 0.06s ease;
	}

	.act-vote-block .calendar-day.is-empty {
	  background: transparent;
	  border-color: transparent;
	  cursor: default;
	}

	.act-vote-block .calendar-day-inner {
	  text-align: center;
	}

	.act-vote-block .calendar-day-number {
	  font-size: 12px;
	}

	.act-vote-block .calendar-day.is-selected {
	  background: radial-gradient(circle at top, #1d4ed8, #020617);
	  border-color: rgba(59, 130, 246, 0.95);
	  box-shadow:
		0 0 0 1px rgba(59, 130, 246, 0.8),
		0 0 12px rgba(37, 99, 235, 0.7);
	  transform: translateY(-1px);
	}



/* === 活動列表 & 活動詳細：整體版面 === */

.activity-layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.activity-list,
.activity-detail {
  background: radial-gradient(circle at top left, #020617, #020617 40%, #020617 100%);
  border-radius: 16px;
  border: 1px solid rgba(55, 65, 81, 0.9);
  padding: 10px 10px 12px;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}

/* 桌機 / iPad 橫向時，左右並排 */
@media (min-width: 768px) {
  .activity-layout {
    flex-direction: row;
    align-items: flex-start;
  }
  .activity-list {
    flex: 1.2;
  }
  .activity-detail {
    flex: 1;
  }
}

/* === 月份群組 === */

.act-month-group {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid rgba(55, 65, 81, 0.9);
  background: rgba(15, 23, 42, 0.9);
}

/* 月份 header（折疊按鈕） */
.act-month-header {
  width: 100%;
  border: none;
  outline: none;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.95), rgba(17, 24, 39, 0.9));
  color: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.act-month-title {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}

.act-month-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.act-month-count {
  font-size: 12px;
  color: #9ca3af;
}

.act-month-arrow {
  font-size: 18px;
  transition: transform 0.18s ease;
}

.act-month-header.is-open .act-month-arrow {
  transform: rotate(180deg);
}

/* 月份底下的活動清單區塊 */
.act-month-panel {
  background: radial-gradient(circle at top left, #020617, #020617 40%, #020617 100%);
  border-top: 1px solid rgba(31, 41, 55, 0.9);
}

/* === 單一活動項目（列表） === */

.act-item {
  width: 100%;
  border: none;
  background: transparent;
  color: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-bottom: 1px solid rgba(31, 41, 55, 0.85);
}

.act-item:last-child {
  border-bottom: none;
}

.act-item:hover {
  background: rgba(15, 23, 42, 0.9);
}

.act-item-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.act-item-date {
  font-size: 13px;
  color: #9ca3af;
}

.act-item-title {
  font-size: 15px;
  font-weight: 600;
}

.act-item-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 40%;
}

.act-item-arrow {
  font-size: 18px;
  color: #6b7280;
  margin-left: 6px;
}

/* 小標籤樣式 */
.act-tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(55, 65, 81, 0.9);
  background: rgba(15, 23, 42, 0.9);
  white-space: nowrap;
}

/* 難度顏色 */
.lv-easy {
  border-color: #22c55e;
  color: #bbf7d0;
}
.lv-normal {
  border-color: #3b82f6;
  color: #bfdbfe;
}
.lv-hard {
  border-color: #f97316;
  color: #fed7aa;
}

/* 天數 / 商業團 / 需先付款 */
.act-days {
  border-color: rgba(148, 163, 184, 0.8);
  color: #e5e7eb;
}
.act-biz {
  border-color: #eab308;
  color: #facc15;
}
.act-pay {
  border-color: #fb923c;
  color: #fed7aa;
}

/* === 活動詳細頁 Header === */

.section-header-event-detail {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-back-button {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(55, 65, 81, 0.9);
  background: radial-gradient(circle at top, #020617, #020617 70%);
  color: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.9);
  outline: none;
}

.event-back-button i {
  font-size: 20px;
}

/* === 活動詳細卡片 === */

.act-detail-card {
  padding: 12px 12px 14px;
  border-radius: 18px;
  background: radial-gradient(circle at top left, #020617, #020617 45%, #020617 100%);
  border: 1px solid rgba(55, 65, 81, 0.95);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.98),
    0 0 0 1px rgba(15, 23, 42, 0.98);
}

/* 這個是卡片內的「活動日期」小標題 */
.activity-detail-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #f9fafb;
}

/* 「活動日期」下面那一行實際日期文字 */
.activity-detail-date-text {
  font-size: 14px;
  color: #e5e7eb;
  margin-bottom: 8px;
}

/* 上方資訊改為一列兩欄排版 */
.activity-detail-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 6px 0 10px;
}

.activity-detail-meta-item {
  flex: 1 1 calc(50% - 10px);
  font-size: 13px;
  color: #e5e7eb;
  background: rgba(15, 23, 42, 0.9);
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(55, 65, 81, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-detail-meta-item .meta-label {
  color: #9ca3af;
  margin-right: 4px;
}

/* 活動照片 */
.activity-detail-photo {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid rgba(55, 65, 81, 0.9);
}
.activity-detail-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 活動內容 Note：置中 */
.activity-detail-note {
  font-size: 13px;
  line-height: 1.6;
  color: #e5e7eb;
  margin-bottom: 10px;
  text-align: center;
}

/* 報名 / 名單 區塊共用外框 */
.activity-join-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(31, 41, 55, 0.85);
}

.activity-join-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #f9fafb;
}

.activity-join-note {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 6px;
}

/* === picktime 行事曆（活動日期投票用） === */

.act-vote-block {
  margin-top: 8px;
  margin-bottom: 8px;
  padding: 8px 8px 10px;
  border-radius: 14px;
  background: radial-gradient(circle at top left, #020617, #020617 45%, #020617 100%);
  border: 1px solid rgba(55, 65, 81, 0.95);
}

.act-vote-block .calendar-header-sm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 4px;
  color: #e5e7eb;
}

.act-vote-block .calendar-header-sm span {
  color: #9ca3af;
  font-size: 11px;
}

.act-vote-block .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 11px;
  color: #9ca3af;
  text-align: center;
  margin-bottom: 4px;
}

.act-vote-block .calendar-weekdays div {
  padding: 2px 0;
}

.act-vote-block .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.act-vote-block .calendar-day {
  min-height: 40px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(31, 41, 55, 0.95);
  font-size: 12px;
  color: #e5e7eb;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 4px;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.06s ease;
}

.act-vote-block .calendar-day.is-empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.act-vote-block .calendar-day-inner {
  text-align: center;
}

.act-vote-block .calendar-day-number {
  font-size: 12px;
}
/* 修正：移除投票行事曆中，繼承自「哪天有空」的 .calendar-day-inner 樣式 */
.act-vote-block .calendar-day-inner {
  text-align: center;
  /* 移除繼承的樣式 */
  border: none;
  padding: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  /* 移除繼承的 flex 屬性，讓 .calendar-day 的 flex 設定生效 */
  display: block; 
  flex-direction: unset;
  align-items: unset;
  justify-content: unset;
}
/* 投票行事曆：選取時取消內層框線與光暈 */
.act-vote-block .calendar-day.is-selected .calendar-day-inner {
  background: transparent;
  border: none;
  box-shadow: none;
  transform: none;
}
.act-vote-block .calendar-day.is-selected {
  background: radial-gradient(circle at top, #1d4ed8, #020617);
  border-color: rgba(59, 130, 246, 0.95);
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.8),
    0 0 12px rgba(37, 99, 235, 0.7);
  transform: translateY(-1px);
}

.act-vote-tip {
  margin-top: 4px;
  font-size: 11px;
  color: #9ca3af;
}

/* === 主揪：報名名單卡片 === */

.activity-join-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.activity-join-card {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(55, 65, 81, 0.95);
  font-size: 12px;
}

.activity-join-card-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.activity-join-name {
  font-weight: 600;
  color: #e5e7eb;
}

.activity-join-status {
  font-size: 11px;
  color: #9ca3af;
}

.activity-join-extra {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.4;
  margin-bottom: 4px;
}

.activity-join-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.join-review-btn {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(55, 65, 81, 0.9);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  font-size: 11px;
  cursor: pointer;
}

.join-review-btn.approve {
  border-color: #22c55e;
  color: #bbf7d0;
}

.join-review-btn.reject {
  border-color: #f97316;
  color: #fed7aa;
}

.activity-join-empty {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}

/* 報名區塊 */
.activity-join-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(31, 41, 55, 0.85);
}

.activity-join-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #f9fafb;
}

.activity-join-note {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 6px;
}

/* 活動詳細頁 header：左邊箭頭＋右邊文字 */
.section-header-event-detail {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 返回按鈕樣式 */
.event-back-button {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(55, 65, 81, 0.9);
  background: radial-gradient(circle at top, #020617, #020617 70%);
  color: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.9);
  outline: none;
}

.event-back-button i {
  font-size: 20px;
}

/* 活動詳細：上方資訊改成一列兩欄排版 */
.activity-detail-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 6px 0 10px;
}

.activity-detail-meta-item {
  flex: 1 1 calc(50% - 10px);
  font-size: 13px;
  color: #e5e7eb;
  background: rgba(15, 23, 42, 0.9);
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(55, 65, 81, 0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-detail-meta-item .meta-label {
  color: #9ca3af;
  margin-right: 4px;
}


/* ======= 會員詳細資料 Overlay ======= */

/* 會員詳細浮層外層容器 */
#memberDetailOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

/* 背景半透明黑底 */
#memberDetailOverlay .member-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* 中間卡片本體 */
#memberDetailOverlay .member-overlay-card {
  position: relative;
  max-width: 360px;
  width: 88%;
  padding: 16px 18px 18px;
  border-radius: 18px;
  background: rgba(18, 24, 38, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-size: 14px;
  box-sizing: border-box;
  z-index: 1;
}

/* 動畫 */
@keyframes fadePop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 關閉按鈕 */
.member-overlay-close {
  position: absolute;
  right: 12px;
  top: 8px;
  font-size: 28px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

/* Header 區域 */
.member-overlay-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 16px;
}

/* 大頭貼容器 */
.member-overlay-avatar-wrapper {
  width: 120px;
  height: 120px;
  min-width: 120px;
  min-height: 120px;
  border-radius: 12px;
  overflow: hidden;
  margin-right: 15px;
  background: #333;
}

/* 大頭貼固定 120px */
.member-overlay-avatar-wrapper img {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

/* 名稱與帳號 */
.member-overlay-main {
  flex: 1;
}

.member-overlay-nickname {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* 帳號狀態 badge */
.member-overlay-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13px;
  margin-top: 6px;
}

.status-approved { background: #16a34a; }
.status-pending  { background: #facc15; color: #333; }
.status-rejected { background: #dc2626; }

/* 內容 */
.member-overlay-body {
  font-size: 15px;
  line-height: 1.55;
}

.member-status-inline {
  margin-bottom: 10px;
}
.member-status-inline select,
.member-status-inline button {
  margin-left: 6px;
}


    /* 錯誤高亮 */
    .has-error .form-input,
    .has-error .form-textarea {
      border-color: #f97373 !important;
      box-shadow:
        0 0 0 1px rgba(248, 113, 113, 0.7),
        0 0 22px rgba(248, 113, 113, 0.35) !important;
    }