/* ── Feed & Achievements ── */

/* Hero */
.feedHero{text-align:center;padding:56px 20px 28px;background:linear-gradient(135deg,#7c3aed 0%,#a78bfa 100%)}
.feedHeroTitle{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;color:#fff;margin:0 0 8px}
.feedHeroSub{font-size:1rem;color:rgba(255,255,255,.82);margin:0}

/* Gate */
.feedGate{max-width:420px;margin:48px auto;padding:0 20px}
.feedGateInner{text-align:center;background:var(--card-bg,#fff);border-radius:16px;padding:40px 24px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.feedGateIcon{font-size:3rem;margin-bottom:12px}
.feedGateInner h2{font-size:1.25rem;font-weight:700;margin:0 0 8px;color:var(--text-primary,#111)}
.feedGateInner p{font-size:.95rem;color:var(--text-secondary,#555);margin:0 0 20px}
.feedGateBtn{display:inline-block;padding:12px 32px;border-radius:9999px;background:#7c3aed;color:#fff;font-weight:600;text-decoration:none}
.feedGateBtn:hover{background:#6d28d9}

/* Main */
.feedMain{max-width:640px;margin:0 auto;padding:0 16px 60px}

/* Tabs */
.feedTabs{display:flex;gap:4px;margin:20px 0 16px;background:var(--card-bg,#fff);border-radius:9999px;padding:4px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.feedTab{flex:1;padding:10px 0;border:none;background:transparent;border-radius:9999px;font-size:.9rem;font-weight:600;cursor:pointer;color:var(--text-secondary,#666);transition:all .2s}
.feedTab:hover{color:var(--text-primary,#111)}
.feedTabActive{background:#7c3aed;color:#fff!important}

/* Filter pills */
.feedFilters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.feedFilterPill{padding:6px 14px;border-radius:9999px;border:1.5px solid var(--border,#ddd);background:var(--card-bg,#fff);font-size:.82rem;font-weight:600;cursor:pointer;color:var(--text-secondary,#666);transition:all .2s}
.feedFilterPill:hover{border-color:#7c3aed;color:#7c3aed}
.feedFilterActive{background:#7c3aed;color:#fff!important;border-color:#7c3aed}

/* Feed list */
.feedList{display:flex;flex-direction:column;gap:12px}
.feedLoading{text-align:center;padding:40px 0;color:var(--text-secondary,#888)}

/* Feed card */
.feedCard{background:var(--card-bg,#fff);border-radius:14px;padding:16px;box-shadow:0 1px 6px rgba(0,0,0,.05);border:1px solid var(--border,#eee);transition:transform .15s,box-shadow .15s}
.feedCard:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(124,58,237,.1)}
.feedCardHd{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.feedCardAvatar{width:36px;height:36px;border-radius:50%;background:#ede9fe;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:#7c3aed;overflow:hidden;flex-shrink:0}
.feedCardAvatar img{width:100%;height:100%;object-fit:cover}
.feedCardMeta{flex:1;min-width:0}
.feedCardName{font-size:.88rem;font-weight:700;color:var(--text-primary,#111);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feedCardTime{font-size:.75rem;color:var(--text-secondary,#999)}
.feedCardBody{margin:0}
.feedCardTitle{font-size:.95rem;font-weight:700;color:var(--text-primary,#111);margin:0 0 4px}
.feedCardDesc{font-size:.88rem;color:var(--text-secondary,#555);margin:0;line-height:1.45}
.feedCardBadge{display:inline-block;padding:2px 10px;border-radius:9999px;font-size:.72rem;font-weight:700;margin-top:6px}
.feedCardBadge.pr{background:#dcfce7;color:#16a34a}
.feedCardBadge.badge_earned{background:#fef3c7;color:#d97706}
.feedCardBadge.result{background:#dbeafe;color:#2563eb}
.feedCardBadge.goal_achieved{background:#fce7f3;color:#db2777}

/* Empty */
.feedEmpty{text-align:center;padding:48px 20px;color:var(--text-secondary,#888)}
.feedEmptyIcon{font-size:2.5rem;margin-bottom:10px}
.feedEmpty h3{margin:0 0 6px;color:var(--text-primary,#222)}
.feedEmpty p{margin:0;font-size:.92rem}
.feedEmpty a{color:#7c3aed;font-weight:600}

/* Load more */
.feedLoadMore{display:block;width:100%;padding:12px;border:none;border-radius:10px;background:var(--card-bg,#fff);color:#7c3aed;font-weight:700;font-size:.9rem;cursor:pointer;margin-top:12px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.feedLoadMore:hover{background:#f5f3ff}

/* ── Achievements ── */
.achSummary{display:flex;gap:12px;margin-bottom:20px}
.achStat{flex:1;text-align:center;background:var(--card-bg,#fff);border-radius:12px;padding:16px 8px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.achStatNum{display:block;font-size:1.5rem;font-weight:800;color:#7c3aed}
.achStatLabel{font-size:.78rem;color:var(--text-secondary,#888);font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* Category filter */
.achCatFilter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.achCatPill{padding:5px 12px;border-radius:9999px;border:1.5px solid var(--border,#ddd);background:var(--card-bg,#fff);font-size:.78rem;font-weight:600;cursor:pointer;color:var(--text-secondary,#666);transition:all .2s}
.achCatPill:hover{border-color:#7c3aed;color:#7c3aed}
.achCatActive{background:#7c3aed;color:#fff!important;border-color:#7c3aed}

/* Achievement grid */
.achGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}

.achCard{background:var(--card-bg,#fff);border-radius:14px;padding:18px 14px;box-shadow:0 1px 6px rgba(0,0,0,.05);border:1px solid var(--border,#eee);text-align:center;position:relative;transition:transform .15s,box-shadow .15s}
.achCard:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(124,58,237,.12)}
.achCard.locked{opacity:.45;filter:grayscale(1)}
.achCardIcon{font-size:2rem;margin-bottom:8px}
.achCardName{font-size:.88rem;font-weight:700;color:var(--text-primary,#111);margin:0 0 4px}
.achCardDesc{font-size:.75rem;color:var(--text-secondary,#888);margin:0;line-height:1.35}
.achCardTier{position:absolute;top:8px;right:10px;font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:9999px}
.achCardTier.bronze{background:#fef3c7;color:#b45309}
.achCardTier.silver{background:#e5e7eb;color:#4b5563}
.achCardTier.gold{background:#fef9c3;color:#a16207}
.achCardTier.platinum{background:#e0e7ff;color:#4338ca}
.achCardDate{font-size:.7rem;color:var(--text-secondary,#aaa);margin-top:6px}

/* Footer */
.feedFooter{text-align:center;padding:28px 20px;color:var(--text-secondary,#888);font-size:.82rem}
.feedFooter a{color:#7c3aed}

/* Dark mode */
[data-theme="dark"] .feedHero{background:linear-gradient(135deg,#4c1d95 0%,#6d28d9 100%)}
[data-theme="dark"] .feedCard{background:var(--card-bg,#1e1e2e);border-color:var(--border,#333)}
[data-theme="dark"] .feedTabs{background:var(--card-bg,#1e1e2e)}
[data-theme="dark"] .achCard{background:var(--card-bg,#1e1e2e);border-color:var(--border,#333)}
[data-theme="dark"] .achStat{background:var(--card-bg,#1e1e2e)}
[data-theme="dark"] .feedGateInner{background:var(--card-bg,#1e1e2e)}
[data-theme="dark"] .feedLoadMore{background:var(--card-bg,#1e1e2e)}

/* Mobile */
@media(max-width:500px){
  .feedHero{padding:44px 16px 22px}
  .feedMain{padding:0 12px 48px}
  .achGrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .achCard{padding:14px 10px}
}