:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-soft: #fbfff8;
  --ink: #193320;
  --muted: #627567;
  --line: #e4eedc;
  --primary: #b8ef7c;
  --primary-dark: #8ed45a;
  --primary-text: #2d7138;
  --primary-soft: #eefbdd;
  --icon-bg: #eefbdd;
  --orange: #ff8a3d;
  --green: #17a673;
  --red: #d9475b;
  --sidebar: #193521;
  --shadow: 0 18px 50px rgba(37, 76, 45, 0.08);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 11px;
  --sidebar-width: 270px;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; font-size: 15px; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: Aptos, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: 0; margin-bottom: 12px; }
h2 { font-size: 1.25rem; line-height: 1.25; letter-spacing: 0; margin-bottom: 8px; }
p { color: var(--muted); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.eyebrow {
  display: inline-block;
  color: var(--primary-text);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.full-width { width: 100%; }
.danger-text { color: var(--red); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 750;
  font-size: .92rem;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button-primary { color: var(--primary-text); background: var(--primary); box-shadow: 0 8px 20px rgba(105,170,70,.22); }
.button-primary:hover { background: var(--primary-dark); }
.button-secondary { color: var(--primary-text); background: var(--primary-soft); }
.button-ghost { color: var(--muted); background: transparent; border-color: var(--line); }
.button-muted { color: #9c98aa; background: #f2f1f6; }
.button-danger { color: #fff; background: var(--red); }
.button-danger-outline { color: var(--red); background: #fff; border-color: #f1c8cf; }
.button-large { min-height: 50px; padding-inline: 24px; }
.text-link { color: var(--primary-text); font-weight: 750; }
.icon-button { border: 0; background: transparent; font-size: 1.3rem; }

.flash {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid;
  border-radius: 13px;
  font-weight: 650;
  animation: slideDown .25s ease;
}
.flash span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; }
.flash-success { color: #11694b; background: #edfbf5; border-color: #b9ead7; }
.flash-success span { background: var(--green); }
.flash-error { color: #9d2d3d; background: #fff2f4; border-color: #f2c0c8; }
.flash-error span { background: var(--red); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } }

/* Authentication */
.auth-body { background: var(--bg); }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, .9fr) 1.1fr; }
.auth-showcase {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 5vw, 70px);
  color: #fff;
  background: radial-gradient(circle at 80% 15%, rgba(255,255,255,.18), transparent 30%), linear-gradient(145deg, #2f7d45, #79c85a 60%, #b8ef7c);
}
.auth-showcase::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  right: -180px;
  bottom: -190px;
  border: 80px solid rgba(255,255,255,.08);
  border-radius: 50%;
}
.register-showcase { background: radial-gradient(circle at 25% 75%, rgba(255,255,255,.14), transparent 35%), linear-gradient(145deg, #50a25f, #a4e86f 70%); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--icon-bg); font-size: 1.4rem; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.08rem; }
.brand small { color: var(--muted); font-size: .72rem; }
.brand-light .brand-mark { background: rgba(255,255,255,.16); }
.brand-light small { color: rgba(255,255,255,.72); }
.showcase-copy { position: relative; z-index: 1; max-width: 520px; margin-block: auto; }
.showcase-copy .eyebrow { color: #ecffd8; }
.showcase-copy h1 { max-width: 480px; font-size: clamp(2.7rem, 5vw, 5rem); }
.showcase-copy p { color: rgba(255,255,255,.76); max-width: 430px; font-size: 1.08rem; }
.floating-food { position: absolute; right: 13%; top: 20%; font-size: 4.5rem; transform: rotate(12deg); filter: drop-shadow(0 18px 18px rgba(0,0,0,.14)); }
.floating-food.second { top: auto; right: 28%; bottom: 12%; font-size: 3.6rem; transform: rotate(-12deg); }
.emoji-cloud { position: relative; z-index: 1; max-width: 400px; font-size: clamp(1.45rem, 2.7vw, 2.4rem); letter-spacing: 10px; line-height: 1.8; }
.auth-panel { display: grid; place-items: center; padding: 38px 24px; }
.auth-card { width: min(100%, 470px); }
.auth-card-wide { width: min(100%, 520px); }
.section-heading { margin-bottom: 25px; }
.section-heading h2 { font-size: 2rem; }
.section-heading p { margin-bottom: 0; }
.auth-switch { margin: 24px 0 0; text-align: center; }
.auth-switch a { color: var(--primary-text); font-weight: 750; }

/* Forms */
.stack-form { display: grid; gap: 16px; }
.stack-form label, .form-grid label, .inline-edit-form label { display: grid; gap: 7px; }
label > span { color: #393349; font-size: .88rem; font-weight: 750; }
label > span small { color: var(--muted); font-weight: 500; }
label > small { color: var(--muted); font-size: .76rem; }
input, select, textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #dfdbe8;
  border-radius: 11px;
  padding: 10px 13px;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary-dark); box-shadow: 0 0 0 4px rgba(105,170,70,.14); }
input::placeholder { color: #aaa5b6; }

/* App shell */
.app-body { padding-left: var(--sidebar-width); }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  padding: 28px 20px 22px;
  color: #fff;
  background: var(--sidebar);
}
.sidebar .brand { padding: 0 8px 28px; }
.sidebar .brand-mark { background: rgba(255,255,255,.1); }
.sidebar .brand small { color: #a9bda2; }
.profile-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.05);
}
.profile-emoji { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; background: var(--icon-bg); font-size: 1.4rem; }
.profile-chip strong, .profile-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.profile-chip small { color: #a9bda2; font-size: .75rem; }
.side-nav { display: grid; gap: 7px; }
.side-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 13px; color: #c4d8bd; border-radius: 12px; font-weight: 650; }
.side-nav a:hover, .side-nav a.active { color: #fff; background: rgba(255,255,255,.09); }
.side-nav a.active { box-shadow: inset 3px 0 0 var(--primary); }
.sidebar-logout { margin-top: auto; }
.sidebar .button-ghost { color: #d3e5cd; border-color: rgba(255,255,255,.13); }
.mobile-header, .sidebar-overlay { display: none; }
.app-main { min-height: 100vh; }
.page-container { width: min(100%, 1280px); margin: 0 auto; padding: 42px clamp(22px, 4vw, 56px) 70px; }
.narrow-container { width: min(100%, 1050px); }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.page-header p { max-width: 700px; margin-bottom: 0; }
.dashboard-header h1 span { font-size: .8em; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.panel-heading h2 { margin-bottom: 0; }
.panel-icon { font-size: 1.55rem; }

/* Dashboard */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.stat-card { position: relative; overflow: hidden; min-height: 180px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); }
.stat-card::after { content: ''; position: absolute; width: 110px; height: 110px; right: -30px; bottom: -35px; border-radius: 50%; background: currentColor; opacity: .08; }
.stat-icon { display: grid; place-items: center; width: 45px; height: 45px; margin-bottom: 22px; border-radius: 13px; background: var(--icon-bg); font-size: 1.25rem; }
.stat-card .stat-label, .stat-card strong, .stat-card small { display: block; }
.stat-card .stat-label { color: var(--muted); font-size: .82rem; font-weight: 700; }
.stat-card strong { margin-block: 2px; color: var(--ink); font-size: 2.2rem; line-height: 1.15; }
.stat-card small { color: var(--muted); }
.stat-purple { color: var(--primary-text); }
.stat-orange { color: #f07b32; }
.stat-green { color: #15986b; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, .7fr); gap: 18px; margin-bottom: 18px; }
.activity-panel { min-height: 360px; }
.filter-form { display: flex; gap: 8px; }
.filter-form select { min-height: 38px; padding-block: 6px; }
.bar-chart { height: 245px; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: clamp(5px, 1.1vw, 14px); padding-top: 28px; }
.bar-column { height: 100%; display: grid; grid-template-rows: 18px 1fr 22px; justify-items: center; gap: 5px; }
.bar-value { color: var(--muted); font-size: .7rem; font-weight: 700; }
.bar-track { position: relative; width: min(100%, 32px); height: 100%; border-radius: 8px 8px 4px 4px; background: #f0eef6; overflow: hidden; }
.bar-fill { position: absolute; inset: auto 0 0; border-radius: inherit; background: linear-gradient(#d8f7a7, var(--primary-dark)); transition: height .3s ease; }
.bar-label { color: var(--muted); font-size: .7rem; }
.meme-card { position: relative; overflow: hidden; min-height: 360px; padding: 28px; border-radius: var(--radius-lg); color: var(--primary-text); background: linear-gradient(145deg, var(--primary-soft), var(--primary)); box-shadow: var(--shadow); }
.meme-card::before { content: ''; position: absolute; inset: auto -60px -80px auto; width: 220px; height: 220px; border: 45px solid rgba(45,113,56,.1); border-radius: 50%; }
.meme-card .eyebrow { color: var(--primary-text); }
.meme-card blockquote { position: relative; z-index: 1; margin: 25px 0; font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 800; line-height: 1.35; letter-spacing: -.025em; }
.meme-card small { position: absolute; bottom: 25px; left: 28px; right: 28px; color: #3e7047; }
.meme-icon { font-size: 2.7rem; }
.recent-panel { box-shadow: none; }
.recent-list { display: grid; }
.recent-item { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 14px; padding: 14px 5px; border-top: 1px solid var(--line); }
.recent-item:first-child { border-top: 0; }
.recent-item:hover .recent-main strong { color: var(--primary-text); }
.event-dot { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--event-hue) 70% 55%); }
.recent-main strong, .recent-main small { display: block; }
.recent-main small { color: var(--muted); font-size: .78rem; }

.status { display: inline-flex; align-items: center; justify-content: center; width: max-content; padding: 5px 9px; border-radius: 999px; font-size: .68rem; font-weight: 800; text-transform: capitalize; }
.status-pending { color: #9a6816; background: #fff5d8; }
.status-completed { color: #087052; background: #def7ed; }

/* Account */
.settings-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; }
.settings-panel { box-shadow: none; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.setting-row small, .setting-row strong { display: block; }
.setting-row small { color: var(--muted); margin-bottom: 3px; }
.profile-preview { display: grid; grid-template-columns: 78px 1fr; gap: 18px; align-items: start; padding: 18px; border-radius: 17px; background: var(--surface-soft); }
.giant-emoji { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 22px; background: var(--icon-bg); box-shadow: 0 8px 22px rgba(35,27,70,.08); font-size: 2.55rem; }
.profile-preview strong, .profile-preview small { display: block; }
.profile-preview small { color: var(--muted); }
.profile-preview p { margin: 9px 0 0; font-size: .88rem; }
.inline-edit-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin-top: 20px; }
.helper-note { margin: 14px 0 0; font-size: .78rem; }
.danger-zone { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-top: 20px; border-color: #f0cbd1; box-shadow: none; }
.danger-zone p { max-width: 650px; margin-bottom: 0; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 20px; }
.modal.visible { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(19,15,30,.62); backdrop-filter: blur(4px); }
.modal-card { position: relative; z-index: 1; width: min(100%, 480px); max-height: calc(100vh - 40px); overflow: auto; padding: 28px; border-radius: 22px; background: #fff; box-shadow: 0 30px 90px rgba(20,12,50,.28); animation: modalIn .2s ease; }
.modal-close { position: absolute; top: 14px; right: 15px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f2f0f6; font-size: 1.25rem; }
.modal-open { overflow: hidden; }
@keyframes modalIn { from { opacity: 0; transform: scale(.96) translateY(10px); } }

/* Upload forms */
.upload-form { padding: 0; overflow: hidden; box-shadow: none; }
.form-section { padding: 28px; border-bottom: 1px solid var(--line); }
.form-section-heading { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.form-section-heading h2, .form-section-heading p { margin-bottom: 3px; }
.step-number { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px; color: var(--primary-text); background: var(--primary-soft); font-size: .82rem; font-weight: 900; }
.form-grid { display: grid; gap: 16px; }
.two-columns { grid-template-columns: 1.5fr .5fr; }
.upload-dropzone { position: relative; display: grid; justify-items: center; gap: 5px; padding: 40px 20px; border: 2px dashed #cfe2c3; border-radius: 18px; background: #fbfff8; text-align: center; cursor: pointer; transition: .2s ease; }
.upload-dropzone:hover, .upload-dropzone.dragging { border-color: var(--primary); background: var(--primary-soft); }
.upload-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-dropzone small { color: var(--muted); }
.upload-icon { font-size: 2.05rem; }
.compact-dropzone { margin-top: 16px; padding: 24px; }
.image-preview-grid, .existing-image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.image-preview-grid:empty { display: none; }
.image-preview-grid.has-preview { display: block; }
.image-preview-viewer { display: grid; gap: 12px; }
.image-preview-main {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.image-preview-main img {
  width: 100%;
  max-height: 440px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #191620;
}
.image-preview-main figcaption {
  overflow: hidden;
  padding: 10px 12px;
  color: var(--muted);
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-preview-thumbnails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.image-preview-thumbnails button {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  text-align: left;
}
.image-preview-thumbnails button.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.image-preview-thumbnails img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.image-preview-thumbnails span { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.image-preview-grid > figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.image-preview-grid > figure img { width: 100%; height: 150px; object-fit: cover; }
.image-preview-grid > figure figcaption { overflow: hidden; padding: 8px 10px; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.existing-image-card { position: relative; overflow: hidden; border-radius: 14px; background: #191620; }
.existing-image-card img { width: 100%; height: 170px; object-fit: cover; opacity: .92; }
.delete-image-check { position: absolute; inset: auto 8px 8px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 9px; color: #fff; background: rgba(15,12,20,.72); font-size: .72rem; }
.delete-image-check input { width: 15px; min-height: 15px; accent-color: var(--red); }
.automatic-note { margin-top: 15px; padding: 10px 12px; border-radius: 10px; color: #615b70; background: #f5f3f9; font-size: .8rem; }
.member-search { display: block; margin-bottom: 12px; }
.member-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-height: 350px; overflow: auto; padding: 2px; }
.member-option { display: grid; grid-template-columns: auto 42px 1fr; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; }
.member-option:hover { border-color: #b9df9e; background: #fbfff8; }
.member-option input { width: 17px; min-height: 17px; accent-color: var(--primary); }
.member-option-emoji { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--icon-bg); font-size: 1.25rem; }
.member-option strong, .member-option small { display: block; }
.member-option small { color: var(--muted); font-size: .74rem; }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 22px 28px; background: #fbfff8; }

/* Upload listing */
.date-groups { position: relative; display: grid; gap: 34px; }
.date-groups::before { content: ''; position: absolute; top: 12px; bottom: 20px; left: 7px; width: 2px; background: #ddd8e9; }
.date-group { position: relative; padding-left: 34px; }
.date-heading { display: flex; align-items: baseline; gap: 10px; margin-bottom: 13px; }
.date-heading h2 { margin: 0; }
.date-heading small { color: var(--muted); }
.date-dot { position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border: 4px solid var(--bg); border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px #b9df9e; }
.event-list { display: grid; gap: 10px; }
.event-card { display: grid; grid-template-columns: 82px minmax(0,1fr) auto auto 24px; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-left: 5px solid hsl(var(--event-hue) 70% 55%); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(35,27,70,.04); transition: transform .18s ease, box-shadow .18s ease; }
.event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.event-involved { border-left-color: #c7c1d3; }
.event-card-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--icon-bg); font-size: 1.15rem; }
.event-card-thumbs { display: grid; grid-template-columns: repeat(3, 24px); grid-auto-rows: 58px; gap: 5px; }
.event-card-thumb {
  overflow: hidden;
  width: 100%;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #191620;
}
.event-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.event-card-thumb:hover img { transform: scale(1.05); }
.event-involved .event-card-icon { background: var(--icon-bg); }
.event-card-main { min-width: 0; }
.event-card-main strong, .event-card-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-card-main small { color: var(--muted); font-size: .76rem; }
.event-role { color: var(--muted); font-size: .75rem; font-weight: 700; }
.event-arrow { color: var(--primary-text); font-size: 1.2rem; }

/* Event detail */
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--muted); font-size: .82rem; }
.breadcrumb a { color: var(--primary-text); font-weight: 700; }
.event-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding: 28px; border: 1px solid hsl(var(--event-hue) 60% 85%); border-radius: var(--radius-lg); background: linear-gradient(135deg, hsl(var(--event-hue) 75% 96%), #fff 65%); }
.event-detail-header h1 { margin: 7px 0; font-size: clamp(1.65rem, 3.2vw, 2.55rem); }
.event-detail-header p { margin-bottom: 0; }
.event-meta-line { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .78rem; }
.header-actions { display: flex; gap: 9px; }
.photo-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.photo-gallery.photo-count-1 { grid-template-columns: 1fr; }
.photo-gallery.photo-count-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-item { position: relative; overflow: hidden; min-height: 280px; margin: 0; border-radius: 20px; background: #ddd; }
.gallery-preview-button { display: block; width: 100%; height: 100%; min-height: inherit; padding: 0; border: 0; background: transparent; }
.gallery-preview-button img { width: 100%; height: 100%; min-height: 280px; max-height: 480px; object-fit: cover; transition: transform .24s ease; }
.gallery-preview-button:hover img { transform: scale(1.025); }
.image-delete-button { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 12px; background: rgba(255,255,255,.9); box-shadow: 0 7px 18px rgba(0,0,0,.14); }
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
  place-items: center;
  padding: 22px;
}
.image-lightbox.visible { display: grid; }
.image-lightbox-backdrop { position: absolute; inset: 0; border: 0; background: rgba(16,12,25,.82); backdrop-filter: blur(5px); }
.image-lightbox-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  width: min(100%, 980px);
}
.image-lightbox-panel img {
  width: 100%;
  max-height: calc(100dvh - 130px);
  object-fit: contain;
  border-radius: 18px;
  background: #0f0c16;
  box-shadow: 0 28px 90px rgba(0,0,0,.35);
}
.image-lightbox-panel p {
  overflow: hidden;
  margin: 0;
  color: #fff;
  font-size: .9rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.24);
  font-size: 1.35rem;
}
.detail-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 20px; align-items: start; }
.quote-panel { position: sticky; top: 25px; overflow: hidden; color: #fff; border: 0; background: linear-gradient(145deg, #2f7d45, #79c85a); }
.quote-panel .eyebrow { color: #ecffd8; }
.quote-panel blockquote { position: relative; z-index: 1; margin: 24px 0 6px; font-size: 1.35rem; font-weight: 800; line-height: 1.4; }
.quote-mark { position: absolute; top: 0; right: 18px; color: rgba(255,255,255,.12); font-family: Georgia, serif; font-size: 10rem; line-height: 1; }
.members-panel { box-shadow: none; }
.member-cards { display: grid; gap: 10px; }
.member-card { display: grid; grid-template-columns: 58px 1fr; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; }
.member-avatar { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; background: #f5f2fa; font-size: 1.8rem; }
.member-card strong, .member-card small { display: block; }
.member-card small { color: var(--muted); font-size: .76rem; }
.member-card p { margin: 7px 0 0; font-size: .82rem; }
.creator-badge { display: inline-flex; margin-left: 4px; padding: 3px 6px; border-radius: 6px; color: var(--primary-text); background: var(--primary-soft); font-size: .6rem; vertical-align: middle; }

/* Empty and error */
.empty-state { display: grid; justify-items: center; padding: 70px 25px; text-align: center; }
.empty-state > span { font-size: 2.9rem; }
.empty-state p { max-width: 470px; }
.compact-empty { padding: 35px 20px; }
.compact-empty > span { font-size: 2rem; }
.error-body { display: grid; place-items: center; padding: 25px; background: radial-gradient(circle at center, #fff, var(--bg)); }
.error-card { width: min(100%, 520px); padding: 45px; border: 1px solid var(--line); border-radius: 28px; background: #fff; text-align: center; box-shadow: var(--shadow); }
.error-emoji { display: block; margin-bottom: 15px; font-size: 3.6rem; }

@media (max-width: 1050px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .meme-card { min-height: 280px; }
  .settings-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .quote-panel { position: static; }
  .event-card { grid-template-columns: 82px minmax(0,1fr) auto 24px; }
  .event-role { display: none; }
}

@media (max-width: 820px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-showcase { min-height: 360px; }
  .showcase-copy h1 { font-size: 3rem; }
  .floating-food { font-size: 3.25rem; }
  .app-body { padding-left: 0; padding-top: 62px; }
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; }
  .sidebar.open { transform: translateX(0); }
  .mobile-header { position: fixed; inset: 0 0 auto; z-index: 40; height: 62px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
  .mobile-brand { justify-self: center; font-weight: 850; }
  .mobile-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--icon-bg); font-size: 1.15rem; }
  .sidebar-overlay { position: fixed; inset: 0; z-index: 45; background: rgba(20,15,32,.46); }
  .sidebar-overlay.visible { display: block; }
  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { min-height: 145px; }
  .page-header, .event-detail-header, .danger-zone { align-items: flex-start; flex-direction: column; }
  .event-detail-header { padding: 22px; }
  .photo-gallery, .photo-gallery.photo-count-2, .photo-gallery.photo-count-3 { grid-template-columns: 1fr; }
  .gallery-item, .gallery-preview-button, .gallery-preview-button img { min-height: 240px; max-height: 420px; }
}

@media (max-width: 620px) {
  .page-container { padding: 26px 15px 55px; }
  .page-header { margin-bottom: 22px; }
  h1 { font-size: 2.15rem; }
  .panel { padding: 19px; border-radius: 19px; }
  .bar-chart { gap: 4px; }
  .bar-label { font-size: .58rem; }
  .bar-value { font-size: .6rem; }
  .form-section { padding: 21px 17px; }
  .two-columns, .member-picker, .image-preview-grid, .existing-image-grid { grid-template-columns: 1fr; }
  .form-actions { padding: 17px; }
  .inline-edit-form { grid-template-columns: 1fr; }
  .event-card { grid-template-columns: 68px minmax(0,1fr) auto; gap: 10px; }
  .event-card-icon { width: 42px; height: 42px; }
  .event-card-thumbs { grid-template-columns: repeat(3, 20px); grid-auto-rows: 50px; gap: 4px; }
  .event-card-thumb { height: 50px; }
  .event-card .status, .event-arrow { display: none; }
  .date-group { padding-left: 25px; }
  .date-groups::before { left: 6px; }
  .date-dot { left: -1px; }
  .header-actions { width: 100%; }
  .header-actions .button { flex: 1; }
  .member-card { grid-template-columns: 48px 1fr; }
  .member-avatar { width: 48px; height: 48px; font-size: 1.5rem; }
  .auth-showcase { min-height: 310px; padding: 28px; }
  .auth-panel { padding: 30px 18px; }
  .showcase-copy h1 { font-size: 2.5rem; }
  .emoji-cloud { font-size: 1.5rem; }
}

/* Mobile-first hardening */
html, body { max-width: 100%; overflow-x: hidden; }
body { min-height: 100dvh; }
.sidebar-close { display: none; }
.mobile-menu-button { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; }
.mobile-avatar { color: inherit; text-decoration: none; }
.page-header > div, .panel-heading > div, .event-detail-header > div, .member-card > div,
.profile-preview > div, .member-option > span:last-child { min-width: 0; }
h1, h2, h3, p, strong, small, blockquote { overflow-wrap: anywhere; }
input, select, textarea { max-width: 100%; }

@media (max-width: 820px) {
  :root {
    --radius-lg: 20px;
    --radius-md: 14px;
    --shadow: 0 10px 30px rgba(35, 27, 70, 0.07);
  }

  .app-body {
    padding-top: calc(62px + env(safe-area-inset-top));
  }

  .mobile-header {
    height: calc(62px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 0;
  }

  .sidebar {
    width: min(88vw, 320px);
    max-width: 100%;
    padding-top: calc(24px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    box-shadow: 24px 0 60px rgba(12, 8, 24, .24);
    visibility: hidden;
  }

  .sidebar.open { visibility: visible; }
  .sidebar-close {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #fff;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
  }
  .sidebar .brand { padding-right: 44px; }
  .sidebar-open { overflow: hidden; touch-action: none; }
  .sidebar-overlay { backdrop-filter: blur(2px); }

  .page-container { width: 100%; }
  .page-header > .button { width: 100%; }
  .page-header > .button,
  .danger-zone > .button { min-height: 48px; }

  .panel-heading { flex-wrap: wrap; }
  .filter-form { width: 100%; }
  .filter-form select { min-width: 0; flex: 1; }

  .activity-panel { min-height: 0; overflow: hidden; }
  .bar-chart {
    width: 100%;
    height: 230px;
    grid-template-columns: repeat(12, 34px);
    justify-content: start;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 18px 2px 10px;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .bar-track { width: 28px; }
  .bar-label, .bar-value { font-size: .68rem; }

  .meme-card { min-height: 250px; }
  .meme-card small { position: static; display: block; margin-top: 22px; }

  .recent-item {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 10px;
    padding-block: 15px;
  }

  .event-detail-header { align-items: stretch; }
  .header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-actions .button { width: 100%; min-width: 0; }

  .breadcrumb {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .breadcrumb::-webkit-scrollbar { display: none; }

  .photo-gallery { gap: 10px; }
  .gallery-item { aspect-ratio: 4 / 3; min-height: 0; border-radius: 17px; }
  .gallery-preview-button, .gallery-preview-button img { min-height: 0; max-height: none; }
  .image-preview-viewer { gap: 0; }
  .image-preview-main { display: none; }
  .image-preview-thumbnails { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .image-preview-thumbnails button {
    gap: 7px;
    padding: 7px;
    color: var(--ink);
    text-align: center;
  }
  .image-preview-thumbnails button.active { border-color: var(--line); box-shadow: none; }
  .image-preview-thumbnails img { border-radius: 9px; }
  .image-preview-thumbnails span { font-size: .68rem; }

  .modal { place-items: end center; padding: 0; }
  .modal-card {
    width: 100%;
    max-height: min(88dvh, 760px);
    padding: 28px 18px calc(22px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    animation-name: mobileModalIn;
  }
  @keyframes mobileModalIn { from { opacity: 0; transform: translateY(36px); } }
}

@media (max-width: 620px) {
  body { font-size: 14px; }
  .page-container { padding: 22px 13px calc(42px + env(safe-area-inset-bottom)); }
  .narrow-container { width: 100%; }
  .page-header { gap: 16px; }
  .page-header h1 { margin-bottom: 9px; }

  .auth-shell { min-height: 100dvh; }
  .auth-showcase {
    min-height: 176px;
    padding: 22px 20px;
    justify-content: flex-start;
    gap: 25px;
  }
  .auth-showcase .brand-mark { width: 42px; height: 42px; }
  .showcase-copy { margin: 0; }
  .showcase-copy .eyebrow, .showcase-copy p, .floating-food, .emoji-cloud { display: none; }
  .showcase-copy h1 { max-width: 300px; margin: 0; font-size: 2rem; line-height: 1.08; }
  .auth-panel { place-items: start center; padding: 24px 16px 36px; }
  .auth-card, .auth-card-wide { width: 100%; }
  .section-heading { margin-bottom: 20px; }
  .section-heading h2 { font-size: 1.75rem; }
  .auth-switch { margin-top: 20px; }

  .button { min-height: 46px; padding-inline: 15px; }
  .button-large { min-height: 50px; }
  .stack-form > .button { width: 100%; }

  .stats-grid { gap: 11px; }
  .stat-card {
    min-height: 112px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 13px;
    padding: 16px;
  }
  .stat-icon { grid-row: 1 / 3; width: 48px; height: 48px; margin: 0; }
  .stat-card .stat-label { align-self: end; }
  .stat-card strong { grid-column: 3; grid-row: 1 / 3; font-size: 2rem; }
  .stat-card small { grid-column: 2; align-self: start; }

  .panel { padding: 17px; }
  .panel-heading { gap: 12px; margin-bottom: 16px; }
  .panel-icon { font-size: 1.3rem; }
  .activity-panel { padding-inline: 14px; }
  .activity-panel .panel-heading { padding-inline: 3px; }
  .bar-chart { margin-inline: -2px; }

  .recent-panel .panel-heading { align-items: center; flex-wrap: nowrap; }
  .recent-main small { white-space: normal; line-height: 1.35; }
  .recent-item .status { padding-inline: 7px; font-size: .62rem; }

  .settings-panel { padding: 17px; }
  .setting-row { align-items: center; gap: 10px; }
  .setting-row > div { min-width: 0; }
  .setting-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .setting-row .button { flex: 0 0 auto; }
  .profile-preview { grid-template-columns: 60px minmax(0,1fr); gap: 13px; padding: 14px; }
  .giant-emoji { width: 60px; height: 60px; border-radius: 17px; font-size: 1.95rem; }
  .inline-edit-form .button { width: 100%; }
  .danger-zone { gap: 15px; }
  .danger-zone .button { width: 100%; }

  .form-section { padding: 20px 15px; }
  .form-section-heading { gap: 11px; margin-bottom: 18px; }
  .form-section-heading > div { min-width: 0; }
  .form-section-heading p { font-size: .84rem; }
  .upload-dropzone { min-height: 170px; padding: 28px 14px; }
  .compact-dropzone { min-height: 140px; padding: 22px 14px; }
  .image-preview-grid, .existing-image-grid { gap: 10px; }
  .image-preview-thumbnails { gap: 9px; }
  .image-preview-grid > figure img, .image-preview-main img, .existing-image-card img { height: auto; aspect-ratio: 4 / 3; }
  .member-picker { max-height: 390px; }
  .member-option { grid-template-columns: 24px 42px minmax(0,1fr); min-height: 66px; padding: 10px; }
  .member-option input { width: 20px; min-height: 20px; }
  .member-option strong, .member-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 9px;
    padding: 12px 15px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 28px rgba(35,27,70,.08);
  }
  .form-actions .button { width: 100%; min-width: 0; padding-inline: 10px; }

  .date-groups { gap: 27px; }
  .date-group { padding-left: 22px; }
  .date-heading { align-items: center; flex-wrap: wrap; gap: 4px 8px; }
  .date-heading h2 { flex: 1 1 auto; font-size: 1.08rem; }
  .date-heading small { flex: 0 0 auto; }
  .event-card {
    grid-template-columns: 68px minmax(0, 1fr) auto;
    grid-template-areas: 'icon main status';
    gap: 10px;
    min-height: 76px;
    padding: 12px 10px 12px 12px;
  }
  .event-card-icon { grid-area: icon; }
  .event-card-thumbs { grid-area: icon; }
  .event-card-main { grid-area: main; }
  .event-card .status { grid-area: status; display: inline-flex; }
  .event-arrow, .event-role { display: none; }
  .event-card-main small { white-space: normal; line-height: 1.3; }

  .event-detail-header { padding: 18px; }
  .event-detail-header h1 { font-size: 1.6rem; overflow-wrap: anywhere; }
  .event-meta-line { flex-wrap: wrap; gap: 5px 8px; }
  .header-actions { grid-template-columns: 1fr; }
  .photo-gallery, .photo-gallery.photo-count-2, .photo-gallery.photo-count-3 { grid-template-columns: 1fr; }
  .gallery-item { aspect-ratio: 1 / 1; }
  .quote-panel blockquote { font-size: 1.18rem; }
  .quote-mark { font-size: 7.2rem; }
  .member-card { grid-template-columns: 48px minmax(0,1fr); gap: 11px; padding: 12px; }
  .member-card p { overflow-wrap: anywhere; }
  .creator-badge { margin-left: 0; margin-top: 4px; vertical-align: baseline; }

  .empty-state { padding: 48px 18px; }
  .error-body { padding: 14px; }
  .error-card { padding: 32px 18px; border-radius: 22px; }
}

@media (max-width: 380px) {
  h1 { font-size: 1.88rem; }
  .mobile-brand { font-size: .94rem; }
  .page-container { padding-inline: 10px; }
  .panel, .settings-panel { padding: 15px; }
  .filter-form { display: grid; grid-template-columns: 1fr; }
  .stat-card { grid-template-columns: 45px minmax(0,1fr) auto; padding: 14px 12px; }
  .stat-icon { width: 45px; height: 45px; }
  .event-card { grid-template-columns: 58px minmax(0,1fr); grid-template-areas: 'icon main' 'icon status'; }
  .event-card-icon { width: 38px; height: 38px; }
  .event-card-thumbs { grid-template-columns: repeat(3, 17px); grid-auto-rows: 46px; }
  .event-card-thumb { height: 46px; }
  .event-card .status { justify-self: start; }
  .form-actions { grid-template-columns: 1fr; }
  .form-actions .button-primary { grid-row: 1; }
  .profile-preview { grid-template-columns: 52px minmax(0,1fr); }
  .giant-emoji { width: 52px; height: 52px; font-size: 1.7rem; }
}