/* ==========================================================================
   Joining 全域樣式表（style.css）
   ==========================================================================
   版面結構概覽：
   1. CSS 變數與全域重設（:root、*、body）
   2. 通用工具類別（.hidden、.page）
   3. 頂部導覽列（.site-header、.main-nav）
   4. 按鈕（.button 系列）
   5. 首頁 Hero 區（.hero、.search-bar）
   6. 分類與興趣標籤（.category-chip、.interest-chip）
   7. 容器與區塊（.container、.section-title）
   8. 活動卡片（.event-card 系列）
   9. 篩選面板與空狀態（.filter-panel、.empty-state）
   10. 活動詳細頁（.detail-*）
   11. 表單（.form-card、.form-row）
   12. 會員中心分頁（.tabs、.tab-panel）
   13. 成員列表（.member-list、.member-item）
   14. 認證彈窗（.modal、.auth-*）
   15. Toast 與頁尾（.toast、footer）
   16. 響應式斷點（1200px / 980px / 768px / 480px / 420px）
   ========================================================================== */

/* ── 1. CSS 變數與全域重設 ───────────────────────────── */
:root {
    color-scheme: light;         /* 固定淺色：即使手機為深色模式，也不套用深色版面（避免背景變黑） */
    /* ── Tiffany 綠色系（活潑版） ────────────────────────────
       主色：Tiffany Blue/Teal；深綠供文字，亮 Tiffany 供主 CTA */
    /* 品牌色 */
    --brand: #0aa39d;            /* 主色（Tiffany 藍綠）：大標、logo、裝飾、互動框線 */
    --brand-bright: #1ac9c2;     /* 最亮 Tiffany：主 CTA 底（搭深字） */
    --brand-bright-hover: #12b3ac;
    --on-brand: #06302e;         /* 品牌底上的深色文字（對比 >6:1，AA 合格） */
    --brand-text: #0b7a76;       /* 文字/圖示用（淺底 AA 合格） */
    --brand-soft: #8fded8;       /* 淺薄荷裝飾（hero 光暈、hover 底） */
    --brand-tint: #d9f6f3;       /* 極淺薄荷底（選中態、hero 漸層） */
    --brand-wash: #c3f0ec;       /* 淡薄荷底（標籤、鈴鐺） */
    /* 中性色（冷白 / 霧綠灰），四階分明 */
    --cream: #edf7f5;            /* 淺薄荷白（區塊底） */
    --canvas: #f6faf9;           /* 頁面底色（冷白） */
    --surface: #ffffff;          /* 卡片 / 輸入框 / 面板底色 */
    --header-bg: rgba(255, 255, 255, .95);   /* 頂部導覽列底（含毛玻璃） */
    --image-ph: #e6eeec;         /* 圖片載入前的佔位底 */
    --crop-bg: #1e2a29;          /* 裁切舞台背景（固定深色） */
    --ink: #1f2a29;              /* 主文字色（藍綠炭黑） */
    --ink-soft: #475553;         /* 長文用（活動說明、個人簡介） */
    --muted: #647573;            /* 次要文字色（冷灰綠，AA 合格） */
    --line: #d6e5e2;             /* 分隔線 / 邊框色 */
    --line-soft: #e3edea;        /* 更淡的分隔線 */
    --surface-muted: #e5f1ee;    /* 中性底（狀態徽章、未選取分頁） */
    /* 狀態色（色相彼此拉開：黃綠 / 琥珀 / 紅） */
    --green: #46701b;            /* 成功（已核准）：黃綠 */
    --success-bg: #e9f0d6;
    --warning: #8a580f;          /* 待審核：琥珀 */
    --warning-bg: #f7ecd5;
    --danger: #b23a44;           /* 失敗（已拒絕 / 已取消）：紅 */
    --danger-bg: #fbe6e8;
    /* 強調色（僅小面積 pop：未讀數） */
    --accent: #e2604a;           /* 珊瑚（Tiffany × 珊瑚的清新衝突） */
    --accent-fg: #3a1008;
    /* 反白元件（Toast） */
    --toast-bg: #1f2a29;
    --toast-fg: #ffffff;
    /* 焦點光暈（跟隨主色） */
    --focus-ring: color-mix(in srgb, var(--brand) 16%, transparent);
    /* 頁尾 */
    --footer-bg: #14211f;
    --footer-accent: #5fd0c8;
    --footer-muted: #9fb3b0;
    /* 陰影與圓角 */
    --shadow: 0 12px 35px rgba(20, 45, 45, .10);   /* 通用卡片陰影（冷） */
    --radius: 18px               /* 通用圓角大小 */
}

/* 全域盒模型重設：讓 padding/border 包含在元素寬高內，並清空預設邊距 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth     /* 錨點捲動有平滑動畫 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
    background: var(--canvas);  /* 頁面底色 */
    color: var(--ink);
    line-height: 1.65;          /* 行高：提升中文可讀性 */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent   /* 移除行動裝置點擊反白 */
}

/* 表單元件沿用系統字型（避免繼承字型不一致） */
button,
input,
select,
textarea {
    font: inherit;
    color: inherit
}

button {
    cursor: pointer
}

a {
    color: inherit
}

/* ── 2. 通用工具類別 ─────────────────────────────────── */
.hidden {
    display: none !important    /* 強制隱藏（優先於其他 display 設定） */
}

/* 頁面容器：預設隱藏，僅 .active 顯示（配合 SPA 切頁） */
.page {
    display: none;
    min-height: calc(100vh - 72px)   /* 扣掉導覽列高度 */
}

.page.active {
    display: block
}

/* ── 3. 頂部導覽列 ───────────────────────────────────── */
.site-header {
    height: 72px;
    padding: 0 max(5vw, 24px);       /* 左右留白，隨螢幕寬度調整 */
    background: var(--header-bg);
    backdrop-filter: blur(12px);     /* 毛玻璃效果 */
    display: flex;
    align-items: center;
    justify-content: space-between;  /* Logo 在左、選單在右 */
    position: sticky;                /* 捲動時固定在頂部 */
    top: 0;
    z-index: 20;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent)
}

.logo {
    text-decoration: none;
    font-size: 27px;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--brand)
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 24px
}

.main-nav>a {
    text-decoration: none;
    font-weight: 650;
    font-size: 14px
}

.main-nav>a:hover {
    color: var(--brand-text)
}

.menu-button {
    display: none;                   /* 桌面版隱藏，行動版顯示（見下方 media query） */
    border: 0;
    background: transparent;
    font-size: 25px;
    line-height: 1;
    padding: 4px;
    align-items: center;
    justify-content: center
}

.header-actions {
    display: flex;                   /* 右側群組：通知鈴鐺 + 漢堡選單 + 導覽列 */
    align-items: center;
    gap: 14px
}

/* ── 4. 按鈕 ─────────────────────────────────────────── */
.button {
    border: 1px solid transparent;
    border-radius: 999px;            /* 橢圓形按鈕 */
    padding: 10px 20px;
    font-weight: 750;
    transition: .2s                  /* hover 動畫 */
}

.button:disabled {
    cursor: not-allowed;   /* 停用態顯示禁止游標（勿用 wait，避免誤認為載入中） */
    opacity: .65;
    transform: none
}

/* 送出中：以 .is-loading 表示正在處理（顯示等待游標，與一般停用態區分） */
.button.is-loading,
.button:disabled.is-loading {
    cursor: wait
}

.button-primary {
    background: var(--brand-bright);
    color: var(--on-brand)
}

.button-primary:hover {
    background: var(--brand-bright-hover);
    transform: translateY(-1px)      /* 微微上浮 */
}

.button-outline {
    border-color: var(--line);       /* 空心按鈕 */
    background: var(--surface)
}

.button-outline:hover {
    border-color: var(--brand-text);
    color: var(--brand-text)
}

/* ── 5. 首頁 Hero 區 ─────────────────────────────────── */
.hero {
    background: radial-gradient(circle at 75% 25%, var(--brand-soft) 0, transparent 25%), linear-gradient(135deg, var(--cream), var(--brand-tint));
    min-height: 480px;
    display: grid;
    place-items: center;
    padding: 64px 20px
}

.hero-inner {
    text-align: center;
    max-width: 800px
}

.eyebrow,
.section-kicker {
    font-size: 24px;
    letter-spacing: 2.4px;
    font-weight: 850;
    color: var(--brand)             /* 區塊小標籤（Kicker）樣式 */
}

.hero h1 {
    font-size: 52px;
    line-height: 1.13;
    letter-spacing: -2px;
    margin: 15px 0 20px
}

.hero p {
    color: var(--muted);
    font-size: 18px
}

.search-bar {
    display: flex;
    max-width: 650px;
    margin: 34px auto 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px;
    box-shadow: var(--shadow)
}

.search-bar input {
    flex: 1;                         /* 輸入框自動撐滿剩餘寬度 */
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 10px 18px;
    background: transparent
}

.search-bar button {
    border: 0;
    border-radius: 999px;
    padding: 11px 27px;
    background: var(--brand-bright);
    color: var(--on-brand);
    font-weight: 800
}

/* ── 6. 分類與興趣標籤 ───────────────────────────────── */
.checkbox-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px
}
.interest-chip {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 999px;
    padding: 8px 15px;
    cursor: pointer;
    color: var(--muted);
    user-select: none                /* 防止點選時反白文字 */
}
.interest-chip:has(input:checked) {
    background: var(--brand);        /* 選中：主色（一階），低於主 CTA 的亮綠 */
    border-color: var(--brand);
    color: var(--on-brand)
}
.interest-chip input { display: none }   /* 隱藏原生 checkbox，改用標籤樣式 */

.categories {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 26px
}

.category-chip {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 999px;
    padding: 8px 15px;
    color: var(--muted)
}

.category-chip:hover,
.category-chip.active {
    background: var(--brand);        /* 選中：主色（一階），低於主 CTA 的亮綠 */
    border-color: var(--brand);
    color: var(--on-brand)
}

/* ── 7. 容器與區塊 ───────────────────────────────────── */
.container {
    width: min(1180px, calc(100% - 40px));   /* 最多 1180px，小螢幕時留邊距 */
    margin: auto
}

.page-content {
    padding-top: 58px;
    padding-bottom: 78px
}

/* 相鄰兩個活動區塊之間留間距 */
.events-section+.events-section {
    margin-top: 60px
}

.section-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 22px
}

.section-title h2,
.page-heading h1 {
    font-size: 30px;
    letter-spacing: -.6px
}

.section-title a {
    color: var(--brand-text);
    text-decoration: none;
    font-weight: 700
}

.section-note,
.page-heading p {
    color: var(--muted)
}

/* ── 8. 活動卡片 ─────────────────────────────────────── */
.events-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));   /* 桌面版一行 4 張 */
    gap: 22px
}

/* 會員搜尋：篩選列 + 會員卡片網格 */
.member-search-form {
    display: grid;
    grid-template-columns: 2fr 1fr auto auto;
    gap: 12px;
    align-items: center;
    background: var(--surface);
    padding: 18px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 28px
}

.member-search-form input,
.member-search-form select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: 12px 14px;
    outline: none
}

.member-search-form input:focus,
.member-search-form select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--focus-ring)
}

.member-search-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer
}

.member-search-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--brand)
}

.member-search-status:empty {
    display: none
}

.member-search-results {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px
}

.member-result {
    display: grid;
    justify-items: center;
    gap: 8px;
    width: 100%;
    padding: 22px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 5px 22px rgba(20, 45, 45, .07);
    text-align: center;
    transition: .2s
}

.member-result:hover {
    border-color: var(--brand);
    transform: translateY(-4px)
}

.member-result-info {
    display: grid;
    gap: 2px;
    min-width: 0;
    justify-items: center
}

.member-result-name {
    font-size: 15px;
    font-weight: 800
}

.member-result-meta {
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%
}

.member-result-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cream)
}

.member-profile-card {
    position: relative;
    width: min(520px, 100%)
}

.member-profile-card .modal-close {
    right: 12px;
    top: 12px
}

.member-profile-body {
    display: grid;
    gap: 16px
}

.member-profile-head {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 16px;
    align-items: center
}

.member-profile-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cream)
}

.member-profile-head h2 {
    font-size: 24px;
    line-height: 1.3
}

.member-profile-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 16px;
    background: var(--cream);
    border-radius: 14px
}

.member-profile-meta > div {
    min-width: 0
}

.member-profile-meta dt {
    color: var(--muted);
    font-size: 12px
}

.member-profile-meta dd {
    font-weight: 700;
    font-size: 14px;
    overflow-wrap: anywhere;   /* 長字串（如 Email）自動換行，避免溢出覆蓋相鄰欄位 */
    word-break: break-word
}

.member-profile-bio {
    white-space: pre-wrap;
    color: var(--ink-soft)
}

.member-profile-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.member-profile-chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--muted);
    background: var(--surface)
}

.event-card {
    border: 0;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 5px 22px rgba(20, 45, 45, .07);
    text-align: left;
    transition: .2s;
    width: 100%
}

.event-card:hover {
    transform: translateY(-4px);     /* hover 上浮效果 */
    box-shadow: var(--shadow)
}

.card-img {
    height: 175px;
    background: var(--image-ph) center/cover no-repeat;   /* 圖片背景填滿 */
    position: relative
}

.card-tag {
    position: absolute;              /* 疊在圖片左上角的分類標籤 */
    left: 12px;
    top: 12px;
    background: color-mix(in srgb, var(--ink) 82%, transparent);
    color: #fff;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 12px
}

.card-content {
    padding: 17px
}

.event-title {
    font-size: 16px;
    font-weight: 850;
    white-space: nowrap;             /* 過長文字省略號處理 */
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px
}

.event-info {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 13px
}

.card-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
    font-size: 12px
}

.status-badge {
    color: var(--brand-text);
    font-weight: 800
}

/* ── 9. 篩選面板與空狀態 ─────────────────────────────── */
.empty-state {
    padding: 46px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted)
}

.page-heading {
    margin-bottom: 28px
}

.filter-panel {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;   /* 關鍵字(寬) + 分類 + 城市 + 按鈕 */
    gap: 12px;
    background: var(--surface);
    padding: 18px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 28px
}

/* 篩選與表單輸入框共用樣式 */
.filter-panel input,
.filter-panel select,
.form-card input,
.form-card select,
.form-card textarea,
.auth-form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: 12px 14px;
    outline: none
}

/* 輸入框聚焦時顯示品牌色外框與光暈 */
.filter-panel input:focus,
.filter-panel select:focus,
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus,
.auth-form input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--focus-ring)
}

.load-more {
    display: block;
    margin: 30px auto 0
}

.text-button {
    border: 0;
    background: transparent;
    color: var(--brand-text);
    font-weight: 800;
    margin-bottom: 20px
}

/* ── 10. 活動詳細頁 ───────────────────────────────────── */
.detail-card {
    background: var(--surface);
    border-radius: 24px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.detail-image {
    height: 380px;
    background: var(--image-ph) center/cover no-repeat
}

.detail-body {
    padding: 34px
}

.detail-body h1 {
    font-size: 34px;
    line-height: 1.25;
    margin: 8px 0 18px
}

.detail-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* 兩欄顯示活動資訊 */
    gap: 12px;
    margin: 20px 0;
    padding: 20px;
    background: var(--cream);
    border-radius: 14px
}

.detail-description {
    white-space: pre-wrap;                   /* 保留說明文字的換行 */
    color: var(--ink-soft);
    margin: 20px 0
}

.detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px
}

/* ── 10b. 活動聊天室 ─────────────────────────────────── */
.activity-chat {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

.chat-messages {
    display: grid;
    gap: 12px;
    align-content: start;
    max-height: 320px;
    overflow-y: auto;
    padding: 16px;
    margin-bottom: 12px;
    background: var(--cream);
    border-radius: 14px
}

.chat-empty {
    color: var(--muted);
    font-size: 13px;
    text-align: center
}

.chat-message {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: start
}

.chat-message.mine {
    grid-template-columns: minmax(0, 1fr) 36px
}

.chat-message.mine .chat-avatar {
    order: 2
}

.chat-message.mine .chat-bubble {
    order: 1;
    background: var(--brand-wash)
}

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface)
}

.chat-bubble {
    min-width: 0;
    padding: 10px 12px;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(20, 45, 45, .06)
}

.chat-meta {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 12px
}

.chat-meta strong {
    color: var(--ink);
    font-size: 13px
}

.chat-bubble p {
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word
}

.chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px
}

.chat-form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: 12px 14px;
    outline: none
}

.chat-form input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--focus-ring)
}

/* ── 10c. 團員互評 ───────────────────────────────────── */
.activity-reviews {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

.review-list {
    display: grid;
    gap: 12px;
    margin-bottom: 16px
}

.review-item {
    padding: 14px 16px;
    background: var(--cream);
    border-radius: 14px
}

.review-head {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--muted)
}

.review-head strong {
    color: var(--ink);
    font-size: 14px
}

.review-stars {
    color: var(--brand-text);
    font-weight: 800
}

.review-item p {
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 4px
}

.review-meta {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px
}

.review-edit {
    border: 0;
    background: transparent;
    color: var(--brand-text);
    font-weight: 800;
    font-size: 12px
}

.review-form {
    display: grid;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px
}

.review-form label {
    display: grid;
    gap: 6px;
    font-size: 14px;
    font-weight: 750
}

.review-form select,
.review-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: 10px 12px;
    outline: none
}

.review-form select:focus,
.review-form textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--focus-ring)
}

.member-rating {
    font-size: 14px;
    font-weight: 800;
    color: var(--brand-text);
    margin-top: 4px
}

.member-rating.muted {
    color: var(--muted);
    font-weight: 600
}

.member-follow-counts {
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px
}

.member-profile-reviews {
    display: grid;
    gap: 10px;
    margin-top: 8px
}

.review-activity {
    font-size: 12px;
    color: var(--muted)
}

.review-activity-link {
    display: inline-block;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand, #2fb3aa);
    text-align: left;
    cursor: pointer
}

.review-activity-link:hover {
    text-decoration: underline
}

/* 評價人姓名：可點擊查看會員資料 */
.review-author {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 800;
    color: var(--ink, #23211f);
    cursor: pointer
}

.review-author:hover {
    color: var(--brand, #2fb3aa);
    text-decoration: underline
}

/* 喜歡／配對按鈕 */
.button.liked {
    color: #e0568a;
    border-color: #e0568a
}

.match-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: #ffe3ef;
    color: #d63b74;
    font-size: 12px;
    font-weight: 800
}

/* 會員相簿：個人資料頁 */
.photo-block {
    margin: 4px 0 8px
}

.photo-block-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px
}

.photo-hint {
    font-size: 12px;
    color: var(--muted)
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px
}

.photo-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--cream)
}

.photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 0;
    background: rgba(26, 23, 20, .72);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer
}

.photo-remove:hover {
    background: var(--danger, #e0565f)
}

.photo-empty {
    font-size: 13px;
    color: var(--muted)
}

/* 會員相簿：會員資料彈窗 */
.member-profile-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px
}

.member-profile-photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    background: var(--cream)
}

/* 登入公告／免責／交友安全聲明 */
.terms-card {
    width: min(560px, 100%);
    display: grid;
    gap: 14px
}

.terms-body {
    display: grid;
    gap: 8px;
    max-height: 52vh;
    overflow-y: auto
}

.terms-body h3 {
    font-size: 15px;
    color: var(--brand, #2fb3aa);
    margin-top: 6px
}

.terms-body p {
    font-size: 14px;
    line-height: 1.7;
    color: #544f4b
}

.footer-link {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
    text-decoration: underline
}

/* ── 10d. 活動問答（公開留言板）──────────────────────── */
.activity-qa {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

.qa-list {
    display: grid;
    gap: 12px;
    margin-bottom: 16px
}

.qa-item {
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px
}

.qa-head {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--muted)
}

.qa-head strong {
    color: var(--ink);
    font-size: 14px
}

.qa-you {
    font-size: 11px;
    font-weight: 800;
    color: var(--brand-text);
    background: var(--brand-wash);
    border-radius: 99px;
    padding: 1px 8px
}

.qa-time {
    font-size: 12px
}

.qa-content {
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 4px
}

.qa-answer {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--cream);
    border-radius: 12px
}

.qa-answer-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--brand-text);
    letter-spacing: 1px
}

.qa-answer p {
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 2px
}

.qa-unanswered {
    font-size: 12px;
    color: var(--muted);
    margin-top: 8px
}

.qa-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px
}

.qa-form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: 12px 14px;
    outline: none
}

.qa-form input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--focus-ring)
}

@media (max-width: 480px) {
    .qa-form {
        grid-template-columns: 1fr
    }
}

/* ── 10e. 已報名成員 ─────────────────────────────────── */
.activity-attendees {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

.attendee-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.attendee {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 999px;
    padding: 5px 14px 5px 6px;
    color: var(--ink);
    cursor: pointer;
    transition: .2s
}

.attendee:hover {
    border-color: var(--brand)
}

.attendee-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cream)
}

.attendee-name {
    font-size: 14px;
    font-weight: 700
}

/* ── 11. 表單 ─────────────────────────────────────────── */
.narrow {
    max-width: 820px
}

.form-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 18px
}

.form-card label,
.auth-form label {
    font-weight: 750;
    font-size: 14px;
    display: grid;
    gap: 7px
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;          /* 兩欄並排的表單列 */
    gap: 16px
}

.form-row > label {
    align-self: start
}

.activity-cover-upload {
    display: grid;
    align-content: start;
    gap: 8px
}

.activity-cover-preview-frame {
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: var(--cream)
}

.activity-cover-preview {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.activity-cover-preview-frame p,
.activity-cover-help {
    color: var(--muted);
    font-size: 12px
}

.activity-cover-preview-frame p {
    padding: 12px;
    text-align: center
}

.form-actions {
    display: flex;
    gap: 10px
}

/* ── 12. 會員中心分頁 ─────────────────────────────────── */
.tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
    overflow-x: auto                          /* 行動版可橫向捲動 */
}

.tab {
    border: 0;
    background: transparent;
    padding: 12px 17px;
    font-weight: 800;
    color: var(--muted);
    white-space: nowrap
}

.tab.active {
    color: var(--brand-text);                /* 目前分頁：品牌色 + 底部線 */
    border-bottom: 3px solid var(--brand-text)
}

.tab-panel {
    display: none
}

.tab-panel.active {
    display: block
}

.narrow-card {
    max-width: 650px
}

/* ── 12b. 會員大頭貼 ─────────────────────────────────── */
.avatar-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: var(--surface)
}

.avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cream);
    border: 2px solid var(--line)
}

.avatar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center
}

.avatar-hint {
    font-size: 12px;
    color: var(--muted)
}

/* ── 13. 成員列表（會員中心 / 申請審核） ─────────────── */
.member-list {
    display: grid;
    gap: 14px
}

.member-item {
    background: var(--surface);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 4px 16px rgba(20, 45, 45, .06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px
}

.member-item h3 {
    font-size: 17px
}

/* 申請人名稱：可點擊查看會員公開資料 */
.member-name-button {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    color: var(--brand-text);
    cursor: pointer
}

.member-name-button:hover {
    text-decoration: underline
}

.member-item p {
    font-size: 13px;
    color: var(--muted)
}

.member-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.small {
    padding: 7px 12px;
    font-size: 12px
}

.status {
    display: inline-block;                    /* 申請狀態徽章 */
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--surface-muted);
    font-size: 12px;
    font-weight: 800
}

.status.approved {
    color: var(--green);                      /* 已核准：黃綠 */
    background: var(--success-bg)
}

.status.pending {
    color: var(--warning);                    /* 待審核：琥珀 */
    background: var(--warning-bg)
}

.status.rejected,
.status.cancelled {
    color: var(--danger);                     /* 已拒絕 / 已取消：紅 */
    background: var(--danger-bg)
}

/* ── 14. 認證彈窗 ─────────────────────────────────────── */
.modal {
    position: fixed;                          /* 全螢幕遮罩 */
    inset: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--ink) 55%, transparent);
    display: grid;
    place-items: center;
    padding: 20px
}

.modal-card {
    position: relative;
    width: min(460px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: var(--surface);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .25)
}

.crop-modal-card {
    width: min(620px, 100%);
    display: grid;
    gap: 14px
}

.crop-modal-heading,
.crop-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.crop-modal-heading h2 {
    font-size: 22px;
    line-height: 1.3
}

.crop-modal-close {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 28px;
    line-height: 1
}

.crop-modal-instructions {
    color: var(--muted);
    font-size: 13px
}

.crop-stage {
    position: relative;
    width: 100%;
    max-height: 42vh;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 14px;
    background: var(--crop-bg);
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none
}

.crop-stage.crop-square {
    width: min(100%, 360px);
    aspect-ratio: 1
}

.crop-stage.crop-wide {
    aspect-ratio: 16 / 9
}

.crop-stage:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px
}

.crop-stage.is-dragging {
    cursor: grabbing
}

.crop-stage img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    pointer-events: none;
    will-change: transform;
    -webkit-user-drag: none
}

.crop-stage-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, transparent calc(33.333% - 1px), rgba(255, 255, 255, .35) calc(33.333% - 1px), rgba(255, 255, 255, .35) 33.333%, transparent 33.333%, transparent calc(66.666% - 1px), rgba(255, 255, 255, .35) calc(66.666% - 1px), rgba(255, 255, 255, .35) 66.666%, transparent 66.666%),
        linear-gradient(to bottom, transparent calc(33.333% - 1px), rgba(255, 255, 255, .35) calc(33.333% - 1px), rgba(255, 255, 255, .35) 33.333%, transparent 33.333%, transparent calc(66.666% - 1px), rgba(255, 255, 255, .35) calc(66.666% - 1px), rgba(255, 255, 255, .35) 66.666%, transparent 66.666%)
}

.crop-modal-actions {
    justify-content: flex-end
}

/* 上傳確認視窗：顯示裁切後預覽，沿用裁切視窗的標題與按鈕列樣式 */
.upload-confirm-card {
    width: min(480px, 100%);
    display: grid;
    gap: 14px
}

.upload-confirm-preview-frame {
    display: grid;
    place-items: center;
    min-height: 160px;
    max-height: 46vh;
    overflow: hidden;
    border-radius: 14px;
    background: var(--cream)
}

.upload-confirm-preview-frame img {
    max-width: 100%;
    max-height: 46vh;
    object-fit: contain
}

@media (max-width: 480px) {
    .upload-confirm-card {
        padding: 20px
    }
}

@media (max-width: 480px) {
    .crop-modal-card {
        padding: 20px
    }

    .crop-stage.crop-square {
        width: min(100%, 260px)
    }
}


.modal-close {
    position: absolute;
    right: -20px;
    top: -28px;
    border: 0;
    background: transparent;
    font-size: 24px;
    color: var(--muted);
    z-index: 1
}

.auth-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 22px;
    position: relative
}

.auth-tab {
    flex: 1;                                  /* 登入/註冊分頁各佔一半 */
    border: 0;
    background: var(--surface-muted);
    padding: 10px;
    border-radius: 10px;
    font-weight: 800
}

.auth-tab.active {
    background: var(--brand-bright);
    color: var(--on-brand)
}

.auth-form {
    display: none;
    gap: 16px
}

.auth-form.active {
    display: grid                             /* 目前顯示的登入/註冊表單 */
}

.auth-form h2 {
    margin: 4px 0
}

.full {
    width: 100%;
    margin-top: 4px
}

.demo-hint {
    font-size: 12px;
    color: var(--muted);
    text-align: center
}

.google-signin {
    display: flex;
    justify-content: center
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--line)
}

.link-button {
    border: 0;
    background: transparent;
    color: var(--brand-text);
    font-weight: 800;
    font-size: 12px
}

.link-button:hover {
    text-decoration: underline
}

/* ── 14.5 通知鈴鐺與面板 ─────────────────────────────── */
.notification-bell {
    position: relative;                       /* 徽章以絕對定位疊在鈴鐺右上角 */
    border: 0;
    background: var(--brand-wash);           /* 淺薄荷圓形底，讓鈴鐺更清楚 */
    border-radius: 50%;
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-text);                /* 鈴鐺圖示使用品牌深綠 */
    line-height: 1;
    flex-shrink: 0;
    transition: background .2s
}

.notification-bell:hover {
    background: var(--brand-soft)
}

.bell-icon {
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0
}

.notification-badge {
    position: absolute;
    top: -3px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--accent);                /* 珊瑚 pop：未讀數最醒目 */
    color: var(--accent-fg);
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center;
    line-height: 1
}

.notification-panel {
    position: fixed;
    top: 80px;
    right: max(5vw, 24px);
    z-index: 45;
    width: min(360px, calc(100vw - 28px));
    background: var(--surface);
    border-radius: 18px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    overflow: hidden
}

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    font-weight: 800
}

.notification-read-all {
    border: 0;
    background: transparent;
    color: var(--brand-text);
    font-size: 13px;
    font-weight: 800
}

.notification-list {
    max-height: 380px;
    overflow-y: auto;
    display: grid
}

.notification-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    text-align: left;
    display: flex;
    gap: 10px;
    align-items: flex-start
}

.notification-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0
}

.notification-body {
    flex: 1;
    min-width: 0
}

.notification-item:hover {
    background: var(--cream)
}

.notification-item.unread {
    background: var(--brand-tint)
}

.notification-item.unread .notification-message {
    color: var(--ink);
    font-weight: 800
}

.notification-message {
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted)
}

.notification-meta {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px
}

.notification-empty {
    padding: 30px 16px;
    text-align: center;
    color: var(--muted)
}

/* ── 15. Toast 與頁尾 ─────────────────────────────────── */
.toast {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 80;                              /* 置中疊在最上層 */
    transform: translate(-50%, -50%);
    background: var(--toast-bg);
    color: var(--toast-fg);
    padding: 12px 20px;
    border-radius: 99px;
    box-shadow: var(--shadow)
}

footer {
    text-align: center;
    background: var(--footer-bg);
    color: #fff;
    padding: 42px 20px
}

footer strong {
    font-size: 22px;
    color: var(--footer-accent)
}

footer p {
    color: var(--footer-muted);
    margin-top: 4px
}

footer .footer-contact {
    margin-top: 10px
}

footer a {
    color: var(--footer-accent);         /* 亮 Tiffany，深底上好讀 */
    text-decoration: none;
    font-weight: 700
}

footer a:hover {
    text-decoration: underline
}

/* ── 16. 響應式斷點 ───────────────────────────────────── */
/* 平板（≤1200px）：卡片由 4 欄改為 3 欄 */
@media(max-width:1200px) {
    .events-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
    .member-search-results {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

/* 小平板（≤980px）：卡片改為 2 欄，篩選面板改為兩欄 */
@media(max-width:980px) {
    .events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
    .filter-panel {
        grid-template-columns: 1fr 1fr
    }

    .filter-panel .button {
        grid-column: span 2                   /* 按鈕佔滿一整列 */
    }

    .member-search-form {
        grid-template-columns: 1fr 1fr;
        padding: 14px;
        gap: 10px
    }

    #member-search-keyword {
        grid-column: span 2
    }

    .member-search-form .button {
        grid-column: span 2
    }

    .member-search-results {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

/* 手機（≤768px）：改為行動版配置 */
@media(max-width:768px) {
    body {
        font-size: 15px
    }

    .site-header {
        height: 56px
    }

    .logo {
        font-size: 20px
    }

    .menu-button {
        display: flex                 /* 顯示漢堡選單按鈕（flex 垂直置中，與鈴鐺對齊） */
    }

    .main-nav {
        display: none;                        /* 選單改為下拉式 */
        position: absolute;
        left: 14px;
        right: 14px;
        top: 70px;
        background: var(--surface);
        padding: 16px;
        border-radius: 16px;
        box-shadow: var(--shadow);
        flex-direction: column;
        align-items: stretch
    }

    .main-nav.open {
        display: flex                         /* 點選按鈕後展開 */
    }

    .main-nav a,
    .main-nav button {
        text-align: center
    }

    .hero {
        min-height: auto;                     /* 不再撐滿整屏，避免首頁看不到下方活動 */
        padding: 52px 18px 40px;
        place-items: center start
    }

    .hero p {
        font-size: 14px
    }

    .hero h1 {
        font-size: 38px
    }

    .hero-inner {
        max-width: 100%;
        text-align: left
    }

    .search-bar {
        margin: 25px 0 0
    }

    .categories {
        display: grid;
        grid-template-columns: repeat(3, 1fr);   /* 分類改為三欄網格 */
        gap: 8px;
        justify-content: flex-start;
        margin-top: 20px
    }

    .category-chip {
        padding: 10px 8px;
        font-size: 13px
    }

    .container {
        width: min(100% - 28px, 1180px)
    }

    .page-content {
        padding-top: 36px;
        padding-bottom: 55px
    }

    .events-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px
    }

    .home-page .events-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .event-card {
        display: grid;
        grid-template-columns: 1fr
    }

    .card-img {
        height: 110px
    }

    .card-content {
        padding: 12px
    }

    .event-title {
        font-size: 14px;
        margin-bottom: 4px
    }

    .event-info {
        font-size: 12px;
        gap: 2px
    }

    .card-footer {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 10px;
        padding-top: 8px;
        font-size: 11px
    }

    .section-title h2,
    .page-heading h1 {
        font-size: 23px
    }

    .filter-panel {
        grid-template-columns: 1fr;           /* 篩選面板改為單欄 */
        padding: 14px;
        gap: 10px
    }

    .filter-panel .button {
        grid-column: auto
    }

    .member-search-form {
        grid-template-columns: 1fr;           /* 會員搜尋改為單欄 */
        padding: 14px;
        gap: 10px
    }

    #member-search-keyword,
    .member-search-form .button {
        grid-column: auto
    }

    .member-search-results {
        grid-template-columns: minmax(0, 1fr);   /* 會員卡片改為單欄 */
        gap: 12px
    }

    .detail-image {
        height: 200px
    }

    .detail-body {
        padding: 18px
    }

    .detail-body h1 {
        font-size: 22px
    }

    .detail-meta {
        grid-template-columns: 1fr;
        padding: 14px;
        gap: 10px
    }

    .detail-actions {
        flex-direction: column                /* 按鈕改為直向排列 */
    }

    .detail-actions .button {
        width: 100%;
        text-align: center
    }

    .search-bar {
        flex-direction: column;
        border-radius: 18px;
        padding: 6px
    }

    .search-bar input {
        text-align: left;
        padding: 12px 14px
    }

    .search-bar button {
        width: 100%;
        padding: 12px
    }

    .form-card {
        padding: 18px;
        gap: 14px
    }

    .form-row {
        grid-template-columns: 1fr;           /* 表單列改為單欄 */
        gap: 14px
    }

    .form-actions {
        flex-direction: column
    }

    .form-actions .button {
        width: 100%;
        text-align: center
    }

    .member-item {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px
    }

    .member-actions {
        width: 100%
    }

    .member-actions .button {
        flex: 1;
        text-align: center;
        font-size: 12px
    }

    .modal-card {
        padding: 20px 16px;
        border-radius: 18px
    }

    .auth-form {
        gap: 12px
    }

    .auth-form h2 {
        text-align: left
    }

    .demo-hint {
        text-align: left
    }

    .page-heading p {
        text-align: left
    }

    .section-note {
        text-align: left
    }

    .page-heading {
        margin-bottom: 18px
    }

    .page-heading h1 {
        font-size: 21px
    }

    .empty-state {
        padding: 30px 16px
    }

    .tabs {
        margin-bottom: 16px;
        gap: 4px
    }

    .tab {
        padding: 10px 12px;
        font-size: 13px
    }

    .narrow-card {
        max-width: 100%
    }
}

/* 小手機（≤480px）：維持放大後的可讀字級 */
@media(max-width:480px) {
    .events-grid {
        gap: 14px
    }

    .categories {
        grid-template-columns: repeat(2, 1fr)
    }

    .hero h1 {
        font-size: 30px
    }

    .hero p {
        font-size: 13px
    }

    .eyebrow {
        font-size: 19px
    }

    .card-img {
        height: 140px
    }

    .container {
        width: calc(100% - 24px)
    }

    .section-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px
    }

    .section-title h2,
    .page-heading h1 {
        font-size: 21px
    }

    .detail-body h1 {
        font-size: 21px
    }

    .modal-card {
        padding: 18px 14px
    }

    body {
        font-size: 14px
    }
}

/* 極窄手機（≤420px）：維持可讀字級，不再縮到過小 */
@media(max-width:420px) {
    .site-header {
        height: 50px;
        padding: 0 max(4vw, 14px)
    }

    .logo {
        font-size: 19px
    }

    .hero {
        min-height: auto;                      /* 不再撐滿整屏 */
        padding: 44px 14px 36px
    }

    .hero h1 {
        font-size: 26px
    }

    .hero-inner {
        text-align: left
    }

    .container {
        width: calc(100% - 18px)
    }

    .member-profile-head {
        grid-template-columns: 64px 1fr
    }

    .member-profile-avatar {
        width: 64px;
        height: 64px
    }

    .member-profile-meta {
        grid-template-columns: 1fr
    }

    .page-content {
        padding-top: 26px;
        padding-bottom: 42px
    }

    .events-grid {
        gap: 12px
    }

    .home-page .events-grid {
        grid-template-columns: 1fr            /* 首頁卡片改為單欄 */
    }

    .card-img {
        height: 120px
    }

    .card-content {
        padding: 10px
    }

    .event-title {
        font-size: 13px
    }

    .event-info {
        font-size: 11px
    }

    .card-footer {
        font-size: 10px
    }

    .section-title h2,
    .page-heading h1 {
        font-size: 19px
    }

    .category-chip {
        padding: 8px 6px;
        font-size: 12px
    }

    .categories {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px
    }

    .detail-body h1 {
        font-size: 19px
    }

    .detail-body {
        padding: 14px
    }

    .filter-panel {
        padding: 10px;
        gap: 6px
    }

    .filter-panel input,
    .filter-panel select {
        padding: 9px 10px;
        font-size: 13px
    }

    .button {
        padding: 10px 14px;
        font-size: 13px
    }

    .search-bar {
        border-radius: 14px;
        padding: 5px
    }

    .search-bar input {
        padding: 10px 12px;
        font-size: 14px
    }

    .search-bar button {
        padding: 10px;
        font-size: 14px
    }

    .form-card {
        padding: 14px;
        gap: 12px
    }

    .form-row {
        gap: 10px
    }

    .detail-meta {
        font-size: 13px
    }

    .modal-card {
        padding: 16px 12px;
        border-radius: 16px
    }

    .auth-form {
        gap: 10px
    }

    .tabs {
        gap: 2px
    }

    .tab {
        padding: 8px 10px;
        font-size: 12px
    }

    .member-item {
        padding: 12px
    }

    .member-item h3 {
        font-size: 15px
    }

    .member-actions .button {
        font-size: 11px
    }

    body {
        font-size: 13px
    }
}

/* ── 17. 主題 ──────────────────────────────────────────
   固定淺色：不使用 prefers-color-scheme 深色模式。
   即使手機系統為深色，頁面仍維持淺色（見開頭 :root 的 color-scheme: light）。 */

/* ==========================================================================
   好友與私訊（messages）
   ========================================================================== */
.nav-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 99px;
    background: var(--accent, #ff8a75);
    color: var(--accent-fg, #3a1008);
    font-size: 11px;
    font-weight: 800;
    line-height: 1
}

.member-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px
}

.friend-requests {
    margin-bottom: 20px
}

.messages-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    min-height: 460px
}

.conversation-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius, 16px);
    background: var(--surface, #fff);
    max-height: 70vh;
    overflow-y: auto
}

.conversation {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    text-align: left;
    cursor: pointer
}

.conversation-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center
}

.conversation-row .conversation {
    width: 100%
}

.conversation-remove {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 8px;
    opacity: .55
}

.conversation-remove:hover {
    color: var(--danger, #e0565f);
    background: var(--danger-bg, #fbecea);
    opacity: 1
}

/* 移除好友待確認狀態：按鈕轉為警示色，提示要再按一次 */
.button.danger,
.conversation-remove.danger {
    color: var(--danger, #e0565f) !important;
    background: var(--danger-bg, #fbecea) !important;
    border-color: var(--danger, #e0565f) !important;
    opacity: 1 !important;
    font-weight: 800;
    white-space: nowrap
}

.conversation:hover {
    background: var(--surface-muted, #f2f6f6)
}

.conversation.active {
    background: var(--brand-soft, #e2f2f1)
}

.conversation-avatar,
.dm-head-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-muted, #eef3f2)
}

.dm-head-avatar {
    width: 32px;
    height: 32px
}

.conversation-info {
    display: grid;
    min-width: 0
}

.conversation-name {
    font-weight: 800;
    font-size: 14px
}

.conversation-preview {
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.conversation-unread {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--accent, #ff8a75);
    color: var(--accent-fg, #3a1008);
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center
}

.dm-panel {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius, 16px);
    background: var(--surface, #fff);
    overflow: hidden
}

.dm-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 15px
}

.dm-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    overflow-y: auto;
    max-height: 52vh
}

.dm-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px
}

.dm-message.mine {
    align-items: flex-end
}

.dm-bubble {
    max-width: 72%;
    padding: 9px 13px;
    border-radius: 14px;
    background: var(--surface-muted, #eef3f2);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px
}

.dm-message.mine .dm-bubble {
    background: var(--brand, #2fb3aa);
    color: var(--brand-fg, #04201e)
}

.dm-time {
    font-size: 11px;
    color: var(--muted)
}

.dm-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--line)
}

.dm-form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface, #fff);
    padding: 11px 13px;
    outline: none
}

.dm-form input:focus {
    border-color: var(--brand, #2fb3aa);
    box-shadow: 0 0 0 3px var(--focus-ring, rgba(47, 179, 170, .15))
}

@media (max-width: 768px) {
    .messages-layout {
        grid-template-columns: 1fr
    }

    .conversation-list {
        max-height: 240px
    }
}

/* ── 開局額度與付費訂單 ─────────────────────────────────── */
.quota-banner {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--line, #d6e5e2);
    border-left: 4px solid var(--brand, #0aa39d);
    border-radius: 10px;
    background: var(--brand-tint, #d9f6f3);
    color: var(--ink, #1f2a29);
    line-height: 1.6;
    font-size: .95rem
}

.quota-banner strong {
    color: var(--brand-text, #0b7a76)
}

.quota-banner .button {
    margin-top: 8px
}

.order-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .8rem;
    background: var(--surface-muted, #e5f1ee);
    color: var(--muted, #647573)
}