/* Base */
body { background:#f0f2f5; margin:0; font-family:Arial, sans-serif; }
.center-column { max-width:600px; margin:0 auto; }

/* Header */
.app-header { position:sticky; top:0; z-index:1000; background:#f0f2f5; border-bottom:1px solid #e0e3e7; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 auto; max-width:900px; padding:0.5rem 1rem; }
.header-actions { display:flex; gap:0.5rem; }
.profile { display:flex; align-items:center; gap:12px; }
/* .avatar { width:44px; height:44px; border-radius:50%; background:#a8d5ba; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; object-fit:cover; } */
.username { font-weight:600; color:#2f5d44; }
.header-user { display:flex; align-items:center; gap:.5rem; }
.avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; background:#eee; }
.login-btn { margin-left:.5rem; }

/* Buttons */
button, input[type="submit"], input[type="button"] {
  background:#a8d5ba; border:none; color:white; padding:8px 14px; font-size:14px;
  border-radius:4px; cursor:pointer; transition:background-color 0.2s ease;
}
button:hover { background:#8bc6a1; }

/* Modals */
.modal { position:fixed; inset:0; display:none; }
.modal[aria-hidden="true"] { display: none; }
.modal.open { display: flex; justify-content: center; align-items: center; }
.modal-content { background: white; padding: 1.5rem; border-radius: 0.75rem; box-shadow: 0 0 15px rgba(0,0,0,0.2); width: 300px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.45); }
.modal-dialog { position:relative; max-width:640px; margin:8vh auto; background:#fff; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,0.25); overflow:hidden; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 1rem; border-bottom:1px solid #eee; }
.modal-close { background:transparent; border:none; font-size:18px; cursor:pointer; padding:0.25rem 0.5rem; }
.modal-body { padding:1rem; }
.modal-actions { display:flex; justify-content:flex-end; gap:0.5rem; margin-top:0.75rem; }
form { display:grid; gap:0.5rem; margin:0 auto 2rem; max-width:520px; padding:0 1rem; }
input, textarea, select, button { padding:0.6rem; font-size:1rem; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }

.share-box { display:flex; gap:0.5rem; align-items:center; margin-top:0.5rem; }

/* Feed & cards */
#feed, #collection { max-width:600px; margin:0 auto; padding:0 1rem 2rem; }
.feed { display:block; }
.event-card { background:#fff; border-radius:6px; padding:1rem; margin-bottom:1rem; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
.meta { font-size:0.95rem; color:#606770; margin-bottom:0.25rem; }
.meta:first-child strong { color:#050505; }
.actions { display:flex; gap:0.5rem; margin-top:0.5rem; flex-wrap:wrap; }

img { display:block; height:auto; }
.event-image { width:350px; max-width:100%; border-radius:6px; margin-top:0.5rem; }
.muted { color:#777; }






/* Two-line clamp for feed descriptions */
.event-card .desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

/* Filter chips / links */
.active-filters { display:flex; gap:6px; align-items:center; margin-left:auto; margin-right:1rem; flex-wrap:wrap; }
.filter-chip { display:inline-flex; align-items:center; gap:6px; background:#e8f0ea; color:#2f5d44; border:1px solid #cfe3d6; border-radius:16px; padding:2px 8px; font-size:12px; }
.filter-chip button { background:transparent; border:none; color:#2f5d44; font-size:14px; cursor:pointer; padding:0 2px; }
.event-card a { color:#2f5d44; text-decoration:none; font-weight:500; }
.event-card a:hover { text-decoration:underline; }

/* Share UI */
.share-actions { display:flex; gap:0.5rem; flex-wrap:wrap; }
.share-box { display:flex; gap:0.5rem; align-items:center; margin-top:0.5rem; }
.share-box input { flex:1; padding:0.5rem; border:1px solid #ddd; border-radius:4px; }