/* ── Reset & Base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --saffron: #E8742A;
  --saffron-light: #F5A05A;
  --saffron-pale: #FFF3EA;
  --gold: #C8961A;
  --cream: #FFFAF3;
  --brown: #6B3A1F;
  --text: #2C1A0E;
  --text-muted: #7A5A40;
  --white: #FFFFFF;
  --border: #EDD5B8;
  --green: #2D7A4F;
  --green-light: #E8F5EE;
  --red: #C53030;
  --red-light: #FEE2E2;
  --shadow: 0 2px 16px rgba(104,58,20,0.09);
  --shadow-md: 0 6px 28px rgba(104,58,20,0.13);
}
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--text); font-size: 15px; line-height: 1.6; }
a { color: var(--saffron); text-decoration: none; }
a:hover { text-decoration: underline; }
input, select, textarea, button { font-family: inherit; }

/* ── Navbar ───────────────────────────────────── */
#navbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 1px 8px rgba(104,58,20,0.07);
}
.nav-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
}
.lotus-icon { width: 34px; height: 34px; flex-shrink: 0; }
.org-name { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 600; color: var(--saffron); line-height: 1.1; }
.org-tagline { font-size: 10px; color: var(--text-muted); letter-spacing: .06em; font-weight: 300; }
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-link {
  padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 400;
  color: var(--text-muted); cursor: pointer; transition: all .2s;
  border: none; background: none;
}
.nav-link:hover { color: var(--saffron); background: var(--saffron-pale); }
.nav-link.active { color: var(--saffron); background: var(--saffron-pale); font-weight: 500; }
.admin-link { color: var(--brown) !important; font-weight: 500 !important; border: 1px solid var(--border) !important; }
.admin-link:hover { background: var(--brown) !important; color: var(--white) !important; }
.hamburger { display: none; background: none; border: none; font-size: 22px; color: var(--brown); cursor: pointer; padding: 6px; }

/* ── Page / Section System ───────────────────── */
.page { display: none; min-height: calc(100vh - 64px); }
.page.active { display: block; }

/* ── Buttons ─────────────────────────────────── */
.btn-primary {
  background: var(--saffron); color: var(--white);
  padding: 11px 26px; border-radius: 28px;
  font-size: 14px; font-weight: 500; cursor: pointer; border: none;
  transition: all .2s; display: inline-block;
}
.btn-primary:hover { background: var(--brown); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-secondary {
  background: transparent; color: var(--saffron);
  padding: 10px 24px; border-radius: 28px;
  font-size: 14px; font-weight: 400; cursor: pointer;
  border: 2px solid var(--saffron); transition: all .2s;
}
.btn-secondary:hover { background: var(--saffron-pale); }
.btn-cancel {
  padding: 10px 20px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--white);
  color: var(--text-muted); font-size: 14px; cursor: pointer;
}

/* ── Hero ─────────────────────────────────────── */
.hero {
  background: linear-gradient(155deg, var(--saffron-pale) 0%, var(--cream) 65%);
  padding: 72px 24px 56px; text-align: center; position: relative; overflow: hidden;
}
.hero-bg-dots {
  position: absolute; inset: 0; pointer-events: none; opacity: .04;
  background-image: radial-gradient(circle, var(--saffron) 1px, transparent 1px);
  background-size: 32px 32px;
}
.hero-content { position: relative; max-width: 680px; margin: 0 auto; }
.hero-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--saffron); font-weight: 500; margin-bottom: 14px; }
.hero h1 { font-family: 'Cormorant Garamond', serif; font-size: 54px; font-weight: 600; color: var(--brown); line-height: 1.1; margin-bottom: 14px; }
.hero h1 em { color: var(--saffron); font-style: italic; }
.hero-tagline { font-size: 17px; color: var(--text-muted); font-weight: 300; margin-bottom: 20px; }
.hero-quote {
  font-family: 'Cormorant Garamond', serif; font-size: 15px; font-style: italic;
  color: var(--gold); margin-bottom: 32px; line-height: 1.7;
  border-left: 3px solid var(--gold); padding-left: 16px;
  text-align: left; display: inline-block;
}
.hero-quote cite { font-size: 13px; font-style: normal; opacity: .8; }
.hero-stats { display: flex; justify-content: center; gap: 40px; margin-bottom: 40px; flex-wrap: wrap; }
.stat { text-align: center; }
.stat-num { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 600; color: var(--saffron); line-height: 1; }
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 300; margin-top: 2px; text-transform: uppercase; letter-spacing: .06em; }
.hero-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── Upcoming Strip ──────────────────────────── */
.upcoming-strip { max-width: 1100px; margin: 0 auto; padding: 48px 24px; }
.section-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--brown); }
.upcoming-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.upcoming-mini {
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 20px; display: flex; gap: 16px; align-items: flex-start;
  box-shadow: var(--shadow); transition: all .2s; cursor: pointer;
}
.upcoming-mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mini-date { background: var(--saffron-pale); border-radius: 10px; padding: 8px 12px; text-align: center; min-width: 50px; }
.mini-day { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--saffron); line-height: 1; }
.mini-mon { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.mini-info { flex: 1; }
.mini-title { font-weight: 500; color: var(--brown); font-size: 15px; margin-bottom: 3px; }
.mini-meta { font-size: 12px; color: var(--text-muted); }

/* ── Page Header ─────────────────────────────── */
.page-header { max-width: 1100px; margin: 0 auto; padding: 40px 24px 20px; border-bottom: 1px solid var(--border); }
.page-title { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 600; color: var(--brown); }
.page-subtitle { font-size: 14px; color: var(--text-muted); margin-top: 6px; }

/* ── Filter Bar ──────────────────────────────── */
.filters-bar { max-width: 1100px; margin: 0 auto; padding: 20px 24px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-label { font-size: 13px; color: var(--text-muted); margin-right: 4px; }
.filter-btn { padding: 7px 18px; border-radius: 18px; border: 1px solid var(--border); background: var(--white); color: var(--text-muted); font-size: 13px; cursor: pointer; transition: all .2s; }
.filter-btn:hover, .filter-btn.active { background: var(--saffron); color: var(--white); border-color: var(--saffron); }

/* ── Activity Cards ──────────────────────────── */
.activities-grid { max-width: 1100px; margin: 0 auto; padding: 0 24px 56px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.activity-card {
  background: var(--white); border-radius: 18px; border: 1px solid var(--border);
  overflow: hidden; transition: all .25s; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.activity-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-accent { height: 5px; }
.card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.card-freq { display: inline-block; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 10px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em; }
.freq-weekly { background: var(--saffron-pale); color: var(--saffron); }
.freq-monthly { background: #FFF8E1; color: var(--gold); }
.freq-daily { background: var(--green-light); color: var(--green); }
.card-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--brown); line-height: 1.2; margin-bottom: 8px; }
.card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin-bottom: 14px; flex: 1; }
.card-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.card-meta-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
.card-slots { margin-bottom: 14px; }
.slots-text { font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.slots-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.slots-fill { height: 100%; border-radius: 2px; background: var(--saffron); transition: width .5s; }
.slots-fill.full { background: var(--red); }
.btn-signup { width: 100%; padding: 11px; border-radius: 10px; background: var(--saffron); color: var(--white); border: none; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s; }
.btn-signup:hover { background: var(--brown); }
.btn-signup:disabled { background: var(--border); color: var(--text-muted); cursor: not-allowed; }
.btn-waitlist { background: transparent; color: var(--saffron); border: 2px solid var(--saffron); }
.btn-waitlist:hover { background: var(--saffron-pale); }

/* ── Skeleton Loaders ────────────────────────── */
.skeleton-card { background: var(--border); border-radius: 18px; height: 200px; animation: shimmer 1.4s infinite; }
.skeleton-card.tall { height: 320px; }
@keyframes shimmer { 0%,100%{opacity:.5} 50%{opacity:.25} }

/* ── Volunteer Dashboard ─────────────────────── */
.center-box { max-width: 480px; margin: 80px auto; padding: 40px 24px; text-align: center; }
.lotus-big { font-size: 56px; margin-bottom: 16px; }
.center-box h2 { font-family: 'Cormorant Garamond', serif; font-size: 30px; color: var(--brown); margin-bottom: 10px; }
.center-box p { color: var(--text-muted); margin-bottom: 20px; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
.inline-form .form-input { min-width: 240px; }
.hint-text { font-size: 12px; color: var(--text-muted); }
.dash-hero {
  background: linear-gradient(135deg, var(--saffron), #C8601A);
  padding: 36px 24px; color: var(--white);
}
.dash-hero-inner { max-width: 900px; margin: 0 auto; }
.dash-greeting { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600; }
.dash-subtitle { font-size: 14px; opacity: .85; margin-top: 4px; }
.dash-stats-row { display: flex; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.dash-stat { background: rgba(255,255,255,.2); border-radius: 12px; padding: 14px 20px; text-align: center; }
.dash-stat-num { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 600; }
.dash-stat-label { font-size: 11px; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.dash-body { max-width: 900px; margin: 0 auto; padding: 32px 24px; }
.dash-section { margin-bottom: 32px; }
.dash-section .section-title { margin-bottom: 14px; }
.upcoming-item {
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 20px; display: flex; align-items: center; gap: 16px; margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.upcoming-date-box { background: var(--saffron-pale); border-radius: 10px; padding: 8px 12px; text-align: center; min-width: 52px; }
.date-day { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--saffron); line-height: 1; }
.date-mon { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.upcoming-info { flex: 1; }
.upcoming-title { font-weight: 500; color: var(--brown); margin-bottom: 2px; }
.upcoming-meta-row { font-size: 12px; color: var(--text-muted); }
.reminder-badge { background: var(--green-light); color: var(--green); font-size: 11px; padding: 4px 10px; border-radius: 10px; font-weight: 500; white-space: nowrap; }
.hours-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
.hours-label { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.hours-num { font-family: 'Cormorant Garamond', serif; font-size: 38px; font-weight: 600; color: var(--saffron); margin-bottom: 12px; }
.hours-bar-bg { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.hours-bar-fill { height: 100%; background: linear-gradient(90deg, var(--saffron), #F2C44A); border-radius: 4px; transition: width .6s ease; }
.empty-msg { color: var(--text-muted); font-size: 14px; }

/* ── Impact Page ─────────────────────────────── */
.impact-wrap { max-width: 900px; margin: 0 auto; padding: 32px 24px 56px; }
.impact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin-bottom: 32px; }
.impact-card { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 26px 20px; text-align: center; box-shadow: var(--shadow); }
.impact-icon { font-size: 34px; margin-bottom: 10px; }
.impact-num { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 600; color: var(--saffron); line-height: 1; }
.impact-desc { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; font-weight: 300; }
.impact-story { background: linear-gradient(135deg, var(--saffron-pale), var(--cream)); border: 1px solid var(--border); border-radius: 18px; padding: 30px; margin-bottom: 24px; }
.impact-story h3 { font-family: 'Cormorant Garamond', serif; font-size: 24px; color: var(--brown); margin-bottom: 12px; }
.impact-story p { font-size: 14px; color: var(--text-muted); line-height: 1.8; }
.donation-box { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 30px; box-shadow: var(--shadow); }
.donation-box h3 { font-family: 'Cormorant Garamond', serif; font-size: 24px; color: var(--brown); margin-bottom: 8px; }
.donation-box p { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; }
.donate-amounts { display: flex; gap: 10px; flex-wrap: wrap; }
.donate-amt { padding: 9px 20px; border-radius: 22px; border: 2px solid var(--saffron); color: var(--saffron); background: var(--white); font-size: 14px; cursor: pointer; transition: all .2s; font-weight: 500; }
.donate-amt:hover, .donate-amt.active-amt { background: var(--saffron); color: var(--white); }

/* ── Admin ───────────────────────────────────── */
.admin-body { max-width: 1100px; margin: 0 auto; padding: 24px; }
.admin-tabs { display: flex; gap: 4px; margin-bottom: 24px; background: var(--saffron-pale); padding: 4px; border-radius: 12px; width: fit-content; }
.admin-tab { padding: 8px 20px; border-radius: 9px; font-size: 13px; cursor: pointer; border: none; background: transparent; color: var(--text-muted); transition: all .2s; }
.admin-tab.active { background: var(--white); color: var(--saffron); font-weight: 500; box-shadow: 0 1px 6px rgba(104,58,20,.1); }
.table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--border); }
.admin-table { width: 100%; border-collapse: collapse; background: var(--white); }
.admin-table th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); background: var(--saffron-pale); }
.admin-table td { padding: 13px 16px; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--cream); }
.badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 500; }
.badge-open { background: var(--green-light); color: var(--green); }
.badge-full { background: var(--red-light); color: var(--red); }
.btn-sm { padding: 5px 13px; border-radius: 8px; font-size: 12px; cursor: pointer; border: none; transition: all .2s; margin-right: 4px; }
.btn-edit { background: var(--saffron-pale); color: var(--saffron); }
.btn-edit:hover { background: var(--saffron); color: var(--white); }
.btn-del { background: var(--red-light); color: var(--red); }
.btn-del:hover { background: var(--red); color: var(--white); }
.loading-cell { padding: 20px; color: var(--text-muted); font-size: 13px; }
.signups-list { background: var(--white); border-radius: 14px; border: 1px solid var(--border); overflow: hidden; }
.signup-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap; }
.signup-row:last-child { border-bottom: none; }
.signup-name { font-weight: 500; color: var(--brown); font-size: 14px; }
.signup-activity { color: var(--text-muted); font-size: 13px; }
.signup-date { font-size: 12px; color: var(--text-muted); }
.notify-btn { background: var(--saffron-pale); color: var(--saffron); padding: 5px 14px; border-radius: 8px; border: none; font-size: 12px; cursor: pointer; white-space: nowrap; }
.notify-btn:hover { background: var(--saffron); color: var(--white); }
.notify-info-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 28px; max-width: 560px; }
.notify-info-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--brown); margin-bottom: 10px; }
.notify-info-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 14px; }
.notify-info-card code { background: var(--saffron-pale); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--brown); }
.notify-status-ok { background: var(--green-light); color: var(--green); padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 500; }

/* ── Modals ──────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(44,26,14,.45);
  z-index: 500; display: none; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--white); border-radius: 22px; padding: 36px;
  max-width: 480px; width: 100%; position: relative;
  box-shadow: 0 24px 64px rgba(44,26,14,.22); max-height: 90vh; overflow-y: auto;
}
.modal-wide { max-width: 600px; }
.modal h2 { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600; color: var(--brown); margin-bottom: 4px; }
.modal-subtitle { font-size: 14px; color: var(--saffron); margin-bottom: 20px; font-weight: 500; }
.modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 18px; color: var(--text-muted); cursor: pointer; padding: 4px; line-height: 1; }
.modal-close:hover { color: var(--red); }
.modal-btns { display: flex; gap: 10px; margin-top: 20px; }
.modal-btns .btn-primary { flex: 2; text-align: center; }
.modal-btns .btn-cancel { flex: 1; }
.reminder-notice {
  background: var(--saffron-pale); border-radius: 12px; padding: 14px 16px;
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px;
  font-size: 13px; color: var(--brown); line-height: 1.6;
}
.reminder-notice span { font-size: 18px; }
.form-group { margin-bottom: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-label { font-size: 13px; color: var(--text-muted); margin-bottom: 5px; display: block; }
.form-input {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: 10px; font-size: 14px; color: var(--text);
  background: var(--cream); outline: none; transition: border .2s;
}
.form-input:focus { border-color: var(--saffron); }
textarea.form-input { resize: vertical; }

/* ── Toast ───────────────────────────────────── */
.toast {
  position: fixed; bottom: 28px; right: 28px; z-index: 999;
  background: var(--green); color: var(--white);
  padding: 14px 22px; border-radius: 14px; font-size: 14px; line-height: 1.5;
  max-width: 340px; box-shadow: 0 6px 28px rgba(0,0,0,.15);
  transform: translateY(80px); opacity: 0; transition: all .35s; pointer-events: none;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { background: var(--red); }

/* ── Modal Tabs ──────────────────────────────────── */
.modal-tabs{display:flex;gap:4px;margin:14px 0 18px;background:var(--saffron-pale);padding:4px;border-radius:10px}
.modal-tab{flex:1;padding:7px;border-radius:7px;font-size:13px;cursor:pointer;border:none;background:transparent;color:var(--text-muted);transition:all .2s;text-align:center}
.modal-tab.active{background:var(--white);color:var(--saffron);font-weight:500;box-shadow:0 1px 4px rgba(104,58,20,.1)}

/* ── Activity Card Tabs ───────────────────────────── */
.card-tabs{display:flex;gap:2px;margin:12px 0 0;border-bottom:1px solid var(--border)}
.card-tab{padding:7px 14px;font-size:12px;cursor:pointer;border:none;background:none;color:var(--text-muted);border-bottom:2px solid transparent;transition:all .2s;font-weight:400}
.card-tab:hover{color:var(--saffron)}
.card-tab.active{color:var(--saffron);border-bottom-color:var(--saffron);font-weight:500}
.card-tab-content{display:none;padding:14px 0 4px;font-size:13px;color:var(--text-muted);line-height:1.7}
.card-tab-content.active{display:block}
.tab-field{display:flex;gap:8px;margin-bottom:10px;align-items:flex-start}
.tab-field-icon{font-size:14px;flex-shrink:0;margin-top:1px}
.tab-field-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:500;margin-bottom:2px}
.tab-field-value{font-size:13px;color:var(--text);line-height:1.5}
.warning-box{background:var(--red-light);border-radius:8px;padding:10px 12px;font-size:12px;color:var(--red);line-height:1.6;margin-top:8px;display:flex;gap:8px;align-items:flex-start}
.kids-box{background:var(--green-light);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--green);margin-top:8px}

/* ── Universal Activity Template ─────────────────── */
.act-section{border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden}
.act-section-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;background:var(--saffron-pale);user-select:none;font-size:14px;font-weight:500;color:var(--brown)}
.act-section-head:hover{background:var(--border)}
.act-arrow{font-size:11px;color:var(--text-muted);transition:transform .2s}
.act-section-body{padding:16px}
.req-badge{font-size:10px;padding:2px 7px;border-radius:8px;background:var(--saffron);color:var(--white);font-weight:500;margin-left:8px;vertical-align:middle}
.opt-badge{font-size:10px;padding:2px 7px;border-radius:8px;background:var(--border);color:var(--text-muted);font-weight:400;margin-left:8px;vertical-align:middle}
.form-hint{font-size:11px;color:var(--text-muted);font-weight:300;margin-left:4px}
.desc-hint-box{background:var(--saffron-pale);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--brown);line-height:1.8;margin-bottom:10px}
.signup-type-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px}
.stype-btn{padding:10px 8px;border-radius:10px;border:1px solid var(--border);background:var(--white);color:var(--text-muted);font-size:12px;cursor:pointer;text-align:center;transition:all .2s;line-height:1.3}
.stype-btn:hover{border-color:var(--saffron);color:var(--saffron)}
.stype-btn.active{background:var(--saffron-pale);border-color:var(--saffron);color:var(--saffron);font-weight:500}
.stype-sub{font-size:10px;color:var(--text-muted);margin-top:3px;font-weight:300}
.stype-btn.active .stype-sub{color:var(--saffron);opacity:.7}
.item-signup-row{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.item-signup-row .item-name{flex:1}
.item-signup-row .item-slots{width:80px;flex-shrink:0;text-align:center}
.item-remove-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;padding:0 4px;flex-shrink:0;line-height:1}
.item-remove-btn:hover{color:var(--red)}
.add-row-btn{width:100%;padding:8px;border:1px dashed var(--border);border-radius:8px;background:none;color:var(--text-muted);font-size:13px;cursor:pointer;transition:all .2s;font-family:inherit}
.add-row-btn:hover{border-color:var(--saffron);color:var(--saffron)}
.dropoff-row{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.dropoff-row .form-input{flex:1}

/* ── Rich Text Rendering on Card ─────────────────── */
.rich-text p{margin-bottom:8px;font-size:13px;color:var(--text-muted);line-height:1.65}
.rich-text ul{padding-left:18px;margin-bottom:8px}
.rich-text ul li{font-size:13px;color:var(--text-muted);line-height:1.7;margin-bottom:2px}
.rich-text ol{padding-left:18px;margin-bottom:8px}
.rich-text ol li{font-size:13px;color:var(--text-muted);line-height:1.7;margin-bottom:2px}
.special-note-box{background:var(--saffron-pale);border-left:3px solid var(--saffron);border-radius:0 8px 8px 0;padding:8px 12px;font-size:12px;color:var(--brown);margin-top:8px;line-height:1.6}

/* ── Item-based Slots on Card ────────────────────── */
.item-slots-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.item-slot-row{display:flex;align-items:center;justify-content:space-between;background:var(--cream);border:1px solid var(--border);border-radius:10px;padding:10px 14px}
.item-slot-name{font-size:13px;color:var(--brown);font-weight:500}
.item-slot-meta{font-size:12px;color:var(--text-muted)}
.item-slot-btn{padding:5px 14px;border-radius:8px;background:var(--saffron);color:var(--white);border:none;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}
.item-slot-btn:hover{background:var(--brown)}
.item-slot-btn:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed}
.btn-whatsapp{background:#25D366!important}
.btn-whatsapp:hover{background:#1da851!important}
.btn-external-link{background:var(--brown)!important}

/* ── Dashboard improvements ──────────────────────── */
.dash-hero-inner{max-width:900px;margin:0 auto}
.dash-email-row{max-width:900px;margin:12px auto 0;display:flex;align-items:center;gap:10px;opacity:.8}
.dash-email-row span{font-size:13px;color:rgba(255,255,255,.85)}
.dash-change-btn{background:rgba(255,255,255,.2);border:none;color:#fff;font-size:12px;padding:4px 10px;border-radius:8px;cursor:pointer}
.dash-change-btn:hover{background:rgba(255,255,255,.35)}
.past-count-badge{font-size:13px;font-weight:400;color:var(--text-muted);font-family:'DM Sans',sans-serif}

/* Upcoming item with cancel */
.upcoming-item{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:16px;margin-bottom:12px;box-shadow:var(--shadow);flex-wrap:wrap}
.upcoming-date-box{background:var(--saffron-pale);border-radius:10px;padding:8px 12px;text-align:center;min-width:52px;flex-shrink:0}
.date-day{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:var(--saffron);line-height:1}
.date-mon{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}
.upcoming-info{flex:1;min-width:160px}
.upcoming-title{font-weight:500;color:var(--brown);margin-bottom:2px;font-size:15px}
.upcoming-meta-row{font-size:12px;color:var(--text-muted)}
.cancel-signup-btn{background:var(--red-light);color:var(--red);border:none;padding:6px 14px;border-radius:8px;font-size:12px;cursor:pointer;flex-shrink:0;font-family:inherit;transition:all .2s}
.cancel-signup-btn:hover{background:var(--red);color:var(--white)}

/* Past list */
.past-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--white)}
.past-item:first-child{border-radius:14px 14px 0 0}
.past-item:last-child{border-bottom:none;border-radius:0 0 14px 14px}
.past-list-wrap{border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.past-check{width:22px;height:22px;background:var(--green-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--green);flex-shrink:0}
.past-info{flex:1}
.past-title{font-size:14px;font-weight:500;color:var(--brown)}
.past-date{font-size:12px;color:var(--text-muted)}

/* Cancel contact box */
.cancel-contact-box{background:var(--saffron-pale);border-radius:10px;padding:14px 16px;font-size:13px;color:var(--brown);line-height:1.7;margin-top:8px}
.cancel-contact-box strong{font-weight:500}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 640px) {
  .hamburger { display: block; }
  .nav-links { display: none; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--white); padding: 12px 16px; border-bottom: 1px solid var(--border); gap: 4px; box-shadow: var(--shadow-md); }
  .nav-links.open { display: flex; }
  .nav-link { text-align: left; border-radius: 10px; }
  .hero h1 { font-size: 38px; }
  .hero-stats { gap: 24px; }
  .form-row { grid-template-columns: 1fr; }
  .modal { padding: 24px; }
  .dash-hero { padding: 24px 16px; }
}