/* --- 通用變數 --- */
:root {
    --member-primary-color: #0073aa; /* 主要顏色 */
    --member-text-color: #333;
    --member-light-gray: #f0f0f0;
    --member-border-color: #ddd;
    --member-card-shadow: 0 4px 8px rgba(0,0,0,0.08);
    --member-border-radius: 8px;
}

/* --- 主要容器 --- */
.daai-member {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    max-width: 960px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #fff;
    border-radius: var(--member-border-radius);
    box-shadow: var(--member-card-shadow);
    position: relative;
    color: var(--member-text-color);
}

/* --- 登出按鈕 --- */
.daai-member .daai-logout {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
}
.daai-member .daai-logout a {
    text-decoration: none;
    color: #888;
    font-size: 0.9em;
    padding: 0.5em 1em;
    border: 1px solid var(--member-border-color);
    border-radius: 20px;
    transition: all 0.3s ease;
}
.daai-member .daai-logout a:hover {
    background-color: var(--member-primary-color);
    color: #fff;
    border-color: var(--member-primary-color);
}

/* --- 頭像與名稱 --- */
.daai-member .daai-avatar-wrap {
    text-align: center;
    margin-bottom: 2rem;
}
.daai-member .daai-avatar {
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}
.daai-member .daai-name {
    font-size: 1.8em;
    font-weight: 600;
    color: var(--member-primary-color);
}

/* --- 分隔線 --- */
.daai-member .daai-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0;
    gap: 1rem;
    color: #777;
}
.daai-member .daai-divider::before,
.daai-member .daai-divider::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: var(--member-light-gray);
}
.daai-member .daai-bookmark, .daai-member .daai-divider-text {
    font-size: 1.5em;
}

/* --- 收藏列表 (RWD 核心) --- */
.daai-member .daai-fav-list {
    display: grid;
    /* * 自動填充欄位，每欄最小 280px，最大為 1fr (自動均分剩餘空間)
     * 這會自動處理響應式佈局，無需 @media 斷點
     */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem; /* 項目之間的間距 */
}

/* --- 空白狀態 --- */
.daai-member .daai-empty {
    text-align: center;
    padding: 2rem;
    color: #888;
    grid-column: 1 / -1; /* 佔滿所有欄位 */
}

/* --- 單一收藏項目 --- */
.daai-fav-item {
    background-color: #fff;
    border-radius: var(--member-border-radius);
    box-shadow: var(--member-card-shadow);
    overflow: hidden; /* 確保圖片圓角生效 */
    display: flex;
    flex-direction: column;
    position: relative; /* 為了日期定位 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.daai-fav-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* --- 收藏日期 --- */
.daai-fav-date {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 0.25em 0.6em;
    border-radius: 4px;
    font-size: 0.8em;
    z-index: 1;
}

/* --- 縮圖 --- */
.daai-fav-thumb {
    display: block;
    aspect-ratio: 16 / 9; /* 保持 16:9 的影片比例 */
    background-color: var(--member-light-gray);
}
.daai-fav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 確保圖片填滿容器且不變形 */
    display: block;
}
.daai-no-thumb{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:linear-gradient(135deg,#f3f4f6 0%,#e5e7eb 100%);
  color:#6b7280;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  user-select:none;
}
.daai-no-thumb::before{
  content:"🖼️";
  font-size:20px;
  margin-right:8px;
  opacity:.75;
}
.daai-fav-thumb:hover .daai-no-thumb{
  background:linear-gradient(135deg,#eef2f7 0%,#e5e7eb 100%);
}
/* --- 標題與資訊 --- */
.daai-fav-meta {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.daai-fav-title {
    margin: 0;
    font-size: 1.1em;
    line-height: 1.4;
    flex-grow: 1;
}
.daai-fav-title a {
    text-decoration: none;
    color: var(--member-text-color);
    transition: color 0.3s ease;
}
.daai-fav-title a:hover {
    color: var(--member-primary-color);
}