/* ===========================================================================
   SavePlate — design system.
   Lifted from the product UI (archived demo) so the server looks like the
   real SavePlate, not a bare Flask app. Three parts, unchanged:
     01-base   tokens, nav, hero, buttons, cards, badges, listings, forms
     08-nav    grouped navigation, admin tabs, theme toggle
     06-dark   the dark theme
   Server-only additions are at the very bottom, clearly marked.
   =========================================================================== */

:root {
  color-scheme: light;
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --green-950: #0a3520;
  --green-900: #0e4a2a;
  --green-700: #17603a;
  --green-500: #2e8b52;
  --green-100: #e2f0e4;
  --orange: #e86a1e;
  --orange-dark: #b34a06;
  --orange-btn: #b34a06;
  --orange-btn-hover: #8a3a04;
  --orange-100: #fdeee1;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #edf2e8;
  --header-bg: #ffffff;
  --ink: #152219;
  --muted: #54685a;
  --line: #c3d4ba;
  --danger: #b3261e;
  --danger-bg: #fbe9e7;
  --warn: #9a6206;
  --warn-bg: #fdf3d7;
  --ok: #17603a;
  --ok-bg: #e2f0e4;
  --shadow: 0 8px 24px rgba(10, 53, 32, 0.16);
  --radius: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Universal underline removal across all links and elements */
a, a:link, a:visited, a:hover, a:active, a:focus {
  text-decoration: none !important;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.18;
  margin: 0;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: var(--font-sans); font-size: inherit; color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  border-bottom: 2px solid var(--line);
  box-shadow: 0 2px 10px rgba(10, 53, 32, 0.07);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; flex-wrap: nowrap; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand, .brand:link, .brand:visited, .brand:hover, .brand:active {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none !important;
}
.brand img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; background: #fff; }
.brand .word { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.025em; text-decoration: none !important; }
.brand .word b { color: var(--green-900); font-weight: 800; text-decoration: none !important; }
.brand .word span { color: var(--orange); text-decoration: none !important; }
.navlinks { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.navlinks button {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14.5px; color: var(--muted);
  font-family: var(--font-sans);
}
.navlinks button:hover { color: var(--ink); background: var(--surface-2); }
.navlinks button.active { background: var(--green-900); color: #fff; }
.demo-chip {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--orange-100); color: var(--orange-dark);
  border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent);
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-sans);
}

/* ---------- hero ---------- */
.hero { padding: 52px 0 8px; text-align: center; }
.hero img.logo { width: 240px; height: 240px; max-width: 72vw; object-fit: contain; }
.hero h1 { font-size: clamp(34px, 6vw, 56px); font-weight: 800; letter-spacing: -0.03em; margin-top: 10px; font-family: var(--font-display); }
.hero h1 .re { color: var(--green-900); }
.hero h1 .plate { color: var(--orange); }
.hero .tag { font-family: var(--font-display); font-size: clamp(17px, 2.6vw, 22px); font-weight: 600; color: var(--green-700); margin: 10px 0 0; }
.hero .sub { max-width: 680px; margin: 16px auto 0; color: var(--muted); font-size: 16.5px; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  background: var(--green-900); color: #ffffff !important; border: 1px solid var(--green-950);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 14px;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover {
  background: var(--green-700); border-color: var(--green-800); color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); background: var(--green-950); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); }
.btn.orange {
  background: #c2410c !important; border-color: #9a3412 !important; color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.btn.orange:hover {
  background: #9a3412 !important; border-color: #7c2d12 !important; color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  transform: translateY(-1px);
}
.btn.ghost {
  background: #ffffff !important; color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.btn.ghost:hover {
  background: #f8fafc !important; border-color: #94a3b8 !important; color: #0f172a !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.07) !important;
  transform: translateY(-1px);
}
.btn.danger {
  background: #dc2626 !important; border-color: #b91c1c !important; color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.btn.danger:hover {
  background: #b91c1c !important; border-color: #991b1b !important; color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px);
}
.btn.small { padding: 7px 14px; font-size: 13px; border-radius: 7px; }
.btn.warn {
  background: #c2410c !important; border-color: #9a3412 !important; color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
.btn.warn:hover {
  background: #9a3412 !important; border-color: #7c2d12 !important; color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  transform: translateY(-1px);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ---------- sections & cards ---------- */
.sec { padding: 38px 0 8px; }
.sec h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; letter-spacing: -0.02em; }
.lede { color: var(--muted); margin: 8px 0 20px; max-width: 640px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g2, .g3 { grid-template-columns: 1fr; } .g4 { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}
.card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; font-family: var(--font-display); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-align: center; }
.stat .n { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--green-900); letter-spacing: -0.02em; font-feature-settings: "tnum"; }
.stat .l { color: var(--muted); font-size: 13px; margin-top: 2px; }
.stat .l .u { display: block; font-size: 11.5px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.step .num {
  width: 34px; height: 34px; border-radius: 50%; background: var(--orange-btn); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-display);
}
.step h4 { margin: 12px 0 6px; font-size: 15.5px; }
.step p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* ---------- forms ---------- */
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); font-size: 14.5px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green-500); outline-offset: 1px; border-color: transparent; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ---------- badges & verdicts ---------- */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; padding: 2.5px 8.5px;
  border-radius: 999px; letter-spacing: 0.02em; white-space: nowrap;
  line-height: 1.35; border: 1px solid transparent;
}
.b-veg, .b-listed, .b-approved, .b-delivered, .b-collected, .b-verified {
  background: #f0fdf4; color: #166534; border-color: #bbf7d0;
}
.b-non-veg, .b-flagged, .b-rejected, .b-emergency {
  background: #fef2f2; color: #b91c1c; border-color: #fecaca;
}
.b-claimed {
  background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe;
}
.b-pickup_scheduled {
  background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe;
}
.b-in_transit, .b-pending, .b-unverified {
  background: #fefce8; color: #854d0e; border-color: #fef08a;
}
.b-ready {
  background: #fff7ed; color: #c2410c; border-color: #fed7aa;
}
.b-expired, .b-window, .b-role {
  background: #f8fafc; color: #475569; border-color: #e2e8f0;
}
.verdict { border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-top: 10px; }
.verdict.pass { background: var(--ok-bg); color: var(--ok); }
.verdict.flagged { background: var(--danger-bg); color: var(--danger); }
.verdict.expired { background: var(--surface-2); color: var(--muted); }

.score {
  font-family: "Sora", sans-serif; font-weight: 800; font-size: 15px; color: var(--orange-dark);
  background: var(--orange-100); padding: 4px 10px; border-radius: 999px;
}
.kv { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.kv:last-of-type { border-bottom: none; }
.kv b { color: var(--muted); font-weight: 600; }
.kv span { text-align: right; font-weight: 600; }

/* ---------- listings / tables ---------- */
.listing { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; background: var(--surface); }
.listing-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.listing-head .food { font-weight: 700; font-size: 15.5px; }
.listing-meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.tl { list-style: none; margin: 12px 0 0; padding: 0 0 0 6px; }
.tl li { position: relative; padding: 0 0 10px 22px; font-size: 13.5px; color: var(--muted); }
.tl li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--surface);
}
.tl li::after { content: ""; position: absolute; left: 6px; top: 19px; bottom: 0; width: 2px; background: var(--line); }
.tl li:last-child::after { display: none; }
.tl li.done { color: var(--ink); }
.tl li.done::before { background: var(--green-500); border-color: var(--green-500); }
.tl li.now { color: var(--orange-dark); font-weight: 700; }
.tl li.now::before { border-color: var(--orange); background: var(--orange-100); }

.empty { color: var(--muted); font-size: 14.5px; background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius); padding: 18px; text-align: center; }

/* ---------- picker chips ---------- */
.picker { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.picker button {
  cursor: pointer; text-align: left; background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 10px 14px; min-width: 170px; flex: 1 1 170px;
}
.picker button .nm { font-weight: 700; font-size: 14.5px; display: block; }
.picker button .dt { color: var(--muted); font-size: 12.5px; display: block; margin-top: 1px; }
.addlink, .addlink:link, .addlink:visited, .addlink:hover { background: none; border: none; color: var(--green-700); font-weight: 700; cursor: pointer; padding: 4px 0; font-size: 14px; text-decoration: none !important; }
.user-chip, .user-chip a, .user-chip a:visited, .user-chip a:hover { text-decoration: none !important; }

/* ---------- impact ---------- */
.big-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 700px) { .big-stats { grid-template-columns: 1fr; } }
.big-stat { border-radius: var(--radius); padding: 26px 22px; color: #fff; }
.big-stat.green { background: var(--green-900); }
.big-stat.orange { background: var(--orange-btn); }
.big-stat.deep { background: var(--green-950); }
.big-stat .n { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.025em; font-feature-settings: "tnum"; }
.big-stat .l { opacity: 0.85; font-size: 14px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 64px; align-items: center; gap: 12px; margin: 10px 0; font-size: 13.5px; }
.bar-track { background: var(--surface-2); border-radius: 999px; height: 14px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--green-500); border-radius: 999px; transition: width 0.6s ease; }
.bar-fill.orange { background: var(--orange); }
.rank-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.rank-row:last-child { border-bottom: none; }
.rank-num { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; margin-right: 10px; flex: none; }

/* ---------- panels, admin & register ---------- */
.panel-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 2.5px 9px; border-radius: 999px;
  background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
  line-height: 1.35; vertical-align: middle; margin-bottom: 4px;
}
.panel-chip.orange, .panel-chip.role-ngo, .panel-chip.ngo {
  background: #fff7ed; color: #c2410c; border-color: #fed7aa;
}
.panel-chip.deep, .panel-chip.role-admin, .panel-chip.admin {
  background: #f0f9ff; color: #0369a1; border-color: #bae6fd;
}
.panel-chip.violet, .panel-chip.role-hostel, .panel-chip.hostel {
  background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe;
}
.panel-chip.role-donor, .panel-chip.donor {
  background: #f0fdf4; color: #166534; border-color: #bbf7d0;
}
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 999px; background: var(--orange-btn); color: #fff;
  font-size: 11px; font-weight: 800; margin-left: 6px; vertical-align: 2px;
}
.picker button.sel { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.picker button.sel .dt { color: rgba(255, 255, 255, 0.78); }
.notif {
  display: flex; gap: 10px; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 9px; background: var(--surface); font-size: 13.5px;
}
.notif.unread { border: 1.5px solid var(--orange); background: var(--orange-100); }
.notif .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); flex: none; margin-top: 6px; }
.notif.read .dot { background: var(--line); }
.notif .when { color: var(--muted); font-size: 12px; display: block; margin-top: 1px; }
.dir-row, .conn-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; flex-wrap: wrap;
}
.dir-row:last-child, .conn-row:last-child { border-bottom: none; }
.b-pending { background: var(--warn-bg); color: var(--warn); }
.b-approved { background: var(--ok-bg); color: var(--ok); }
.b-rejected { background: var(--danger-bg); color: var(--danger); }
.b-role { background: var(--surface-2); color: var(--ink); }
.b-verified { background: var(--green-900); color: #fff; }
.b-ready { background: var(--orange-btn); color: #fff; }
.b-window { background: var(--surface-2); color: var(--muted); }
.b-unverified { background: var(--warn-bg); color: var(--warn); }
.notice { background: var(--warn-bg); border: 1px solid #e7d194; border-radius: var(--radius); padding: 16px 18px; font-size: 14px; color: #6b4a05; margin-top: 16px; }
.notice b { color: #543a04; }
.mini {
  background: var(--green-900) !important; border: 1.5px solid var(--green-900) !important; color: #ffffff !important;
  border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 6px rgba(10, 53, 32, 0.20);
  transition: transform 0.1s ease, background 0.12s ease, border-color 0.12s ease;
}
.mini:hover {
  background: var(--green-700) !important; border-color: var(--green-700) !important; color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(10, 53, 32, 0.28);
}
.mini.danger {
  background: var(--danger) !important; border-color: var(--danger) !important; color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(179, 38, 30, 0.22);
}
.mini.danger:hover {
  background: #8e1c15 !important; border-color: #8e1c15 !important; color: #ffffff !important;
}
.mini.secondary {
  background: var(--surface-2) !important; border-color: var(--line) !important; color: var(--ink) !important;
}
.mini.secondary:hover {
  background: var(--green-100) !important; border-color: var(--green-700) !important; color: var(--green-950) !important;
}
/* ---------- toast ---------- */
#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 32px)); }
.toast {
  background: var(--green-950); color: #eaf5ec; border-radius: 12px; padding: 13px 16px;
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: flex-start;
  animation: rise 0.25s ease;
}
.toast.err { background: #5c1712; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .bar-fill { transition: none; } }

/* ---------- polish: focus, motion, loading ---------- */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
a.btn { text-decoration: none; }
.btn { transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; }
.btn.loading { opacity: 0.78; pointer-events: none; }
.btn .spin { width: 15px; height: 15px; flex: none; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: spin360 0.7s linear infinite; }
.btn.ghost .spin { border-color: rgba(14, 74, 42, 0.25); border-top-color: var(--green-900); }
@keyframes spin360 { to { transform: rotate(360deg); } }
.view.active { animation: viewin 0.28s ease; }
@keyframes viewin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card, .listing, .stat { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.listing:hover, .gal-card:hover { border-color: var(--green-500); }

/* ---------- auth / login ---------- */
.auth-area { display: flex; align-items: center; gap: 8px; }
.user-chip { display: flex; align-items: center; gap: 9px; background: var(--green-100); border: 1.5px solid var(--green-700); border-radius: 999px; padding: 4px 6px 4px 4px; font-weight: 700; font-size: 13.5px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--green-900); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: "Sora", sans-serif; font-weight: 800; font-size: 13px; flex: none; }
.avatar.orange { background: var(--orange-btn); }
.avatar.lg { width: 40px; height: 40px; font-size: 16px; }
.modal-overlay { position: fixed; inset: 0; background: rgba(8, 24, 16, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 99999; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open, .modal-overlay[style*="display: flex"] { display: flex !important; }
.modal, .modal-dialog { background: var(--surface, #ffffff); color: var(--ink, #1a2e22); border-radius: 18px; max-width: 540px; width: 100%; padding: 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.12); border: 1.5px solid var(--line, #e2e8f0); max-height: calc(100vh - 40px); overflow-y: auto; position: relative; animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.auth-tabs { display: flex; gap: 8px; margin: 14px 0 4px; }
.auth-tabs button { flex: 1; cursor: pointer; border: 1.5px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 9px 10px; font-weight: 700; font-size: 14px; color: var(--muted); font-family: "Sora", sans-serif; }
.auth-tabs button.on { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.req { color: var(--danger); font-weight: 800; }
.ferr { color: var(--danger); font-size: 12.5px; font-weight: 600; min-height: 15px; margin-top: 3px; }
input.invalid, select.invalid, textarea.invalid { border-color: var(--danger); }
.pic-row { display: flex; gap: 14px; align-items: center; margin-top: 12px; }
.pic-preview { width: 64px; height: 64px; border-radius: 50%; background: var(--green-100); border: 2px solid var(--green-700); display: flex; align-items: center; justify-content: center; font-family: "Sora", sans-serif; font-weight: 800; font-size: 24px; color: var(--green-900); overflow: hidden; flex: none; }
.pic-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-chip .avatar { cursor: pointer; }
/* ---------- notifications center, filters, faq ---------- */
.notif-center { position: relative; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; cursor: pointer; color: var(--green-900); }
.icon-btn:hover { background: var(--green-100); border-color: var(--green-700); }
.icon-btn .nav-badge { position: absolute; top: -5px; right: -5px; margin: 0; }
.notif-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(370px, calc(100vw - 24px)); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); z-index: 130; display: none; text-align: left; }
.notif-panel.open { display: block; }
.notif-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notif-panel-head b { font-family: "Sora", sans-serif; font-size: 15px; }
.notif-list { max-height: 320px; overflow-y: auto; padding: 10px; }
.notif-list .notif { cursor: pointer; }
.notif-list .notif:last-child { margin-bottom: 0; }
.notif-panel-foot { padding: 10px 14px; border-top: 1px solid var(--line); }
.filterbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.filterbar input, .filterbar select { width: auto; flex: 1 1 150px; }
.filterbar input[type="search"] { flex: 2 1 210px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; background: var(--surface); box-shadow: var(--shadow); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 16px 18px; font-weight: 700; font-size: 15.5px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; font-family: "Sora", sans-serif; }
.faq-chev { font-size: 20px; color: var(--orange-dark); flex: none; line-height: 1; }
.faq-a { display: none; padding: 0 18px 16px; color: var(--muted); font-size: 14.5px; }
.faq-a p { margin: 0 0 8px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-item.open .faq-a { display: block; }
.btn.wa:disabled { background: var(--surface-2); border-color: var(--line); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.btn.wa:disabled:hover { background: var(--surface-2); }

/* ---------- RBAC: login gate & one-tap demo logins ---------- */
.gate-card { max-width: 660px; margin: 30px auto; }
.gate-lock { width: 54px; height: 54px; border-radius: 50%; background: var(--orange-100); border: 1.5px solid var(--orange); display: flex; align-items: center; justify-content: center; color: var(--orange-dark); margin: 12px 0 14px; }
.gate-inside { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; font-size: 14px; margin: 14px 0 4px; }
.gate-inside b { display: block; margin-bottom: 2px; }
.demo-login-box { border: 1.5px dashed var(--orange); background: var(--orange-100); border-radius: 12px; padding: 14px; margin-top: 18px; }
.demo-login-title { font-family: "Sora", sans-serif; font-weight: 700; font-size: 14.5px; margin-bottom: 10px; color: var(--orange-dark); }
.demo-login-row { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-login-box .hint { color: var(--orange-dark); }

/* ---------- emergency & whatsapp ---------- */
.btn.emg { background: var(--danger); border-color: var(--danger); box-shadow: 0 3px 8px rgba(179, 38, 30, 0.30); }
.btn.emg:hover { background: #8f1d16; }
.btn.wa { background: #178a44; border-color: #178a44; box-shadow: 0 3px 8px rgba(23, 138, 68, 0.30); }
.btn.wa:hover { background: #178a44; }
.b-emergency { background: var(--danger); color: #fff; }
.emg-pulse { animation: emgpulse 1.6s ease infinite; }
@keyframes emgpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(179, 38, 30, 0); } }
.mini { text-decoration: none; display: inline-block; }
.mini.wa { border-color: #178a44; color: #146c38; }
.mini.wa:hover { background: #e2f6e9; border-color: #178a44; }

/* ---------- gallery & social ---------- */
.gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gal-grid { grid-template-columns: 1fr; } }
.gal-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: border-color 0.15s ease; }
.gal-card img { width: 100%; height: 190px; object-fit: cover; display: block; background: var(--surface-2); }
.gal-body { padding: 14px 16px 16px; }
.gal-cap { font-size: 14px; margin: 0 0 10px; }
.gal-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gal-author { font-size: 12.5px; color: var(--muted); font-weight: 600; }
/* ---------- PulseHeart like button (vanilla port of React Bits PulseHeart) ----------
   Pill surface + text follow the page theme via --surface-2 / --ink, so the
   pill is light in light mode and dark in dark mode — never hardcoded. */
.like-btn {
  --ph-size: 20px;
  --ph-corner: 999px;
  --ph-pill: var(--surface-2);
  --ph-idle: #8b8b93;
  --ph-liked: #ff4d6d;
  --ph-text: var(--ink);
  --ph-roll: 350ms;
  --ph-stroke: 2.2px;
  --ph-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; border: 0; border-radius: var(--ph-corner);
  background: none; color: var(--ph-text); font-family: inherit; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 160ms var(--ph-ease-out);
}
.like-btn:active { transform: scale(0.97); }
.like-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--ph-liked) 60%, transparent); outline-offset: 3px; }
.ph-pill {
  display: inline-flex; align-items: center; gap: calc(var(--ph-size) * 0.3);
  padding: calc(var(--ph-size) * 0.36) calc(var(--ph-size) * 0.5);
  padding-inline-end: calc(var(--ph-size) * 0.62);
  border-radius: var(--ph-corner); background: var(--ph-pill);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ph-text) 9%, transparent);
  transform-origin: center;
}
.ph-heart { display: block; width: var(--ph-size); height: var(--ph-size); color: var(--ph-idle); transform-origin: center; transition: color 160ms ease; flex: none; }
.ph-heart svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: var(--ph-stroke); stroke-linecap: round; stroke-linejoin: round; }
.like-btn[data-liked="true"] .ph-heart svg { fill: currentColor; }
.like-btn[data-liked="true"] .ph-heart { color: var(--ph-liked); }
.like-btn[data-running] .ph-heart, .like-btn[data-instant] .ph-heart { transition: none; }
@media (hover: hover) and (pointer: fine) {
  .like-btn:not([data-liked="true"]):not(:disabled):hover .ph-heart { color: color-mix(in srgb, var(--ph-idle) 45%, var(--ph-liked)); }
}
.ph-count { display: inline-flex; font-size: 14.5px; font-weight: 700; line-height: 1; letter-spacing: -0.1px; font-variant-numeric: tabular-nums; color: var(--ph-text); }
.ph-count > span { display: block; height: 1em; }
.ph-slot { position: relative; overflow: hidden; }
.ph-roll { display: flex; flex-direction: column; transition: transform var(--ph-roll) var(--ph-ease-out); }
.ph-roll > span { display: block; height: 1em; line-height: 1; }
.ph-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (pointer: coarse), (max-width: 560px) {
  .like-btn { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .like-btn { transition: none; }
  .ph-heart { transition: color 200ms ease; }
  .ph-roll { transition: none; }
}
.file-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--green-900); color: #fff; border-radius: 10px; padding: 9px 16px; font-weight: 700; font-size: 14px; margin: 0; }
.file-pick:hover { background: var(--green-700); }
.feed { display: grid; gap: 14px; max-width: 720px; }
.feed-item { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.feed-main { flex: 1; min-width: 0; }
.feed-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.feed-head .who b { font-size: 14.5px; }
.feed-head .who span { color: var(--muted); font-size: 12.5px; display: block; }
.feed-when { color: var(--muted); font-size: 12px; white-space: nowrap; }
.feed-text { font-size: 14.5px; margin: 6px 0 0; }
.feed-item img.feed-photo { width: 100%; max-height: 300px; object-fit: cover; border-radius: 10px; margin-top: 10px; display: block; }
.feed-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }

/* ---------- live chat ---------- */
.chat-fab { position: fixed; right: 18px; bottom: 18px; z-index: 150; display: inline-flex; align-items: center; gap: 8px; background: var(--green-900); color: #fff; border: 2px solid var(--green-900); border-radius: 999px; padding: 12px 18px; font-weight: 800; font-size: 14.5px; cursor: pointer; box-shadow: var(--shadow); transition: background 0.12s ease, transform 0.12s ease; }
.chat-fab:hover { background: var(--green-700); }
.chat-fab:active { transform: scale(0.97); }
.chat-panel { position: fixed; right: 18px; bottom: 84px; z-index: 150; width: min(370px, calc(100vw - 24px)); height: 520px; max-height: calc(100vh - 104px); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); display: none; flex-direction: column; overflow: hidden; }
.chat-panel.open { display: flex; animation: viewin 0.2s ease; }
@media (max-width: 480px) { .chat-panel { right: 12px; bottom: 78px; } .chat-fab { right: 12px; bottom: 12px; } }
.chat-head { background: var(--green-900); color: #fff; padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.chat-head b { font-family: "Sora", sans-serif; font-size: 15px; display: block; }
.chat-status { font-size: 12px; opacity: 0.85; display: flex; align-items: center; gap: 6px; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #57d977; display: inline-block; }
.chat-wa { padding: 9px 14px; background: var(--orange-100); font-size: 13px; border-bottom: 1px solid var(--line); }
.chat-wa a { color: var(--orange-dark); font-weight: 800; }
.chat-reg { display: none; padding: 12px 14px; background: #fff; border-bottom: 1px solid var(--line); min-height: 0; }
.chat-reg.open { display: block; overflow-y: auto; }
.chat-panel.reg-open .chat-wa, .chat-panel.reg-open .chat-chips, .chat-panel.reg-open .chat-log { display: none; }
.chat-reg input, .chat-reg select { padding: 8px 10px; font-size: 13.5px; margin-bottom: 8px; }
.chat-reg .row2 { gap: 8px; }
.chat-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 12px 2px; background: var(--surface-2); }
.qchip { background: #fff; border: 1.5px solid var(--green-700); color: var(--green-900); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.qchip:hover { background: var(--green-100); }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.msg { max-width: 84%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.msg .who { font-size: 11px; font-weight: 800; opacity: 0.7; display: block; margin-bottom: 2px; }
.msg.bot { background: #fff; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.me { background: var(--green-900); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.typing { color: var(--muted); font-style: italic; }
.chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: #fff; }
.chat-form input { flex: 1; }

footer.site { margin-top: 56px; border-top: 1px solid var(--line); padding: 26px 0 40px; color: var(--muted); font-size: 13.5px; }
footer.site .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.view { display: none; }
.view.active { display: block; }
.flash { animation: flashbg 1.2s ease; }
@keyframes flashbg { 0% { background: var(--orange-100); } 100% { background: var(--surface); } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }

/* ================= POLISH PASS: grouped nav · admin tabs · mobile bar ================= */
/* desktop: the nav becomes its own organised sub-row with labelled groups */
.navlinks { order: 10; flex: 1 1 100%; align-items: center; gap: 2px; border-top: 1px solid var(--line); padding-top: 9px; margin-top: 2px; }
.navgroup { display: inline-flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.navgroup + .navgroup { border-left: 1px solid var(--line); margin-left: 10px; padding-left: 12px; }
.navgroup-label { font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-right: 5px; white-space: nowrap; }
.navlinks button { padding: 7px 12px; font-size: 14px; white-space: nowrap; }
@media (max-width: 1180px) { .navgroup-label { display: none; } }

/* admin control-room tabs */
.atabs { display: flex; flex-wrap: nowrap; overflow-x: auto; align-items: center; gap: 4px; margin: 18px 0 24px; padding: 5px 6px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.8); scrollbar-width: none; }
.atabs::-webkit-scrollbar { display: none; }
.atab { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e2e8f0; background: #ffffff; color: #334155; font-weight: 600; font-size: 13px; padding: 6.5px 12px; border-radius: 7px; cursor: pointer; transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); white-space: nowrap; flex-shrink: 0; }
.atab:hover { color: #0f172a; background: #f8fafc; border-color: #cbd5e1; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06); transform: translateY(-1px); }
.atab.on { background: #0f5132 !important; color: #ffffff !important; font-weight: 600 !important; border: 1px solid #0c4128 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; transform: none !important; }
.atab .pill { background: #f1f5f9; border: 1px solid #cbd5e1; color: #475569; font-size: 11px; font-weight: 700; padding: 1.5px 7px; border-radius: 999px; min-width: 19px; text-align: center; }
.atab.on .pill { background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.4); color: #ffffff; }
.apanel { display: none; }
.apanel.on { display: block; animation: viewin 0.25s ease; }
.apanel > .card + .card { margin-top: 16px; }

/* mobile bottom navigation + "More" sheet */
.mnav, .mnav-sheet { display: none; }
.mnav-sheet .ms-group { margin-bottom: 12px; }
.mnav-sheet .ms-group:last-child { margin-bottom: 0; }
.mnav-sheet .ms-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px 2px; }
.mnav-sheet .ms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mnav-sheet .ms-grid button { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 10px 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.mnav-sheet .ms-grid button.active { background: var(--green-900); color: #fff; border-color: var(--green-900); }
.mnav-sheet .ms-grid button.ms-emg { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); font-weight: 700; }
@media (max-width: 900px) {
  .navlinks { display: none; }
  html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .mnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 160; background: var(--header-bg); border-top: 2px solid var(--line); box-shadow: 0 -4px 18px rgba(10, 53, 32, 0.10); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .mnav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: transparent; border: 0; border-radius: 10px; padding: 6px 2px; font-size: 11.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
  .mnav button.active { color: var(--green-900); background: var(--green-100); }
  [data-theme="dark"] .mnav button.active { color: #7fd79b; }
  .mnav-sheet { display: none; position: fixed; left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 160; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 14px; max-height: 62vh; overflow-y: auto; }
  .mnav-sheet.open { display: block; animation: viewin 0.18s ease; }
  .hero { padding: 20px 0 4px; }
  .hero img.logo { width: 128px; height: 128px; }
  .chat-fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); right: 12px; width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 50%; }
  .chat-fab .chat-fab-label { display: none; }
  .chat-fab .nav-badge { position: absolute; top: -4px; right: -4px; margin: 0; }
  .chat-panel { bottom: calc(146px + env(safe-area-inset-bottom, 0px)); right: 12px; max-height: calc(100vh - 164px); }
  .cta-row { gap: 10px; }
  .cta-row .btn { flex: 1 1 44%; justify-content: center; text-align: center; padding: 11px 10px; }
}
@media (max-width: 560px) {
  #theme-toggle-label { display: none; }
  .brand .word { font-size: 19px; }
  .brand img { width: 36px; height: 36px; }
  .lang-toggle button { padding: 7px 10px; }
  .theme-toggle { padding: 7px 10px; }
  .nav { gap: 10px; }
}
/* the footer chat button duplicates the always-visible chat bubble */
#footer-chat { display: none; }
@media (prefers-reduced-motion: reduce) { .mnav-sheet { transition: none; } .apanel.on { animation: none; } }

/* ================= feature pack 2: dark mode + needs / schedules / analytics / volunteers / profiles / events ================= */
body { transition: background 0.25s ease, color 0.25s ease; }
[data-theme="dark"] {
  color-scheme: dark;
  background: #07090a;
  --bg: #07090a;
  --surface: #121614;
  --surface-2: #1a1f1b;
  --header-bg: #0a0c0b;
  --ink: #f2f5f2;
  --muted: #aeb8ae;
  --line: #2b332c;
  --green-100: #152219;
  --orange-100: #2a1c0e;
  --ok: #7fd79b;
  --ok-bg: #122a19;
  --danger: #ff9d94;
  --danger-bg: #331512;
  --warn: #e8c56a;
  --warn-bg: #2e270e;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .stat .n, [data-theme="dark"] .brand .word b,
[data-theme="dark"] .hero h1 .re, [data-theme="dark"] .sp-title .re,
[data-theme="dark"] .tier .t-price, [data-theme="dark"] .wx-strip .wx-temp,
[data-theme="dark"] .countdown { color: #7fd79b; }
[data-theme="dark"] .tier .t-name { color: var(--ink); }
[data-theme="dark"] .score, [data-theme="dark"] .faq-chev,
[data-theme="dark"] .tier .t-meals, [data-theme="dark"] .stars { color: #ffb27a; }
[data-theme="dark"] .addlink { color: #7fd79b; }
[data-theme="dark"] .btn.ghost {
  background: #1e3a2b !important; color: #eaf5ec !important; border-color: #294e3a !important;
}
[data-theme="dark"] .btn.ghost:hover {
  background: #274b37 !important; border-color: #35624a !important; color: #ffffff !important;
}
[data-theme="dark"] .modal, [data-theme="dark"] .modal-dialog, [data-theme="dark"] .notif-panel, [data-theme="dark"] .chat-panel { background: #14231b; color: #f1fdf5; border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75); }
[data-theme="dark"] .icon-btn { background: var(--surface); color: #8fe0ab; }
[data-theme="dark"] .lang-toggle { background: var(--surface); border-color: #4cc27a; }
[data-theme="dark"] .lang-toggle button { color: #8fe0ab; }
[data-theme="dark"] .peek-rating { --pr-idle: #5f7a66; }
[data-theme="dark"] .mini {
  background: #256a4e !important; color: #ffffff !important; border-color: #256a4e !important;
}
[data-theme="dark"] .mini:hover {
  background: #2e7b5c !important; border-color: #2e7b5c !important; color: #ffffff !important;
}
[data-theme="dark"] .mini.danger {
  background: #b23731 !important; color: #ffffff !important; border-color: #b23731 !important;
}
[data-theme="dark"] .mini.danger:hover {
  background: #c4423a !important; border-color: #c4423a !important; color: #ffffff !important;
}
[data-theme="dark"] .notice, [data-theme="dark"] .pilot-note { background: #2e2410; border-color: #6b5518; color: #f2dfae; }
[data-theme="dark"] .notice b, [data-theme="dark"] .pilot-note b { color: #ffe9a8; }
[data-theme="dark"] .hero img.logo { background: #ffffff; border-radius: 22px; padding: 12px; }
[data-theme="dark"] .chat-fab { border-color: #4cc27a; }
/* dark contrast fixes: danger FILLS stay deep red (the light --danger is for text);
   pale text colors pinned where light-theme values go muddy on dark surfaces */
[data-theme="dark"] .btn.emg { background: #b3261e; border-color: #b3261e; color: #fff; }
[data-theme="dark"] .b-emergency { background: #b3261e; color: #fff; }
[data-theme="dark"] .hero .tag { color: #8fd0ae; }
[data-theme="dark"] .demo-chip { color: #f5c396; border-color: #8a5a24; }
[data-theme="dark"] .mini.wa { color: #7ed492; border-color: #2f9e57; }
[data-theme="dark"] .mini.wa:hover { background: #173626; }
[data-theme="dark"] #otp-error { color: #ff9d94 !important; }
[data-theme="dark"] #view-emergency .panel-chip { background: #b3261e !important; }
[data-theme="dark"] .insight-list li b { color: #8fe0ab; }
/* ---- dark audit pass: true-black leak fixes + AA contrast ----
   Every surface below previously kept a light-theme fill or a
   dark-on-dark brand text color in dark mode. */
[data-theme="dark"] .chat-reg, [data-theme="dark"] .chat-form { background: var(--surface); }
[data-theme="dark"] .msg.bot { background: var(--surface); }
[data-theme="dark"] .qchip { background: var(--surface); color: #8fe0ab; }
[data-theme="dark"] .qchip:hover { background: var(--green-100); }
[data-theme="dark"] #chat-close { background: var(--surface) !important; }
[data-theme="dark"] .b-claimed { background: #1b2a4a; color: #a9c3f5; }
[data-theme="dark"] .b-pickup_scheduled { background: #2a2145; color: #c3b3f2; }
[data-theme="dark"] .badge-chip { color: #ffb27a; }
[data-theme="dark"] .demo-login-title, [data-theme="dark"] .demo-login-box .hint,
[data-theme="dark"] .gate-lock { color: #ffb27a; }
[data-theme="dark"] .tl li.now { color: #ffb27a; }
[data-theme="dark"] .chat-wa a { color: #ffb27a; }
/* Voice listing (speak-to-fill on the post-food forms) */
.voice-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; flex-wrap: wrap; }
.voice-row #voice-btn { display: inline-flex; align-items: center; gap: 6px; }
.voice-lang { width: auto; min-width: 96px; padding: 6px 10px; }
.voice-msg { display: block; font-size: 13px; color: var(--muted); margin: 2px 0 8px; min-height: 1.2em; }
.voice-msg.listening { color: #b34a06; font-weight: 600; }
.voice-msg.listening::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: middle; animation: voicePulse 1s ease-in-out infinite; }
@keyframes voicePulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
[data-theme="dark"] .voice-msg.listening { color: #ffb27a; }
[data-theme="dark"] .aadhaar-ready { color: #ffb27a !important; }
[data-theme="dark"] .pic-preview { color: #8fe0ab; }
[data-theme="dark"] .blist li::before { color: #7fd79b; }
[data-theme="dark"] .stars .off { color: #45524a; }
[data-theme="dark"] .switch .track { background: #39443c; }
[data-theme="dark"] .btn.ghost .spin { border-color: rgba(143, 224, 171, 0.25); border-top-color: #8fe0ab; }
[data-theme="dark"] .wa-sim-note { background: #2e270e; color: #f2dfae; border-bottom-color: #57491c; }
[data-theme="dark"] .wa-chips button { background: #122a19; color: #7ed492; }
[data-theme="dark"] .wa-chips button:hover { background: #173626; }
[data-theme="dark"] .wa-photo-opts button, [data-theme="dark"] .wa-photo-opts label { background: #1f2c34; }
[data-theme="dark"] .wa-photo-opts span { color: #7ed492; }
[data-theme="dark"] .donut-track { stroke: #262d27; }
[data-theme="dark"] .peek-rating { --pr-idle: #6f8f79; }
[data-theme="dark"] .card:hover, [data-theme="dark"] .listing:hover,
[data-theme="dark"] .stat:hover, [data-theme="dark"] .step:hover,
[data-theme="dark"] .gal-card:hover, [data-theme="dark"] .tier:hover,
[data-theme="dark"] .faq-item:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); }
/* map legend pin words (were dark brand colors on dark panels) */
.pin-g { color: #17603a; } .pin-o { color: #b34a06; } .pin-b { color: #274b9f; }
[data-theme="dark"] .pin-g { color: #7fd79b; }
[data-theme="dark"] .pin-o { color: #ffb27a; }
[data-theme="dark"] .pin-b { color: #a9c3f5; }
/* Leaflet chrome in dark: tone the bright OSM tiles down, keep
   markers/popups unfiltered so pins stay readable */
[data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.55) saturate(0.62) contrast(1.08); }
[data-theme="dark"] .leaflet-bar a { background: #161a17; color: #f2f5f2; border-color: #2b332c; }
[data-theme="dark"] .leaflet-bar a:hover { background: #20261f; }
[data-theme="dark"] .leaflet-control-attribution { background: rgba(10, 12, 11, 0.82) !important; color: #8b968b; }
[data-theme="dark"] .leaflet-control-attribution a { color: #a8b3a8; }
[data-theme="dark"] .leaflet-popup-content-wrapper { background: #161a17; color: #f2f5f2; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); }
[data-theme="dark"] .leaflet-popup-tip { background: #161a17; }
[data-theme="dark"] .leaflet-popup-close-button { color: #a8b3a8 !important; }
.theme-toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1.5px solid var(--green-900); background: var(--surface); color: var(--green-900);
  border-radius: 999px; padding: 7px 13px; font-weight: 700; font-size: 13.5px;
}
.theme-toggle:hover { background: var(--green-100); }
[data-theme="dark"] .theme-toggle { border-color: #4cc27a; color: #8fe0ab; }
[data-theme="dark"] .theme-toggle:hover { background: var(--green-100); }

/* needs board */
.need-prog { background: var(--surface-2); border-radius: 999px; height: 12px; overflow: hidden; margin-top: 8px; }
.need-prog > div { height: 100%; background: var(--green-500); border-radius: 999px; transition: width 0.5s ease; }
.need-prog.full > div { background: var(--orange); }
.pledge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pledge-row select, .pledge-row input { width: auto; flex: 1 1 130px; }
.pledge-line { font-size: 13px; color: var(--muted); padding: 4px 0; border-bottom: 1px dashed var(--line); }
.pledge-line:last-of-type { border-bottom: none; }

/* recurring schedules */
.day-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.day-chips button { border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--muted); }
.day-chips button.on { background: var(--green-900); border-color: var(--green-900); color: #fff; }

/* analytics charts */
.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 14px; }
@media (max-width: 800px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface); }
.chart-box h4 { font-size: 14.5px; margin: 0 0 4px; }
.chart-box .sub { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.chart-box svg { width: 100%; height: auto; display: block; }
.chart-bar { fill: var(--green-500); }
.chart-bar-o { fill: var(--orange); }
.chart-axis { font-size: 10.5px; fill: var(--muted); font-family: "Public Sans", sans-serif; }
.chart-val { font-size: 11px; fill: var(--ink); font-weight: 700; font-family: "Public Sans", sans-serif; }
.chart-line { fill: none; stroke: var(--orange); stroke-width: 2.5; }
.chart-grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-dot { fill: var(--orange); stroke: var(--surface); stroke-width: 1.5; }
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut-wrap svg { width: 132px; flex: none; }
.donut-track { fill: none; stroke: var(--surface-2); stroke-width: 15; }
.donut-fill { fill: none; stroke: var(--green-500); stroke-width: 15; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }
.donut-num { font-family: "Sora", sans-serif; font-size: 25px; font-weight: 800; fill: var(--ink); }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* events */
.countdown { font-family: "Sora", sans-serif; font-weight: 800; font-size: 25px; letter-spacing: -0.01em; color: var(--green-900); }
.countdown small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 2px; }

/* public donor profile */
.profile-hero { text-align: center; }
.profile-hero .avatar { width: 84px; height: 84px; font-size: 32px; margin: 0 auto 10px; }
.profile-headline { font-family: "Sora", sans-serif; font-size: clamp(23px, 4vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; }
.profile-headline b { color: var(--orange-dark); }
[data-theme="dark"] .profile-headline b { color: #ffb27a; }

/* ===========================================================================
   Server-only additions — components the product UI never had, because the
   old client-side build had no login, no approval gate and no mess panel.
   Written with the same tokens as everything above.
   =========================================================================== */

/* the demo reserved space for a mobile bottom bar; the server has none yet */
@media (max-width: 900px) { body { padding-bottom: 0; } }

/* flash messages */
.alert { border-radius: 10px; padding: 11px 15px; margin: 10px 0; font-size: 14px; }
.alert.ok  { background: var(--ok-bg); border: 1px solid var(--green-500); color: var(--ok); }
.alert.err { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); }
.alert.warn{ background: var(--warn-bg); border: 1px solid #e7d194; color: var(--warn); }
.flashes { padding-top: 14px; }
[data-theme="dark"] .alert.warn { background: #2e2410; border-color: #6b5518; color: #f2dfae; }

/* registration role picker */
.role-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
@media (max-width: 820px) { .role-pick { grid-template-columns: 1fr; } }
.pick {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 400;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 12px;
  background: var(--surface); cursor: pointer;
}
.pick:hover { border-color: var(--green-500); }
.pick input { width: auto; margin-top: 3px; flex: none; }
.pick b { display: block; font-size: 15px; font-family: "Sora", sans-serif; }
.pick small { color: var(--muted); font-size: 12.5px; }
.pick:has(input:checked) { border-color: var(--green-700); background: var(--green-100); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-top: 16px; }
legend { font-weight: 700; font-size: 13px; padding: 0 6px; color: var(--muted); font-family: "Sora", sans-serif; }

/* hostel one-tap mess posting */
.quick-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 12px; }
@media (max-width: 900px) { .quick-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .quick-row { grid-template-columns: 1fr; } }
.quick { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--surface-2); }
.quick-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.quick-head b { font-family: "Sora", sans-serif; }
.quick input, .quick select { margin-bottom: 8px; }

/* listing extras */
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.row-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.row-form label { margin: 0 0 4px; }
.row-form input { width: auto; flex: 1 1 200px; }
.refuse { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
.refuse summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--danger); }
.listing.v-flagged { border-left: 4px solid var(--danger); }
.listing.v-expired { border-left: 4px solid var(--line); }
.listing.v-pass    { border-left: 4px solid var(--green-500); }

/* small utilities */
.mt { margin-top: 18px; } .mt-s { margin-top: 8px; }
.muted { color: var(--muted); } .sm { font-size: 13.5px; }
.center { text-align: center; } .nowrap { white-space: nowrap; } .inline { display: inline; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.align-start { align-items: start; }
.wrap.narrow { max-width: 660px; }
.btn.wide { width: 100%; justify-content: center; }
.plain { list-style: none; margin: 8px 0 0; padding: 0; }
.plain li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.plain li:last-child { border-bottom: none; }
.code { font-family: "Sora", sans-serif; font-size: 48px; font-weight: 800; color: var(--green-900); }
[data-theme="dark"] .code { color: #7fd79b; }
table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; }
code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }
.pill { display: inline-block; background: var(--orange-btn); color: #fff; border-radius: 999px;
  padding: 1px 7px; font-size: 11px; font-weight: 800; margin-left: 4px; }

/* printable FSSAI-style packet label */
.label-page { background: #fff; }
.label-wrap { max-width: 560px; margin: 28px auto; padding: 0 18px; }
.food-label { border: 2.5px solid #152219; border-radius: 10px; padding: 20px 22px; background: #fff; color: #152219; }
.fl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  border-bottom: 2px solid #152219; padding-bottom: 10px; }
.fl-brand { font-family: "Sora", sans-serif; font-weight: 800; font-size: 20px; }
.fl-brand span { color: #b34a06; }
.fl-sub { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #54685a; font-weight: 700; }
.fl-food { font-family: "Sora", sans-serif; font-size: 24px; font-weight: 800; margin: 14px 0 2px; line-height: 1.2; }
.fl-line { font-size: 12px; color: #54685a; font-weight: 700; text-transform: uppercase; }
.fl-row { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0;
  border-bottom: 1px dashed #c3d4ba; font-size: 14px; }
.fl-row span { text-align: right; }
.fl-verdict { margin-top: 14px; background: #e2f0e4; border: 1.5px solid #17603a; color: #0e4a2a;
  border-radius: 10px; padding: 9px; font-weight: 800; text-align: center; }
.fl-note { font-size: 11.5px; color: #54685a; margin-top: 10px; line-height: 1.5; }
.veg-mark { width: 22px; height: 22px; border: 2.5px solid #17603a; border-radius: 3px;
  display: inline-block; position: relative; flex: none; }
.veg-mark::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #17603a; }
.veg-mark.non-veg { border-color: #8a3324; }
.veg-mark.non-veg::after { border-radius: 0; background: none; inset: 4px 2px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #8a3324; }
@media print { .no-print { display: none !important; } .label-wrap { margin: 0; padding: 0; } .food-label { border-radius: 0; } }

/* role panel tone: soft lavender */
.panel-chip.violet, .panel-chip.role-hostel { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
[data-theme="dark"] .panel-chip.violet, [data-theme="dark"] .panel-chip.role-hostel { background: rgba(139, 92, 246, 0.16); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.32); }
.nav .sp { flex: 1; }
.role-only { display: block; }

/* ====== 03-animation: scroll reveal, hero motion, scroll-expand film ====== */
/* ================= ANIMATION ROUND ================= */
/* ---------- scroll reveal: FadeContent effects ----------
   One reveal system, four looks chosen per section via [data-fx]:
   (default) fade-rise · focus = 12px blur -> sharp (impact numbers) ·
   develop = greyscale -> colour (gallery / sponsor imagery) ·
   mist = a soft mask edge drifts across (hero-adjacent, how-it-works).
   Every end state returns filters to their neutral value so text
   renders crisp and hover transitions behave as before. */
.rv-on .rv { opacity: 0; transform: translateY(22px); }
.rv-on .rv.in { opacity: 1; transform: translateY(0); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 0.7, 0.26, 1); transition-delay: var(--d, 0s); }

/* FOCUS — out of a 12px blur into sharp focus, with a hint of settle */
.rv-on .rv[data-fx="focus"] { filter: blur(12px); transform: translateY(10px) scale(0.985); }
.rv-on .rv[data-fx="focus"].in { filter: blur(0); transform: translateY(0) scale(1); transition: opacity 0.7s ease, filter 0.9s ease, transform 0.9s cubic-bezier(0.16, 0.7, 0.26, 1); transition-delay: var(--d, 0s); }

/* DEVELOP — washed-out grey develops into full colour */
.rv-on .rv[data-fx="develop"] { filter: grayscale(1) contrast(0.62) brightness(1.28) blur(2px); transform: translateY(8px); }
.rv-on .rv[data-fx="develop"].in { filter: grayscale(0) contrast(1) brightness(1) blur(0); transform: translateY(0); transition: opacity 0.8s ease, filter 1.15s ease, transform 0.8s cubic-bezier(0.16, 0.7, 0.26, 1); transition-delay: var(--d, 0s); }

/* MIST — a soft gradient edge drifts across as the section materialises;
   at mask-position 100% the mask is fully opaque, and JS adds .fx-done
   after the transition to remove the mask altogether */
.rv-on .rv[data-fx="mist"] { transform: translateY(14px); filter: blur(3px);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 42%, #000 100%);
  -webkit-mask-size: 300% 100%; -webkit-mask-position: 0% 0; -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(100deg, transparent 0%, #000 42%, #000 100%);
  mask-size: 300% 100%; mask-position: 0% 0; mask-repeat: no-repeat; }
.rv-on .rv[data-fx="mist"].in { transform: translateY(0); filter: blur(0); -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 0.7, 0.26, 1), filter 1s ease, -webkit-mask-position 1.25s ease, mask-position 1.25s ease; transition-delay: var(--d, 0s); }
.rv-on .rv.fx-done { -webkit-mask-image: none; mask-image: none; }

/* phones: lighter travel + softer blur so the effects stay cheap */
@media (max-width: 760px) {
  .rv-on .rv { transform: translateY(14px); }
  .rv-on .rv[data-fx="focus"] { filter: blur(8px); transform: translateY(6px) scale(0.99); }
  .rv-on .rv[data-fx="develop"] { filter: grayscale(1) contrast(0.7) brightness(1.18) blur(1px); transform: translateY(5px); }
  .rv-on .rv[data-fx="mist"] { transform: translateY(8px); filter: blur(2px); }
}

/* reduced motion: no blur, no greyscale, no mask — content is simply there */
@media (prefers-reduced-motion: reduce) {
  .rv-on .rv, .rv-on .rv[data-fx="focus"], .rv-on .rv[data-fx="develop"], .rv-on .rv[data-fx="mist"] {
    opacity: 1 !important; transform: none !important; filter: none !important;
    -webkit-mask-image: none !important; mask-image: none !important; transition: none !important;
  }
}

/* ---------- view switching ---------- */
.view.active { animation: viewin 0.38s cubic-bezier(0.2, 0.7, 0.25, 1); }

/* ---------- hero motion ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -30px -6% auto; height: 430px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(430px 230px at 16% 32%, rgba(46, 139, 82, 0.15), transparent 70%),
    radial-gradient(470px 250px at 84% 18%, rgba(232, 106, 30, 0.13), transparent 70%);
  animation: heroSheen 11s ease-in-out infinite alternate;
}
@keyframes heroSheen { from { transform: translateX(-2.5%) translateY(0); } to { transform: translateX(2.5%) translateY(10px); } }
.hero > * { position: relative; z-index: 1; }
.hero img.logo { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- hover polish ---------- */
.card, .stat, .step, .gal-card, .big-stat { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease; }
.stat:hover, .step:hover, .gal-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(10, 53, 32, 0.18); border-color: var(--green-500); }
.big-stat:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(10, 53, 32, 0.22); }
#view-home .card:hover, #ngo-board .card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(10, 53, 32, 0.18); }
.btn:hover { transform: translateY(-1px); }
.picker button { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease; }
.picker button:hover { transform: translateY(-2px); border-color: var(--green-500); box-shadow: var(--shadow); }
.listing:hover { box-shadow: 0 12px 26px rgba(10, 53, 32, 0.13); }
.faq-item { transition: box-shadow 0.25s ease, transform 0.25s ease; }
.faq-item:hover { box-shadow: 0 12px 26px rgba(10, 53, 32, 0.14); }

/* ---------- hero film: scroll-expand (homepage) ----------
   Vanilla port of the React Bits ScrollExpand pattern: the rescue film
   starts as a framed card under the headline and expands to full bleed
   as the page scrolls (sticky stage, window-scroll driven, rAF + lerp).
   With prefers-reduced-motion the whole pin/expand layer is off and the
   hero renders as a plain static block — see the media query below. */
.se { position: relative; width: 100%; }
/* track height is reserved in CSS at (approximately) the driver's
   expand + hold runway so the page does not shift when the driver
   script measures and sets the exact height (CLS guard) */
.se-track { position: relative; width: 100%; height: calc((100vh - 68px) * 2.23); height: calc((100dvh - 68px) * 2.23); }
@media (max-width: 760px) { .se-track { height: calc((100vh - 68px) * 1.82); height: calc((100dvh - 68px) * 1.82); } }
.se-stage { position: sticky; top: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); }
.se-frame { position: absolute; inset: 0; background: var(--green-950); clip-path: inset(10% 19% 10% 19% round 24px); will-change: clip-path; }
.se-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform-origin: center; will-change: transform; user-select: none; -webkit-user-drag: none; }
/* resting-state scrim: a strong dark wash inside the frame so the
   headline copy stays crisp over the film at rest; the driver eases
   its opacity from restScrim down to overlayScrim as the frame
   expands to full bleed. */
.se-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(2, 12, 7, 0.88), rgba(2, 12, 7, 0.52) 48%, rgba(2, 12, 7, 0.62)); opacity: 0.62; }
/* the overlay starts hidden from the accessibility tree as well as
   visually (visibility + aria-hidden in markup, both lifted by the
   driver only as the frame expands) so the document's first heading
   stays the H1 in the title block */
.se-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6%; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.se-overlay h2 { color: #fff; font-size: clamp(26px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.se-overlay p { color: rgba(255, 255, 255, 0.92); max-width: 680px; margin: 12px auto 0; font-size: 16.5px; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); }
/* the title box matches the resting frame's geometry (insets mirror
   the driver's startWidth/startHeight), so at rest every line of the
   overlay copy — login line included — sits inside the frame, and
   the CTA row wraps within the frame's width, never past its edge */
.se-stage .se-title {
  position: absolute; inset: 10% 19%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 22px; pointer-events: none; will-change: opacity, transform;
  background: radial-gradient(78% 74% at 50% 50%, rgba(5, 26, 16, 0.5), rgba(5, 26, 16, 0) 80%);
}
.se-title .cta-row { width: 100%; }
.se-title .cta-row, .se-title .se-login-line { pointer-events: auto; }
.se-title.se-off .cta-row, .se-title.se-off .se-login-line { pointer-events: none; }
.se-title img.logo { width: 104px; height: 104px; max-width: 40vw; object-fit: contain; background: #ffffff; border-radius: 20px; padding: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.se-title h1 { color: #ffffff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.se-title h1 .re { color: #a9e8c3; }
.se-title h1 .plate { color: #ffb27a; }
.se-title .tag { color: #eaf5ee; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); }
.se-title .sub { color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.6); }
.se-title .sub b { color: #ffffff; }
.se-login-line { margin: 18px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.se-login-line .addlink { color: #a9e8c3; }
/* pill treatment: on phones the hint lands on the film itself, so it
   carries its own dark backing — white bold text stays readable over
   the video and over the page background alike, in both themes */
.se-hint { position: absolute; left: 50%; right: auto; transform: translateX(-50%); bottom: 1.1rem; z-index: 3; text-align: center; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.02em; color: #fff; background: rgba(4, 24, 14, 0.78); border: 1px solid rgba(255, 255, 255, 0.35); padding: 7px 16px; border-radius: 999px; white-space: nowrap; pointer-events: none; will-change: opacity, transform; }
.se-hint-arrow { display: inline-block; animation: seHintBob 1.8s ease-in-out infinite; }
@keyframes seHintBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Inline SVG icons (Phosphor sprite, rendered via the shared/icons.html macro).
   Default is 20px from the SVG's width/height attrs; modifiers resize, and the
   negative vertical-align seats an icon on a line of text next to a label. */
.sp-icon { vertical-align: -0.15em; flex: none; }
.sp-icon.sm { width: 16px; height: 16px; }
.sp-icon.lg { width: 24px; height: 24px; }
.sp-icon.xl { width: 38px; height: 38px; }
@media (max-width: 760px) {
  .se-frame { clip-path: inset(8% 8% 8% 8% round 24px); }
  /* shift the film's focal point left on phones so the van's painted
     logo sits toward the frame's right edge, clear of the centred
     hero paragraph (desktop framing is untouched) */
  .se-media { object-position: 36% 50%; }
  .se-hint { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* the title box matches the mobile resting frame (insets mirror
     the driver's mobile startWidth/startHeight) and stays centered,
     with compact copy sizes, so the whole hero copy — login line
     included — fits inside the frame and clear of the mobile bar */
  .se-stage .se-title { inset: 8% 8%; justify-content: center; padding: 12px 10px 14px; background: radial-gradient(88% 80% at 50% 50%, rgba(5, 26, 16, 0.52), rgba(5, 26, 16, 0) 80%); }
  .se-stage .se-title img.logo { width: 56px; height: 56px; padding: 5px; border-radius: 14px; }
  .se-stage .se-title h1 { font-size: 31px; margin-top: 6px; }
  .se-title .tag { font-size: 16.5px; margin-top: 4px; }
  .se-title .sub { font-size: 13px; line-height: 1.42; margin-top: 8px; }
  .se-title .cta-row { margin-top: 12px; }
  .se-stage .se-title .btn { padding: 9px 10px; font-size: 13px; }
  .se-login-line { margin-top: 10px; font-size: 12.5px; }
}
/* reduced motion: no pin, no expand — a plain static hero */
@media (prefers-reduced-motion: reduce) {
  .se-track { height: auto !important; }
  .se-stage { position: static; height: auto; overflow: visible; display: flex; flex-direction: column; }
  .se-stage .se-title { position: static; order: 1; opacity: 1 !important; transform: none !important; visibility: visible !important; pointer-events: auto; background: none; padding: 36px 20px 4px; }
  .se-title .cta-row, .se-title .se-login-line { pointer-events: auto; }
  .se-title img.logo { width: 200px; height: 200px; background: none; border-radius: 0; padding: 0; box-shadow: none; }
  .se-title h1 { color: var(--ink); text-shadow: none; }
  .se-title h1 .re { color: var(--green-900); }
  .se-title h1 .plate { color: var(--orange); }
  .se-title .tag { color: var(--green-700); text-shadow: none; }
  .se-title .sub { color: var(--muted); text-shadow: none; }
  .se-title .sub b { color: var(--ink); }
  .se-login-line { color: var(--muted); text-shadow: none; }
  .se-login-line .addlink { color: var(--green-700); }
  .se-frame { position: relative; order: 2; clip-path: none !important; animation: none; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: var(--surface); display: flex; flex-direction: column; width: min(1080px, calc(100% - 40px)); margin: 26px auto 8px; }
  .se-scrim { display: none; }
  .se-overlay { position: static; order: -1; opacity: 1 !important; visibility: visible !important; transform: none !important; align-items: flex-start; text-align: left; padding: 22px 22px 4px; }
  .se-overlay h2 { color: var(--ink); text-shadow: none; }
  .se-overlay p { color: var(--muted); text-shadow: none; margin: 8px 0 14px; }
  .se-media { position: relative; inset: auto; height: auto; aspect-ratio: 1280 / 548; transform: none !important; }
  .se-hint { display: none; }
  .se-hint-arrow { animation: none; }
}
.stage-fallback { padding: 28px 24px; border: 1px solid var(--line); border-radius: 18px; margin-top: 14px; }
.stage-fallback h3 { font-size: 18px; margin: 0 0 6px; }
.stage-fallback p { color: var(--muted); font-size: 14.5px; margin: 0; max-width: 660px; }
.stage-fallback ol { margin: 14px 0 0; padding-left: 20px; color: var(--muted); font-size: 14.5px; }
.stage-fallback ol li { margin: 5px 0; }
.stage-fallback ol b { color: var(--ink); }

/* ---------- text-loop ribbon (homepage, below the hero) ----------
   Vanilla port of the React Bits TextLoop pattern: the FSSAI line
   "SAVE FOOD ✦ SHARE FOOD ✦ SHARE JOY" flows along a gentle wave
   path (SVG textPath + a small rAF loop, no GSAP) over a solid
   brand-orange band. Decorative only — aria-hidden, with an
   sr-only line of text beside it for screen readers. */
.tl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-loop {
  --tl-ribbon: #c25707;
  position: relative; width: 100%; height: 180px; margin-top: 14px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
[data-theme="dark"] .text-loop { --tl-ribbon: #b34a06; }
.text-loop-svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(880px, 100%, 1500px); height: auto; display: block; }
#tl-path { stroke: var(--tl-ribbon); }
.text-loop-text { font-family: "Sora", "Public Sans", sans-serif; fill: #ffffff; user-select: none; }
.text-loop-measure { font-family: "Sora", "Public Sans", sans-serif; visibility: hidden; pointer-events: none; }
@media (max-width: 760px) {
  .text-loop { height: 118px; margin-top: 10px; }
  .text-loop-svg { width: 720px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .hero img.logo, .hero::before { animation: none !important; }
  .card, .stat, .step, .gal-card, .big-stat, .btn { transition: none; }
  .stat:hover, .step:hover, .gal-card:hover, .big-stat:hover, #view-home .card:hover, #ngo-board .card:hover, .btn:hover, .picker button:hover { transform: none; }
}

/* ====== 09-motion: ripple, confetti, micro-interactions, marquee ====== */
/* ================= MOTION PASS 2: premium micro-interactions ================= */
/* ---------- 1 · hero cinema ---------- */
@keyframes heroUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroVideoIn { from { opacity: 0; transform: scale(1.06) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes logoGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(232, 106, 30, 0)); } 50% { filter: drop-shadow(0 6px 16px rgba(232, 106, 30, 0.30)); } }
@keyframes blobDrift { from { transform: translateX(3%) translateY(0) scale(1); } to { transform: translateX(-3%) translateY(16px) scale(1.06); } }
.hero::after {
  content: ""; position: absolute; inset: auto -8% -40px; height: 300px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(380px 200px at 78% 60%, rgba(46, 139, 82, 0.12), transparent 70%),
    radial-gradient(340px 190px at 22% 70%, rgba(232, 106, 30, 0.10), transparent 70%);
  animation: blobDrift 16s ease-in-out infinite alternate;
}
.hero > *:not(.logo) { animation: heroUp 0.65s cubic-bezier(0.2, 0.7, 0.25, 1) both; }
.hero > h1 { animation-delay: 0.05s; }
.hero > .tag { animation-delay: 0.12s; }
.hero > .sub { animation-delay: 0.2s; }
.hero > .cta-row { animation-delay: 0.28s; }
.hero > p:last-child { animation-delay: 0.36s; }
.hero img.logo { animation: heroFade 0.8s ease both, floaty 6s ease-in-out 0.9s infinite, logoGlow 3.4s ease-in-out 1s infinite; }
.hero .tag .w { display: inline-block; animation: heroUp 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; animation-delay: calc(0.3s + var(--wi, 0) * 0.09s); }
.cta-row > * { animation: heroUp 0.5s cubic-bezier(0.2, 0.7, 0.25, 1) both; }
.cta-row > *:nth-child(1) { animation-delay: 0.34s; } .cta-row > *:nth-child(2) { animation-delay: 0.41s; }
.cta-row > *:nth-child(3) { animation-delay: 0.48s; } .cta-row > *:nth-child(4) { animation-delay: 0.55s; }
.cta-row > *:nth-child(5) { animation-delay: 0.62s; } .cta-row > *:nth-child(6) { animation-delay: 0.69s; }
.se-frame { animation: heroVideoIn 1s cubic-bezier(0.22, 0.7, 0.25, 1) 0.15s both; }

/* ---------- 2 · micro-interactions ---------- */
.btn, .mini { position: relative; overflow: hidden; }
.btn .ripple, .mini .ripple { position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none; animation: rippleOut 0.55s ease-out forwards; }
@keyframes rippleOut { to { transform: scale(2.6); opacity: 0; } }
.btn:active { transform: scale(0.96); }
.mini { transition: transform 0.1s ease, background 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.mini:active { transform: scale(0.93); }
.card:hover { border-color: var(--green-500); box-shadow: 0 12px 28px rgba(10, 53, 32, 0.15), 0 0 0 3px rgba(46, 139, 82, 0.10); }
.listing:hover { border-color: var(--green-500); box-shadow: 0 12px 26px rgba(10, 53, 32, 0.13), 0 0 0 3px rgba(46, 139, 82, 0.08); }
.icon-btn { transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.icon-btn:hover svg { animation: bellWiggle 0.5s ease; transform-origin: 50% 0; }
@keyframes bellWiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 70% { transform: rotate(6deg); } 85% { transform: rotate(-3deg); } }
.navlinks button { position: relative; transition: color 0.15s ease, background 0.15s ease; }
.atab, .viewtabs button, .auth-tabs button { position: relative; transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease; text-decoration: none !important; }
.navlinks button::after,
.navlinks .atab::after,
.atab::after,
.viewtabs button::after,
.auth-tabs button::after,
.atab.on::after,
.viewtabs button.on::after,
.auth-tabs button.on::after {
  display: none !important;
  content: none !important;
}

/* ---------- 3 · view transitions (240ms ease-out) ---------- */
@keyframes viewin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view.active { animation: viewin 0.24s ease-out; }
@keyframes chipDown { from { opacity: 0; transform: translateY(-10px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes headIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.view.active .panel-chip { animation: chipDown 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.04s both; }
.view.active .sec > h2 { animation: headIn 0.3s ease-out both; }
.gate-lock { animation: checkPop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.15s both; }

/* ---------- 4 · data animation ---------- */
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.chart-box rect.chart-bar, .chart-box rect.chart-bar-o { transform-box: fill-box; transform-origin: 50% 100%; animation: barGrow 0.65s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.chart-box rect:nth-of-type(2) { animation-delay: 0.06s; } .chart-box rect:nth-of-type(3) { animation-delay: 0.12s; }
.chart-box rect:nth-of-type(4) { animation-delay: 0.18s; } .chart-box rect:nth-of-type(5) { animation-delay: 0.24s; }
.chart-box rect:nth-of-type(6) { animation-delay: 0.30s; } .chart-box rect:nth-of-type(7) { animation-delay: 0.36s; }
@keyframes dotIn { from { opacity: 0; } to { opacity: 1; } }
.chart-box .chart-dot, .chart-box .chart-val { animation: dotIn 0.4s ease 0.55s both; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
#lb-donors .rank-row, #lb-ngos .rank-row { animation: rowIn 0.45s ease both; }
#lb-donors .rank-row:nth-child(2), #lb-ngos .rank-row:nth-child(2) { animation-delay: 0.06s; }
#lb-donors .rank-row:nth-child(3), #lb-ngos .rank-row:nth-child(3) { animation-delay: 0.12s; }
#lb-donors .rank-row:nth-child(4), #lb-ngos .rank-row:nth-child(4) { animation-delay: 0.18s; }
#lb-donors .rank-row:nth-child(5), #lb-ngos .rank-row:nth-child(5) { animation-delay: 0.24s; }
#lb-donors .rank-row:nth-child(6), #lb-ngos .rank-row:nth-child(6) { animation-delay: 0.30s; }
.rank-row .medal { display: inline-block; animation: checkPop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.15s both; }

/* ---------- 5 · feedback moments ---------- */
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toastShake { 0%, 100% { transform: translateX(0); } 18% { transform: translateX(-7px); } 38% { transform: translateX(6px); } 58% { transform: translateX(-4px); } 78% { transform: translateX(2px); } }
@keyframes checkPop { 0% { transform: scale(0); } 70% { transform: scale(1.28); } 100% { transform: scale(1); } }
.toast { animation: toastIn 0.38s cubic-bezier(0.2, 1.1, 0.3, 1) both; }
.toast.err { animation: toastIn 0.3s ease both, toastShake 0.45s ease 0.06s; }
.toast .t-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; line-height: 1; margin-top: 1px; animation: checkPop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 0.1s both; }
.toast.err .t-ic { background: var(--orange); }
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.confetti-layer i { position: absolute; width: 9px; height: 13px; border-radius: 2px; display: block; }
.badge-chip { position: relative; overflow: hidden; animation: chipIn 0.35s ease both; }
.badge-chip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.65) 50%, transparent 60%); transform: translateX(-130%); pointer-events: none; }
.badge-chip:hover::after { transition: transform 0.6s ease; transform: translateX(130%); }

/* ---------- 6 · content life ---------- */
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #e0342b; margin-right: 9px; vertical-align: 3px; animation: livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 52, 43, 0.45); transform: scale(1); } 50% { box-shadow: 0 0 0 6px rgba(224, 52, 43, 0); transform: scale(1.15); } }
@keyframes cdpulse2 { 0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.35); transform: scale(1); } 50% { box-shadow: 0 0 0 5px rgba(179, 38, 30, 0); transform: scale(1.045); } }
.cd-chip.urgent { animation: cdpulse2 2.2s ease-in-out infinite; }
@keyframes listingIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes sheenMove { from { background-position: 135% 0; } to { background-position: -135% 0; } }
.listing { position: relative; animation: listingIn 0.4s ease both; }
.listing::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.38) 50%, transparent 58%); background-size: 280% 100%; background-position: 135% 0; animation: sheenMove 1s ease 0.1s both; }
[data-theme="dark"] .listing::after { background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.13) 50%, transparent 58%); background-size: 280% 100%; }
#ngo-board > .listing:nth-child(2) { animation-delay: 0.05s; } #ngo-board > .listing:nth-child(3) { animation-delay: 0.1s; }
#ngo-board > .listing:nth-child(4) { animation-delay: 0.15s; } #ngo-board > .listing:nth-child(5) { animation-delay: 0.2s; }
#ngo-board > .listing:nth-child(6) { animation-delay: 0.25s; } #ngo-board > .listing:nth-child(7) { animation-delay: 0.3s; }
.faq-a { display: block; max-height: 0; overflow: hidden; padding: 0 18px; transition: max-height 0.38s ease, padding 0.38s ease; }
.faq-item.open .faq-a { max-height: 640px; padding: 0 18px 16px; }
.faq-chev { transition: transform 0.3s ease; display: inline-block; }
.wall-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.wall-track { display: flex; width: max-content; animation: marqueeMove 38s linear infinite; }
.wall-marquee:hover .wall-track, .wall-marquee:focus-within .wall-track { animation-play-state: paused; }
.wall-track > .card { width: 330px; max-width: 82vw; flex: none; margin-right: 16px; }
@keyframes marqueeMove { to { transform: translateX(-50%); } }

/* ---------- 7 · modals & overlays ---------- */
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { 0% { opacity: 0; transform: scale(0.94) translateY(12px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.modal-overlay.open, .modal-overlay[style*="display: flex"] { animation: overlayIn 0.28s ease both; }
.modal-overlay.open .modal, .modal-overlay.open .modal-dialog, .modal-overlay[style*="display: flex"] .modal, .modal-overlay[style*="display: flex"] .modal-dialog { animation: modalPop 0.35s cubic-bezier(0.18, 1.35, 0.36, 1) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
.notif-panel.open { animation: panelIn 0.25s ease both; transform-origin: top right; }
@keyframes chatIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
.chat-panel.open { animation: chatIn 0.32s cubic-bezier(0.2, 1.15, 0.3, 1) both; }
.mnav-sheet.open { animation: panelIn 0.25s ease both; }

/* ---------- 9 · nav life ---------- */
@keyframes chipIn { from { opacity: 0; transform: scale(0.86) translateY(-3px); } to { opacity: 1; transform: none; } }
.user-chip { animation: chipIn 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
#user-role { animation: checkPop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) 0.12s both; }
@keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 106, 30, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(232, 106, 30, 0); } }
#admin-badge, #notif-badge { animation: badgePulse 2.4s ease-in-out infinite; }
.mnav button { position: relative; transition: color 0.2s ease, background 0.2s ease; }
.mnav button::before { content: ""; position: absolute; top: 0; left: 50%; width: 30px; height: 3px; border-radius: 0 0 4px 4px; background: var(--orange); transform: translateX(-50%) scaleX(0); transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.mnav button.active::before { transform: translateX(-50%) scaleX(1); }

/* ---------- mobile hero tightening: first-screen links clear the fixed bottom bar ---------- */
@media (max-width: 900px) {
  .hero { padding-top: 14px; }
  .hero img.logo { width: 112px; height: 112px; }
  .hero .sub { margin-top: 12px; }
  .hero .cta-row { margin-top: 20px; }
  .hero .cta-row > span { flex: 1 1 44%; display: flex; }
  .hero .cta-row > span > * { flex: 1; justify-content: center; text-align: center; }
}

/* ---------- reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .hero img.logo { animation: none !important; }
  .listing::after, .badge-chip::after { display: none; }
}

/* ===========================================================================
   Hero film banner.
   Replaces the scroll-expand hero, which reserved roughly 2.2 screens of
   scroll for itself and pushed the real content far below the fold. This is
   one screen, full bleed, and the page continues immediately under it.
   =========================================================================== */
.hero-film {
  position: relative;
  overflow: hidden;
  background: var(--green-950);
  min-height: clamp(460px, 76vh, 700px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-film > video,
.hero-film > img#hero-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  /* a slow drift keeps the frame alive without hijacking the scroll */
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift { from { transform: scale(1.06) translateX(-1%); } to { transform: scale(1.12) translateX(1%); } }

/* Dark enough for white text to pass contrast over any frame of the film. */
.hero-film .hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(3, 18, 10, 0.74), rgba(3, 18, 10, 0.60) 45%, rgba(3, 18, 10, 0.86)),
    radial-gradient(64% 56% at 50% 46%, rgba(3, 18, 10, 0.42), transparent 78%);
}

.hero-film .hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 780px;
  padding: 64px 22px 70px;
}
.hero-film .hero-logo {
  width: 96px; height: 96px; object-fit: contain;
  background: #fff; border-radius: 22px; padding: 9px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.hero-film h1 {
  font-family: "Sora", sans-serif;
  font-size: clamp(38px, 7vw, 68px);
  font-weight: 800; letter-spacing: -0.03em;
  margin-top: 14px; line-height: 1.02;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.45);
}
.hero-film h1 .re { color: #a9e8c3; }
.hero-film h1 .plate { color: #ffb27a; }
.hero-film .tag {
  font-family: "Sora", sans-serif;
  font-size: clamp(17px, 2.6vw, 23px); font-weight: 600;
  color: #eaf5ee; margin: 12px 0 0;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.hero-film .sub {
  max-width: 660px; margin: 16px auto 0;
  color: rgba(255, 255, 255, 0.95); font-size: 16.5px; line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.hero-film .sub b { color: #fff; }
.hero-film .cta-row { justify-content: center; margin-top: 28px; }
.hero-film .btn.ghost { background: rgba(255, 255, 255, 0.95); border-color: transparent; }
.hero-film .hero-login {
  margin: 18px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.hero-film .hero-login a { color: #a9e8c3; font-weight: 700; }

@media (max-width: 640px) {
  .hero-film { min-height: clamp(420px, 68vh, 560px); }
  .hero-film .hero-inner { padding: 48px 18px 54px; }
  .hero-film .hero-logo { width: 72px; height: 72px; border-radius: 18px; }
  .hero-film .cta-row .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-film > video, .hero-film > img#hero-video-poster { animation: none; transform: none; }
}

/* Sign in with Google */
.btn.google {
  background: #fff; color: #3c4043; border: 1.5px solid var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,.06); font-weight: 600;
}
.btn.google:hover { background: #f7faf7; border-color: #b9ccb4; }
[data-theme="dark"] .btn.google { background: var(--surface); color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .btn.google:hover { background: var(--surface-2); }
.or { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; color: var(--muted); font-size: 12.5px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Top nav: flat links, with your own panel marked as yours. */
/* the product UI put the nav on its own second row (order:10, 100% width);
   with three flat links it belongs beside the brand instead */
.navlinks { order: 0; flex: 0 1 auto; border-top: none; padding-top: 0; margin-top: 0; gap: 4px; }
.navlinks .atab.mine { color: var(--green-900); background: var(--green-100); }
.navlinks .atab.mine::before { content: "●"; font-size: 8px; vertical-align: 2px; margin-right: 6px; color: var(--green-500); }
.navlinks .atab.mine.on { background: var(--green-900); color: #fff; }
.navlinks .atab.mine.on::before { color: #a9e8c3; }
[data-theme="dark"] .navlinks .atab.mine { color: #8fe0ab; }
[data-theme="dark"] .navlinks .atab.mine.on { background: var(--green-700); color: #fff; }

/* inline "fix a detail" on an unclaimed listing */
.edit-listing { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.edit-listing summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--green-700); }
[data-theme="dark"] .edit-listing summary { color: #8fe0ab; }

/* ===========================================================================
   SavePlate — Public Community, Social, Leaderboard, Events, Sponsors & Help
   =========================================================================== */

/* Navigation link tweaks for header */
.navlinks .atab {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 13.5px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  transition: all 0.15s ease;
}
.navlinks .atab:hover {
  background: var(--surface-2);
  color: var(--green-900);
}
.navlinks .atab.on {
  background: var(--green-900);
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(10, 53, 32, 0.25);
}
[data-theme="dark"] .navlinks .atab:hover {
  background: var(--surface-2);
  color: #a9e8c3;
}
[data-theme="dark"] .navlinks .atab.on {
  background: var(--green-700);
  color: #ffffff !important;
}

/* Panel chips / badges (Modern soft pastel design system) */
.panel-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2.5px 9px;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  line-height: 1.35;
  vertical-align: middle;
  margin-bottom: 4px;
}
.panel-chip.orange, .panel-chip.role-ngo, .panel-chip.ngo {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.panel-chip.deep, .panel-chip.role-admin, .panel-chip.admin {
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
}
.panel-chip.violet, .panel-chip.role-hostel, .panel-chip.hostel {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}
.panel-chip.role-donor, .panel-chip.donor {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
[data-theme="dark"] .panel-chip,
[data-theme="dark"] .panel-chip.role-donor {
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.32);
}
[data-theme="dark"] .panel-chip.orange,
[data-theme="dark"] .panel-chip.role-ngo {
  background: rgba(249, 115, 22, 0.16);
  color: #fdba74;
  border-color: rgba(249, 115, 22, 0.32);
}
[data-theme="dark"] .panel-chip.deep,
[data-theme="dark"] .panel-chip.role-admin {
  background: rgba(14, 165, 233, 0.16);
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, 0.32);
}
[data-theme="dark"] .panel-chip.violet,
[data-theme="dark"] .panel-chip.role-hostel {
  background: rgba(139, 92, 246, 0.16);
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.32);
}

/* Filter chips */
.chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 14px;
}
.fchip {
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.fchip:hover {
  background: var(--surface-2);
  border-color: var(--green-700);
  transform: translateY(-1px);
}
.fchip.sel {
  background: var(--green-900);
  color: #ffffff !important;
  border-color: var(--green-900);
  box-shadow: 0 2px 6px rgba(10, 53, 32, 0.2);
}
[data-theme="dark"] .fchip {
  background: var(--surface-2);
  border-color: var(--line);
}
[data-theme="dark"] .fchip.sel {
  background: var(--green-700);
  color: #ffffff !important;
}

/* Community listing cards */
.dist-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--green-700);
  background: var(--green-100);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
[data-theme="dark"] .dist-badge {
  color: #a9e8c3;
  background: rgba(46, 139, 82, 0.3);
}
.comm-note {
  font-size: 12.5px;
  color: var(--muted);
  margin: 8px 0 0;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  line-height: 1.4;
}

/* Gallery & Social */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.gal-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.gal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10, 53, 32, 0.16);
  border-color: var(--green-500);
}
.gal-card .gal-img {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, var(--green-950), var(--green-700));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 40px;
  position: relative;
  overflow: hidden;
}
.gal-card .gal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gal-card .gal-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  backdrop-filter: blur(4px);
}
.gal-body {
  padding: 14px 16px;
}
.gal-cap {
  font-size: 14.5px;
  line-height: 1.45;
  margin: 0 0 12px;
  color: var(--ink);
}
.gal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.gal-author {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

/* Like Button */
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.like-btn:hover {
  background: #ffebee;
  border-color: #ff4d6d;
  color: #ff4d6d;
  transform: scale(1.04);
}
.like-btn .heart-icon {
  color: #ff4d6d;
  font-size: 15px;
}

/* Community Feed */
.feed {
  display: grid;
  gap: 14px;
}
.feed-item {
  display: flex;
  gap: 14px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.feed-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green-900);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
}
.feed-main {
  flex: 1;
  min-width: 0;
}
.feed-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.feed-head .who b {
  font-size: 15px;
}
.feed-head .who span {
  font-size: 12px;
  color: var(--muted);
}
.feed-when {
  font-size: 12px;
  color: var(--muted);
}
.feed-text {
  font-size: 14.5px;
  line-height: 1.5;
  margin: 6px 0 8px;
  color: var(--ink);
}

/* Leaderboard */
.lb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 14px;
}
.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  margin-bottom: 8px;
  transition: transform 0.12s ease;
}
.lb-row:hover {
  transform: translateX(3px);
  border-color: var(--green-500);
}
.lb-rank {
  font-family: "Sora", sans-serif;
  font-size: 16px;
  font-weight: 800;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lb-row:nth-child(1) .lb-rank {
  background: #ffd700;
  color: #000;
}
.lb-row:nth-child(2) .lb-rank {
  background: #c0c0c0;
  color: #000;
}
.lb-row:nth-child(3) .lb-rank {
  background: #cd7f32;
  color: #fff;
}
.lb-avatar-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.lb-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lb-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.22));
  color: #065F46;
}
[data-theme="dark"] .lb-avatar-initials {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.35));
  color: #6ee7b7;
}
.lb-avatar-initials.ngo {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(234, 88, 12, 0.22));
  color: #9A3412;
}
[data-theme="dark"] .lb-avatar-initials.ngo {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(234, 88, 12, 0.35));
  color: #fdba74;
}
.lb-info {
  flex: 1;
  min-width: 0;
}
.lb-name {
  font-weight: 700;
  font-size: 14.5px;
}
.lb-sub {
  font-size: 12.5px;
  color: var(--muted);
}
.lb-stat {
  text-align: right;
  flex-shrink: 0;
}
.lb-stat .num {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--green-900);
}
[data-theme="dark"] .lb-stat .num {
  color: #a9e8c3;
}
.lb-stat .unit {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
}

/* Badges showcase */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.badge-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.badge-card .b-icon {
  font-size: 26px;
  flex-shrink: 0;
}
.badge-card h4 {
  font-size: 13.5px;
  font-weight: 700;
  margin: 0 0 4px;
}
.badge-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

/* Event Drives */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 14px;
}
.event-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.event-card .ev-title {
  font-size: 16px;
  font-weight: 800;
  margin: 6px 0;
}
.event-card .ev-meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}
.event-card .ev-kg {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--orange-dark);
}

/* Needs Board */
.need-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-top: 14px;
}
.need-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
  position: relative;
}
.need-urgency {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--danger);
  background: var(--danger-bg);
  padding: 3px 8px;
  border-radius: 999px;
}

/* FAQ accordion / items */
.faq-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.faq-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 6px rgba(10, 53, 32, 0.04);
}
.faq-card summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--green-950);
}
[data-theme="dark"] .faq-card summary {
  color: #a9e8c3;
}
.faq-card p {
  margin: 10px 0 0;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.55;
}

/* ==========================================================================
   IMAGE PREVIEW & ADJUSTMENT WIDGET (PAN, ZOOM, ROTATE)
   ========================================================================== */
.img-adjust-widget {
  margin-top: 10px;
  background: var(--surface-2, #f1f5f9);
  border: 1.5px solid var(--line, #cbd5e1);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  font-family: var(--font-sans);
}
.ia-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ia-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #0f172a);
}
.ia-zoom-badge {
  font-size: 11px;
  font-weight: 800;
  background: var(--green-100, #dcfce7);
  color: var(--green-900, #15803d);
  padding: 2px 8px;
  border-radius: 999px;
  font-feature-settings: "tnum";
}
.ia-viewport-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 220px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  background: #0f172a;
  box-shadow: inset 0 0 16px rgba(0,0,0,0.4);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.ia-viewport-wrap.ia-dragging {
  cursor: grabbing;
}
.ia-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ia-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-image: linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 33.333% 33.333%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ia-viewport-wrap:hover .ia-grid-overlay,
.ia-viewport-wrap.ia-dragging .ia-grid-overlay {
  opacity: 1;
}
.ia-hint {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.75);
  color: #f8fafc;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.ia-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ia-control-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ia-pan-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ia-pan-row {
  display: flex;
  gap: 2px;
}
.ia-zoom-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}
.ia-zoom-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ia-slider {
  flex: 1;
  accent-color: var(--green-700, #16a34a);
  cursor: pointer;
  height: 6px;
}
.ia-meta-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.ia-btn {
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #cbd5e1);
  color: var(--ink, #1e293b);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}
.ia-btn:hover {
  background: var(--surface-2, #f8fafc);
  border-color: var(--green-700, #16a34a);
  color: var(--green-900, #0f5132);
}
.ia-btn-pan {
  padding: 3px 6px;
  font-size: 10px;
}