/* ============================================================
   Community pages: 天文行事曆 / 關於我們 / 成員名錄 / 搜尋
   ============================================================ */

/* ── 共用 ── */
.filter-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: var(--radius-full);
    font-size: 0.75rem; font-weight: var(--font-weight-medium);
    color: var(--color-text-muted); border: 1px solid transparent;
    transition: all var(--transition-fast);
}
.filter-btn:hover { color: var(--color-text); background: var(--color-surface); }
.filter-btn.active { color: var(--color-accent-text); background: var(--color-accent); }
.filter-btn.active .ev-dot { background: currentColor; }
.gallery-sort {
    display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-full);
    background: var(--color-surface); border: 1px solid var(--color-border);
}
.sort-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
    border-radius: var(--radius-full); font-size: 0.72rem; font-weight: var(--font-weight-medium);
    color: var(--color-text-muted); transition: all var(--transition-fast); white-space: nowrap;
}
.sort-btn:hover { color: var(--color-text); }
.sort-btn.active { color: var(--color-text); background: var(--color-surface-elevated); box-shadow: var(--shadow-sm); }

/* 事件類型顏色 */
.ev-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px;
    border-radius: var(--radius-full); font-size: 0.68rem; font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em; white-space: nowrap;
}
.ev-chip-amber  { background: rgba(243,159,90,0.14);  color: var(--color-amber); }
.ev-chip-rose   { background: rgba(174,68,90,0.16);   color: #e0788b; }
.ev-chip-purple { background: rgba(140,90,200,0.18);  color: #b79cf0; }
.ev-chip-blue   { background: rgba(90,150,240,0.16);  color: #86b4f5; }
.ev-chip-slate  { background: rgba(160,170,190,0.16); color: #b8c0d0; }
.ev-chip-green  { background: rgba(63,179,127,0.16);  color: #5fcf9a; }
:root[data-theme="light"] .ev-chip-rose   { color: #a63d52; }
:root[data-theme="light"] .ev-chip-purple { color: #6b3fb5; }
:root[data-theme="light"] .ev-chip-blue   { color: #2f66c2; }
:root[data-theme="light"] .ev-chip-slate  { color: #56607a; }
:root[data-theme="light"] .ev-chip-green  { color: #22875a; }
:root[data-theme="light"] .ev-chip-amber  { color: #b8631f; }
.ev-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ev-dot-amber { background: var(--color-amber); } .ev-dot-rose { background: #e0788b; }
.ev-dot-purple { background: #b79cf0; } .ev-dot-blue { background: #86b4f5; }
.ev-dot-slate { background: #b8c0d0; } .ev-dot-green { background: #5fcf9a; }

/* ═══════════ 天文行事曆 ═══════════ */
.ev-page { padding-bottom: var(--space-2xl); }
.ev-header { padding-bottom: var(--space-lg); }

/* 頂端：今日（全部）＋ 接下來（3 個）——低調的清單，不搶下面行事曆的戲 */
.ev-hl { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.ev-hl.has-two { grid-template-columns: 1fr 1fr; align-items: stretch; }   /* 今日 / 接下來等高 */
.ev-hl-block { padding: 12px 16px 6px; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); min-width: 0; }
.ev-hl-today { border-color: rgba(243,159,90,0.35); }
.ev-hl-head { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 0.72rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.08em; color: var(--color-text-muted); }
.ev-hl-today .ev-hl-head { color: var(--color-accent); }
.ev-hl-date { font-weight: var(--font-weight-medium); letter-spacing: 0; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* 整個清單共用一組欄寬（subgrid），每列的類別 / 標題 / 時間才會上下對齊 */
.ev-hl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; }
.ev-hl-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; row-gap: 4px; padding: 8px 0; }
.ev-hl-row + .ev-hl-row { border-top: 1px solid var(--color-border-subtle, var(--color-border)); }
.ev-hl-cats { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; max-width: 220px; }
.ev-hl-group { font-size: 0.6rem; font-weight: var(--font-weight-bold); letter-spacing: 0.06em; padding: 1px 6px; border-radius: 4px; color: var(--color-text-muted); border: 1px solid var(--color-border); }
.ev-hl-row.is-eau .ev-hl-group { color: var(--color-accent); border-color: rgba(243,159,90,0.45); }
.ev-hl-main { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.ev-hl-main:hover .ev-hl-title { color: var(--color-accent); }
.ev-hl-title { font-size: 0.88rem; font-weight: var(--font-weight-semibold); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--transition-fast); }
.ev-hl-sub { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ev-hl-sub:empty { display: none; }
.ev-hl-when { font-size: 0.76rem; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; justify-self: end; }
.ev-hl-when.is-today { padding: 2px 9px; border-radius: 999px; font-size: 0.7rem; color: var(--color-accent); background: var(--color-accent-soft, rgba(243,159,90,0.14)); }
.ev-hl-when.is-live { color: #3fb37f; background: rgba(63,179,127,0.14); }
.ev-hl-when.is-ended { color: var(--color-text-muted); background: var(--color-surface-elevated); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 0 var(--color-accent); animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(243,159,90,0.5); } 100% { box-shadow: 0 0 0 9px rgba(243,159,90,0); } }
.ev-zhr { font-size: 0.68rem; font-weight: var(--font-weight-semibold); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ev-date { font-variant-numeric: tabular-nums; }
.ev-card { scroll-margin-top: 90px; }
@media (max-width: 860px) {
    .ev-hl.has-two { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    /* 手機：類別一行、標題一行、時間靠右 */
    .ev-hl-list { display: block; }
    .ev-hl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cats when" "main main"; column-gap: 12px; }
    .ev-hl-cats { grid-area: cats; max-width: none; }
    .ev-hl-main { grid-area: main; }
    .ev-hl-when { grid-area: when; }
}

.ev-toolbar { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-xl); }
.ev-filters { display: flex; gap: 4px; flex-wrap: wrap; }

.ev-timeline { display: flex; flex-direction: column; gap: var(--space-2xl); }
.ev-month-head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.ev-month-num {
    font-size: 2.2rem; font-weight: var(--font-weight-bold); letter-spacing: -0.04em; line-height: 1;
    color: var(--color-text-muted); opacity: 0.35; font-variant-numeric: tabular-nums;
}
.ev-month-name { font-size: 1rem; font-weight: var(--font-weight-semibold); }
.ev-month-count { font-size: 0.72rem; color: var(--color-text-muted); }

.ev-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.ev-card {
    display: flex; gap: var(--space-md); padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg); background: var(--color-surface);
    border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), transform var(--transition-base), box-shadow var(--transition-base);
}
.ev-card:hover { border-color: var(--color-text-muted); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ev-card.is-past { opacity: 0.55; }
.ev-card.is-past:hover { opacity: 0.85; }
.ev-card.is-today { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.ev-card.is-highlight { background: linear-gradient(135deg, var(--color-accent-soft), transparent 60%), var(--color-surface); }
.ev-card-date {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 56px; flex-shrink: 0; padding: 6px 0; border-radius: var(--radius-md);
    background: var(--color-surface-elevated); border: 1px solid var(--color-border-subtle);
}
.ev-card-day { font-size: 1.5rem; font-weight: var(--font-weight-bold); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ev-card-wd { font-size: 0.62rem; color: var(--color-text-muted); margin-top: 4px; letter-spacing: 0.04em; }
.ev-card.is-today .ev-card-date { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-text); }
.ev-card.is-today .ev-card-wd { color: inherit; opacity: 0.8; }
.ev-card-body { flex: 1; min-width: 0; }
.ev-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.ev-tag-tw { font-size: 0.66rem; color: var(--color-text-muted); padding: 2px 8px; border-radius: var(--radius-full); border: 1px dashed var(--color-border); }
.ev-remaining { margin-left: auto; font-size: 0.72rem; font-weight: var(--font-weight-medium); color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-card.is-today .ev-remaining { color: var(--color-accent); }
.ev-card-title { font-size: 0.98rem; font-weight: var(--font-weight-semibold); margin-bottom: 4px; }
.ev-card-desc { font-size: 0.8rem; line-height: 1.65; color: var(--color-text-secondary); }
.ev-card-actions { display: flex; flex-wrap: wrap; gap: 6px var(--space-md); margin-top: 8px; }
.ev-action-nav { color: var(--color-accent); }
.ev-action { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--color-text-muted); transition: color var(--transition-fast); }
.ev-action:hover { color: var(--color-accent); }
.ev-action svg { width: 12px; height: 12px; }
.ev-note { font-size: 0.72rem; color: var(--color-text-muted); line-height: 1.6; margin-top: var(--space-2xl); max-width: 70ch; }

@media (max-width: 480px) {
    .ev-card { padding: var(--space-md); gap: var(--space-sm); }
    .ev-card-date { width: 48px; }
    .ev-remaining { margin-left: 0; width: 100%; }
}

/* ═══════════ 關於我們 ═══════════ */
.about-page { padding-bottom: var(--space-2xl); }
.about-hero { position: relative; overflow: hidden; padding: var(--space-4xl) 0 var(--space-3xl); text-align: center; }
.about-hero-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(800px 400px at 50% -10%, rgba(243,159,90,0.14), transparent 65%),
        radial-gradient(600px 320px at 15% 60%, rgba(102,37,73,0.22), transparent 70%),
        radial-gradient(600px 320px at 85% 60%, rgba(69,25,82,0.25), transparent 70%);
}
:root[data-theme="light"] .about-hero-bg {
    background:
        radial-gradient(800px 400px at 50% -10%, rgba(243,159,90,0.2), transparent 65%),
        radial-gradient(600px 320px at 15% 60%, rgba(232,188,185,0.45), transparent 70%),
        radial-gradient(600px 320px at 85% 60%, rgba(174,68,90,0.12), transparent 70%);
}
.about-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.about-flag { width: 72px; height: 72px; object-fit: contain; margin-bottom: var(--space-md); filter: drop-shadow(0 6px 20px rgba(0,0,0,0.3)); }
.about-hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; margin: 6px 0 var(--space-md); }
.about-lead { font-size: 0.95rem; line-height: 1.8; color: var(--color-text-secondary); max-width: 56ch; margin-bottom: var(--space-xl); }
.about-stats { display: flex; gap: var(--space-2xl); }
.about-stat { display: flex; flex-direction: column; align-items: center; }
.about-stat-num { font-size: 2rem; font-weight: var(--font-weight-bold); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.about-stat-lbl { font-size: 0.68rem; color: var(--color-text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 6px; }

.about-section { margin-top: var(--space-3xl); }
.about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.about-card {
    padding: var(--space-lg); border-radius: var(--radius-xl);
    background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-fast);
}
.about-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-text-muted); }
.about-card-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); }
.about-card-icon svg { width: 20px; height: 20px; }
.about-card-icon.t-amber { background: rgba(243,159,90,0.14); color: var(--color-amber); }
.about-card-icon.t-rose { background: rgba(174,68,90,0.16); color: #e0788b; }
.about-card-icon.t-purple { background: rgba(140,90,200,0.18); color: #b79cf0; }
.about-card-icon.t-green { background: rgba(63,179,127,0.16); color: #5fcf9a; }
:root[data-theme="light"] .about-card-icon.t-rose { color: #a63d52; }
:root[data-theme="light"] .about-card-icon.t-purple { color: #6b3fb5; }
:root[data-theme="light"] .about-card-icon.t-green { color: #22875a; }
:root[data-theme="light"] .about-card-icon.t-amber { color: #b8631f; }
.about-card h3 { font-size: 0.98rem; font-weight: var(--font-weight-semibold); margin-bottom: 6px; }
.about-card p { font-size: 0.82rem; line-height: 1.7; color: var(--color-text-secondary); }
.about-card-link { display: inline-block; margin-top: 10px; font-size: 0.78rem; color: var(--color-accent); font-weight: var(--font-weight-medium); }
.about-card-link:hover { color: var(--color-accent-hover); }

.about-timeline { list-style: none; position: relative; padding-left: 28px; }
.about-timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--color-border); }
.about-tl-item { position: relative; padding-bottom: var(--space-xl); }
.about-tl-item:last-child { padding-bottom: 0; }
.about-tl-dot {
    position: absolute; left: -28px; top: 6px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--color-accent); border: 3px solid var(--color-bg); box-shadow: 0 0 0 2px var(--color-accent-soft);
}
.about-tl-item.is-future .about-tl-dot { background: var(--color-surface-elevated); box-shadow: 0 0 0 2px var(--color-border); }
.about-tl-year { font-size: 0.68rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 4px; }
.about-tl-item.is-future .about-tl-year { color: var(--color-text-muted); }
.about-tl-body h4 { font-size: 0.95rem; font-weight: var(--font-weight-semibold); margin-bottom: 4px; }
.about-tl-body p { font-size: 0.82rem; line-height: 1.7; color: var(--color-text-secondary); max-width: 60ch; }

.about-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-md); }
.team-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: var(--space-lg); border-radius: var(--radius-xl);
    background: var(--color-surface); border: 1px solid var(--color-border);
    transition: transform var(--transition-base), border-color var(--transition-fast);
}
.team-card:hover { transform: translateY(-3px); border-color: var(--color-text-muted); }
.team-name { font-size: 0.92rem; font-weight: var(--font-weight-semibold); margin-top: var(--space-sm); }
.team-handle { font-size: 0.72rem; color: var(--color-text-muted); }
.team-role { margin-top: 8px; text-transform: uppercase; font-size: 0.62rem; }
.team-bio { font-size: 0.76rem; line-height: 1.6; color: var(--color-text-secondary); margin-top: 8px; }

.about-cta { margin-top: var(--space-3xl); }
.about-cta-inner {
    position: relative; overflow: hidden; text-align: center;
    padding: var(--space-2xl) var(--space-xl); border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(69,25,82,0.5), rgba(102,37,73,0.35)), var(--color-surface);
    border: 1px solid var(--color-border);
}
:root[data-theme="light"] .about-cta-inner { background: linear-gradient(135deg, rgba(232,188,185,0.5), rgba(243,159,90,0.18)), var(--color-surface); }
.about-cta h2 { font-size: 1.5rem; font-weight: var(--font-weight-bold); letter-spacing: -0.02em; margin-bottom: 8px; }
.about-cta p { font-size: 0.88rem; color: var(--color-text-secondary); max-width: 48ch; margin: 0 auto var(--space-lg); line-height: 1.7; }
.about-cta-actions { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }
.about-cta .btn { padding: 10px 20px; font-size: 0.85rem; }

@media (max-width: 768px) {
    .about-grid { grid-template-columns: 1fr; }
    .about-stats { gap: var(--space-xl); }
    .about-hero { padding: var(--space-3xl) 0 var(--space-2xl); }
}

/* ═══════════ 成員名錄 ═══════════ */
.members-page { padding-bottom: var(--space-2xl); }
.members-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.members-total { font-size: 0.78rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.members-toolbar { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-xl); }
.members-search {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; max-width: 360px;
    padding: 0 12px; border-radius: var(--radius-full);
    background: var(--color-surface); border: 1px solid var(--color-border);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.members-search:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.members-search svg { width: 15px; height: 15px; color: var(--color-text-muted); flex-shrink: 0; }
.members-search input {
    flex: 1; min-width: 0; border: none; background: transparent; padding: 9px 0;
    font-family: var(--font-primary); font-size: 0.82rem; color: var(--color-text); outline: none;
}
.members-search input::placeholder { color: var(--color-text-muted); }
.members-clear { font-size: 0.7rem; color: var(--color-text-muted); padding: 4px; }
.members-clear:hover { color: var(--color-text); }

.members-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.member-card {
    display: block; border-radius: var(--radius-xl); overflow: hidden;
    background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-fast);
}
.member-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-text-muted); }
.member-cover { height: 84px; background: var(--color-surface-elevated); overflow: hidden; position: relative; }
.member-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-cover.no-cover { background: linear-gradient(135deg, var(--color-deep-purple), var(--color-plum) 60%, var(--color-rose)); opacity: 0.55; }
.member-body { padding: 0 var(--space-md) var(--space-md); position: relative; }
.member-avatar { margin-top: -40px; margin-bottom: 8px; border: 3px solid var(--color-surface); box-shadow: var(--shadow-sm); }
.member-name-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.member-name { font-size: 0.95rem; font-weight: var(--font-weight-semibold); }
.member-name-row .badge { font-size: 0.6rem; text-transform: uppercase; }
.member-discord { width: 14px; height: 14px; color: #5865F2; }
.member-handle { font-size: 0.72rem; color: var(--color-text-muted); margin-bottom: 6px; }
.member-bio { font-size: 0.78rem; line-height: 1.6; color: var(--color-text-secondary); margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.member-stats { display: flex; gap: 12px; font-size: 0.72rem; color: var(--color-text-muted); padding-top: 8px; border-top: 1px solid var(--color-border-subtle); }
.member-stat b { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.member-joined { font-size: 0.66rem; color: var(--color-text-muted); margin-top: 6px; }
.members-empty { text-align: center; padding: var(--space-3xl) 0; color: var(--color-text-muted); font-size: 0.85rem; }

@media (max-width: 1024px) { .members-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .members-grid { grid-template-columns: 1fr; } .members-toolbar { flex-direction: column; align-items: stretch; } .members-search { max-width: none; } }

/* ═══════════ 搜尋 ═══════════ */
.search-page { padding-bottom: var(--space-2xl); }
.search-form {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 6px 6px 16px; border-radius: var(--radius-xl);
    background: var(--color-surface); border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm); margin-bottom: var(--space-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-form:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.search-form svg { width: 18px; height: 18px; color: var(--color-text-muted); flex-shrink: 0; }
.search-form input {
    flex: 1; min-width: 0; border: none; background: transparent; padding: 10px 0;
    font-family: var(--font-primary); font-size: 1rem; color: var(--color-text); outline: none;
}
.search-form input::placeholder { color: var(--color-text-muted); }
.search-form .btn { padding: 9px 18px; }
.search-summary { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: var(--space-xl); }
.search-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding: var(--space-3xl) 0; color: var(--color-text-muted); }
.search-empty svg { width: 40px; height: 40px; opacity: 0.5; }
.search-group { margin-bottom: var(--space-2xl); }
.search-group-n { font-weight: var(--font-weight-normal); margin-left: 4px; opacity: 0.7; }
.search-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.sg-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); transition: transform var(--transition-base), border-color var(--transition-fast); }
.sg-card:hover { transform: translateY(-2px); border-color: var(--color-text-muted); }
.sg-thumb { aspect-ratio: 4/3; background: var(--color-surface-elevated); }
.sg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-body { padding: 10px 12px; }
.sg-title { font-size: 0.82rem; font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.68rem; color: var(--color-text-muted); margin-top: 4px; }
.search-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sl-item {
    display: flex; align-items: center; gap: var(--space-md); padding: 12px 14px;
    border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.sl-item:hover { border-color: var(--color-text-muted); background: var(--color-surface-elevated); }
.sl-body { flex: 1; min-width: 0; }
.sl-title { font-size: 0.88rem; font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-sub { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.sl-arrow { width: 14px; height: 14px; color: var(--color-text-muted); flex-shrink: 0; }
.search-members { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
    border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border);
    transition: border-color var(--transition-fast);
}
.sm-chip:hover { border-color: var(--color-text-muted); }
.sm-name { font-size: 0.8rem; font-weight: var(--font-weight-medium); }
.sm-handle { font-size: 0.7rem; color: var(--color-text-muted); }
@media (max-width: 1024px) { .search-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .search-gallery-grid { grid-template-columns: repeat(2, 1fr); } .search-form .btn span { display: none; } }

/* 系統為亮色且未手動選主題時（無 data-theme），套用同一組亮色覆寫 */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .ev-chip-rose   { color: #a63d52; }
    :root:not([data-theme]) .ev-chip-purple { color: #6b3fb5; }
    :root:not([data-theme]) .ev-chip-blue   { color: #2f66c2; }
    :root:not([data-theme]) .ev-chip-slate  { color: #56607a; }
    :root:not([data-theme]) .ev-chip-green  { color: #22875a; }
    :root:not([data-theme]) .ev-chip-amber  { color: #b8631f; }
    :root:not([data-theme]) .about-card-icon.t-rose   { color: #a63d52; }
    :root:not([data-theme]) .about-card-icon.t-purple { color: #6b3fb5; }
    :root:not([data-theme]) .about-card-icon.t-green  { color: #22875a; }
    :root:not([data-theme]) .about-card-icon.t-amber  { color: #b8631f; }
    :root:not([data-theme]) .about-hero-bg {
        background:
            radial-gradient(800px 400px at 50% -10%, rgba(243,159,90,0.2), transparent 65%),
            radial-gradient(600px 320px at 15% 60%, rgba(232,188,185,0.45), transparent 70%),
            radial-gradient(600px 320px at 85% 60%, rgba(174,68,90,0.12), transparent 70%);
    }
    :root:not([data-theme]) .about-cta-inner { background: linear-gradient(135deg, rgba(232,188,185,0.5), rgba(243,159,90,0.18)), var(--color-surface); }
}

/* ── 成員卡上的星穹遠征進度 ── */
.member-rpg { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 8px 10px; border-radius: 10px;
  background: rgba(120,90,220,.12); border: 1px solid rgba(150,110,255,.3); }
.member-rpg-planet { width: 34px; height: 34px; image-rendering: pixelated; flex-shrink: 0; }
.member-rpg b { display: block; font-size: .82rem; }
.member-rpg small { display: block; opacity: .72; font-size: .7rem; line-height: 1.4; }
.member-rpg .member-rpg-zone { opacity: .55; }

/* 成員卡上的 Discord 名稱 */
.member-discord-name { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  font-size: .78rem; color: #8ea1ff; opacity: .95; }
.member-discord-name svg { width: 14px; height: 14px; flex-shrink: 0; }


/* ── 行事曆：自訂事件類型 / 時間 / 地點 / 訂閱 ── */
.ev-chip-teal { background: rgba(56,190,190,0.16); color: #5fd3d3; }
.ev-chip-pink { background: rgba(240,120,180,0.16); color: #f39ccb; }
.ev-chip-red  { background: rgba(230,80,80,0.16);   color: #f08585; }
:root[data-theme="light"] .ev-chip-teal { color: #157f7f; }
:root[data-theme="light"] .ev-chip-pink { color: #b53b7c; }
:root[data-theme="light"] .ev-chip-red  { color: #b83232; }
.ev-dot-teal { background: #5fd3d3; } .ev-dot-pink { background: #f39ccb; } .ev-dot-red { background: #f08585; }
.ev-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.ev-header-actions { display: flex; gap: var(--space-sm); flex-shrink: 0; }
.ev-time { font-size: 0.76rem; font-weight: var(--font-weight-semibold); color: var(--color-text); font-variant-numeric: tabular-nums; padding: 1px 8px; border-radius: var(--radius-full); background: var(--color-surface-elevated); }
.ev-loc, .ev-card-loc { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--color-text-secondary); }
.ev-card-loc { margin-top: 2px; }
.ev-loc svg, .ev-card-loc svg { width: 13px; height: 13px; flex-shrink: 0; }
.ev-dialog { position: fixed; inset: 0; margin: auto; width: min(92vw, 480px); max-height: 90vh; overflow: auto; padding: 0; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); }
.ev-dialog::backdrop { background: rgba(5,4,10,0.55); backdrop-filter: blur(8px); }
.ev-dialog-body { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); }
.ev-dialog h3 { font-size: 1.1rem; font-weight: var(--font-weight-semibold); margin: 0; }
.ev-dialog-help { font-size: 0.84rem; color: var(--color-text-secondary); line-height: 1.6; margin: 0; }
.ev-sub-list { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.ev-sub-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: inherit; transition: background var(--transition-fast); }
.ev-sub-item + .ev-sub-item { border-top: 1px solid var(--color-border-subtle); }
.ev-sub-item:hover { background: var(--color-surface-elevated); }
.ev-sub-item > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ev-sub-item b { font-size: 0.92rem; font-weight: var(--font-weight-semibold); }
.ev-sub-item small { font-size: 0.76rem; color: var(--color-text-secondary); line-height: 1.5; }
.ev-sub-ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); }
.ev-sub-ic svg { width: 22px; height: 22px; }
.ev-sub-ic-google { background: #fff; }
.ev-sub-ic-apple { background: #1c1c1e; color: #fff; }
:root[data-theme="light"] .ev-sub-ic-apple { background: #111; }
.ev-sub-ic-outlook { background: #fff; }
.ev-sub-url label { display: block; font-size: 0.78rem; color: var(--color-text-secondary); margin-bottom: 6px; }
.ev-sub-url-row { display: flex; gap: 8px; }
.ev-sub-url-row input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; }
.ev-dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.ev-sub-download { font-size: 0.76rem; color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.ev-sub-download:hover { color: var(--color-accent); }

/* 行事曆搜尋 / 來源 / 分類 */
.ev-toolbar { gap: var(--space-sm); margin-bottom: var(--space-sm); }
.ev-search { position: relative; display: flex; align-items: center; flex: 1; min-width: 220px; max-width: 420px; }
.ev-search svg { position: absolute; left: 12px; width: 15px; height: 15px; color: var(--color-text-muted); pointer-events: none; }
.ev-search input { width: 100%; min-height: 38px; padding: 8px 34px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-family: var(--font-primary); font-size: 0.86rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.ev-search input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.ev-search-clear { position: absolute; right: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-text-muted); font-size: 0.8rem; }
.ev-search-clear:hover { color: var(--color-text); background: var(--color-surface-elevated); }
.ev-src { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); }
.ev-src .seg-btn { min-height: 30px; padding: 4px 14px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); display: inline-flex; align-items: center; }
.ev-src .seg-btn.is-on { background: var(--color-accent); color: var(--color-accent-text); }
.ev-src .seg-btn:not(.is-on):hover { color: var(--color-text); background: var(--color-surface-elevated); }
.ev-filters-wrap { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-xl); }
.ev-filters { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ev-filters-label { min-width: 44px; font-size: 0.72rem; font-weight: var(--font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); margin-right: 4px; }
.ev-result-count { font-size: 0.78rem; color: var(--color-text-secondary); margin-top: 4px; }
.ev-result-count a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.ev-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--space-3xl) 0; text-align: center; color: var(--color-text-secondary); border: 1px dashed var(--color-border); border-radius: 14px; }
.ev-empty svg { width: 36px; height: 36px; opacity: 0.5; }
.ev-empty a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 768px) { .ev-search { max-width: none; } .ev-filters-label { flex: 0 0 auto; min-width: 0; padding-right: 2px; } }
.ev-sub-lang { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-bg); }
.ev-sub-lang .seg-btn { min-height: 28px; padding: 3px 14px; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); font-family: var(--font-primary); }
.ev-sub-lang .seg-btn.is-on { background: var(--color-accent); color: var(--color-accent-text); }
.ev-action-sub { color: var(--color-accent); font-weight: var(--font-weight-semibold); background: none; border: none; padding: 0; font-family: var(--font-primary); cursor: pointer; }
.ev-action-sub:hover { color: var(--color-accent-hover); }

/* 連到活動頁的事件（2026-09-23）：報名按鈕 */
.ev-action-reg { color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--color-border); }
.ev-action-reg.is-open { color: var(--color-accent-text); background: var(--color-accent); border-color: var(--color-accent); }
.ev-action-reg.is-open:hover { color: var(--color-accent-text); background: var(--color-accent-hover); }
.ev-action-reg.is-open.is-full { background: transparent; color: var(--color-amber); border-color: rgba(243, 159, 90, 0.5); }
.ev-hl-reg { font-size: 0.66rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(63, 179, 127, 0.16); color: #3fb37f; }
.ev-header-actions { flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
@media (max-width: 480px) { .ev-header-actions .btn { padding: 8px 12px; } }

/* ── 列表／月曆切換、已過事件 ── */
.ev-viewbar { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-sm); }
.ev-view .seg-btn { display: inline-flex; align-items: center; gap: 6px; }
.ev-view .seg-btn svg { width: 15px; height: 15px; }
.ev-past-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--color-text-muted); cursor: pointer; }
.ev-timeline.hide-past .ev-card.is-past,
.ev-timeline.hide-past .ev-month.is-all-past,
.ev-grid-wrap.hide-past .ev-cal.is-past { display: none; }
.ev-card.is-flash { outline: 2px solid var(--color-amber); outline-offset: 3px; transition: outline-color 0.3s; }

.ev-grid-wrap { display: flex; flex-direction: column; gap: var(--space-xl); margin-bottom: var(--space-xl); }
.ev-cal-title { font-size: 1.1rem; margin: 0 0 var(--space-sm); }
.ev-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.ev-cal-wd { text-align: center; font-size: 0.75rem; padding: 6px 0; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); }
.ev-cal-wd.is-we { color: #e0788b; }
.ev-cal-cell { min-height: 96px; padding: 4px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-cal-cell:nth-child(7n + 7) { border-right: 0; }
.ev-cal-cell.is-out { opacity: 0.3; }
.ev-cal-cell.is-past .ev-cal-num, .ev-cal-cell.is-past .ev-cal-ev { opacity: 0.5; }
.ev-cal-num { font-size: 0.8rem; color: var(--color-text-muted); align-self: flex-start; min-width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 999px; }
.ev-cal-cell.is-today { background: rgba(243,159,90,0.07); }
.ev-cal-cell.is-today .ev-cal-num { background: var(--color-amber); color: #1a1426; font-weight: 700; }
.ev-cal-ev { display: block; font-size: 0.72rem; line-height: 1.35; padding: 1px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.ev-cal-ev b { font-weight: 600; opacity: 0.85; }
.ev-cal-ev:hover { filter: brightness(1.25); }
@media (max-width: 640px) {
    .ev-cal-cell { min-height: 58px; padding: 2px; }
    .ev-cal-ev { font-size: 0; height: 6px; padding: 0; border-radius: 3px; background: currentColor; }
    .ev-cal-ev b { display: none; }
}