/* ==========================================================================
   MeerutNetwork design system
   Hand-written CSS (no build step) matching the product's Tailwind
   prototype: indigo -> violet brand gradient, slate neutrals, rounded
   card UI, bottom tab bar on mobile / top nav on desktop.
   ========================================================================== */

:root {
  --mn-indigo-50: #fffcec;
  --mn-indigo-100: #fff0b3;
  --mn-indigo-200: #ffe99c;
  --mn-indigo-300: #ffd54a;
  --mn-indigo-400: #ffcf33;
  --mn-indigo-600: #f5b700;
  --mn-indigo-700: #17171a;
  --mn-indigo-900: #0d0d0f;
  --mn-indigo-950: #000000;
  --mn-violet-600: #17171a;
  --mn-violet-700: #17171a;
  --mn-violet-950: #000000;

  --mn-slate-50: #fafaf7;
  --mn-slate-100: #f1f5f9;
  --mn-slate-200: #e2e8f0;
  --mn-slate-300: #cbd5e1;
  --mn-slate-400: #94a3b8;
  --mn-slate-500: #64748b;
  --mn-slate-600: #475569;
  --mn-slate-700: #334155;
  --mn-slate-800: #1e293b;
  --mn-slate-900: #0f172a;

  --mn-amber-50: #fffbeb;
  --mn-amber-200: #fde68a;
  --mn-amber-300: #fcd34d;
  --mn-amber-500: #f59e0b;
  --mn-amber-600: #d97706;

  --mn-emerald-50: #ecfdf5;
  --mn-emerald-100: #d1fae5;
  --mn-emerald-200: #a7f3d0;
  --mn-emerald-700: #047857;

  --mn-rose-50: #fff1f2;
  --mn-rose-100: #ffe4e6;
  --mn-rose-200: #fecdd3;
  --mn-rose-700: #be123c;

  --mn-violet-50: #fffcec;
  --mn-violet-200: #ffe99c;
  --mn-violet-700: #17171a;

  --mn-orange-300: #fdba74;

  --mn-surface: #ffffff;

  --mn-radius-sm: 0.5rem;
  --mn-radius-md: 0.75rem;
  --mn-radius-lg: 1rem;
  --mn-radius-xl: 1.25rem;
  --mn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --mn-shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.06);
  --mn-shadow-lg: 0 12px 32px -8px rgb(15 23 42 / 0.18);
  --mn-max-width: 72rem;
}

/* Dark mode: neutrals only. Brand yellow, semantic status colors (amber/
   emerald/rose) and the always-black hero/weather/deal-card surfaces are
   unaffected -- they already read correctly on either background. */
:root[data-theme="dark"] {
  --mn-surface: #18181b;
  --mn-slate-50: #0b0b0d;
  --mn-slate-100: #202024;
  --mn-slate-200: #2e2e33;
  --mn-slate-300: #3f3f46;
  --mn-slate-400: #71717a;
  --mn-slate-500: #9a9aa1;
  --mn-slate-600: #b8b8be;
  --mn-slate-700: #d1d1d6;
  --mn-slate-800: #e4e4e7;
  --mn-slate-900: #f5f5f6;
}

/* -------------------------------------------------------------------- */
/* Reset & base                                                          */
/* -------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--mn-slate-50);
  color: var(--mn-slate-900);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding-bottom: 4rem; /* space for mobile bottom tab bar */
  scrollbar-width: thin;
}
@media (min-width: 768px) { body { padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.mn-container {
  max-width: var(--mn-max-width);
  margin-inline: auto;
  padding-inline: 1rem;
}

.mn-section { margin-bottom: 1.5rem; }
.mn-section:last-child { margin-bottom: 0; }

.mn-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.mn-section-heading h2 { font-size: 1rem; font-weight: 800; color: var(--mn-slate-900); }
.mn-section-heading a {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mn-indigo-700);
}
.mn-section-heading a:hover { color: var(--mn-indigo-950); }

.mn-empty {
  border-radius: var(--mn-radius-lg);
  background: var(--mn-surface);
  box-shadow: var(--mn-shadow-sm);
  outline: 1px solid var(--mn-slate-200);
  padding: 1rem;
  font-size: 0.8rem;
  color: var(--mn-slate-400);
}

/* -------------------------------------------------------------------- */
/* Header / nav                                                         */
/* -------------------------------------------------------------------- */

.mn-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--mn-slate-200);
}
[data-theme="dark"] .mn-header { background: rgba(11, 11, 13, 0.92); }
.mn-header-inner {
  max-width: var(--mn-max-width);
  margin-inline: auto;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.mn-brand { display: flex; align-items: center; gap: 0.65rem; min-width: 0; flex-shrink: 0; }
.mn-brand-logo {
  height: 2.6rem;
  width: auto;
  max-width: 60vw;
  border-radius: var(--mn-radius-sm);
  flex-shrink: 0;
}
/* Stays modest through the 768–1024px window where the desktop nav row
   is already visible but hasn't got a wide header to spread out in yet —
   a bigger logo there crowds/overflows the nav (see mn-nav-desktop). */
@media (min-width: 1024px) { .mn-brand-logo { height: 3rem; } }
@media (min-width: 1200px) { .mn-brand-logo { height: 3.5rem; } }
.mn-brand-tag { font-size: 0.68rem; font-weight: 500; color: var(--mn-slate-400); }
.mn-brand-tag--standalone { display: none; white-space: nowrap; }
@media (min-width: 1024px) { .mn-brand-tag--standalone { display: inline; } }

.mn-lang-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.mn-lang-modal[hidden] { display: none; }
.mn-lang-modal-card {
  background: var(--mn-surface);
  border-radius: var(--mn-radius-xl);
  padding: 1.75rem 1.5rem;
  max-width: 22rem;
  width: 100%;
  text-align: center;
  box-shadow: var(--mn-shadow-lg);
}
.mn-lang-modal-title { font-size: 1.05rem; font-weight: 800; color: var(--mn-slate-900); line-height: 1.5; }
.mn-lang-modal-actions { margin-top: 1.25rem; display: flex; gap: 0.6rem; }
.mn-lang-modal-actions form { flex: 1; display: flex; }
.mn-lang-modal-actions .mn-btn { flex: 1; justify-content: center; }

.mn-mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--mn-radius-sm);
  border: none;
  background: var(--mn-slate-100);
  color: var(--mn-slate-700);
  flex-shrink: 0;
}
@media (min-width: 768px) { .mn-mobile-menu-btn { display: none; } }

.mn-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.5);
}
.mn-mobile-menu.is-open { display: block; }
@media (min-width: 768px) { .mn-mobile-menu { display: none !important; } }
.mn-mobile-menu-list {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 78vw;
  max-width: 18rem;
  background: var(--mn-surface);
  box-shadow: var(--mn-shadow-lg);
  padding: 4.2rem 0.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow-y: auto;
}
.mn-mobile-menu-list a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--mn-radius-md);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mn-slate-600);
}
.mn-mobile-menu-list a.is-active { background: var(--mn-indigo-50); color: var(--mn-indigo-700); }
.mn-mobile-menu-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: none;
  background: var(--mn-slate-100);
  color: var(--mn-slate-600);
}

.mn-locality-bar { border-top: 1px solid var(--mn-slate-200); background: var(--mn-slate-50); }
.mn-locality-bar-inner {
  max-width: var(--mn-max-width);
  margin-inline: auto;
  padding: 0.5rem 1rem;
  overflow-x: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.mn-locality-form { display: flex; align-items: center; gap: 0.6rem; flex-wrap: nowrap; flex-shrink: 0; }
.mn-locality-form .mn-select-wrap { min-width: 9.5rem; flex-shrink: 0; }
.mn-locality-form .mn-toggle { flex-shrink: 0; padding: 0.35rem 0.6rem; }
@media (min-width: 768px) { .mn-locality-bar-inner { overflow-x: visible; } }

.mn-live-meter { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; margin-left: auto; }
.mn-live-meter-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--mn-surface);
  color: var(--mn-slate-700);
  outline: 1px solid var(--mn-slate-200);
  white-space: nowrap;
}
.mn-aqi-badge.mn-aqi--good { background: var(--mn-emerald-50); color: var(--mn-emerald-700); outline-color: var(--mn-emerald-200); }
.mn-aqi-badge.mn-aqi--fair { background: var(--mn-emerald-50); color: var(--mn-emerald-700); outline-color: var(--mn-emerald-200); }
.mn-aqi-badge.mn-aqi--moderate { background: var(--mn-amber-50); color: var(--mn-amber-600); outline-color: var(--mn-amber-200); }
.mn-aqi-badge.mn-aqi--poor { background: var(--mn-rose-50); color: var(--mn-rose-700); outline-color: var(--mn-rose-200); }
.mn-aqi-badge.mn-aqi--very-poor { background: var(--mn-rose-100); color: var(--mn-rose-700); outline-color: var(--mn-rose-200); }

.mn-header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; margin-left: auto; }

.mn-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: none;
  background: var(--mn-slate-100);
  color: var(--mn-slate-600);
  flex-shrink: 0;
}
.mn-theme-toggle:hover { background: var(--mn-slate-200); }
.mn-theme-icon-moon { display: none; }
[data-theme="dark"] .mn-theme-icon-sun { display: none; }
[data-theme="dark"] .mn-theme-icon-moon { display: inline-block; }

.mn-account-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  background: var(--mn-slate-100);
  padding: 0.3rem 0.5rem 0.3rem 0.7rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.mn-account-name { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 800; color: var(--mn-slate-700); }
.mn-account-chip a { font-size: 0.68rem; font-weight: 700; color: var(--mn-slate-500); border-bottom: 1px solid var(--mn-slate-300); }
.mn-account-chip a:hover { color: var(--mn-slate-700); }

.mn-lang-switch { display: inline-flex; border-radius: 999px; background: var(--mn-slate-100); padding: 0.15rem; flex-shrink: 0; }
.mn-lang-switch button {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--mn-slate-500);
}
.mn-lang-switch button.is-active { background: var(--mn-indigo-600); color: var(--mn-indigo-950); }

.mn-nav-desktop {
  display: none;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.mn-nav-desktop::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .mn-nav-desktop { display: flex; } }
.mn-nav-desktop a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--mn-radius-sm);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--mn-slate-500);
  white-space: nowrap;
  flex-shrink: 0;
}
.mn-nav-desktop a:hover { color: var(--mn-slate-700); }
.mn-nav-desktop a.is-active { color: var(--mn-indigo-700); background: var(--mn-indigo-50); }

.mn-nav-mobile {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--mn-slate-200);
}
[data-theme="dark"] .mn-nav-mobile { background: rgba(11, 11, 13, 0.97); }
@media (min-width: 768px) { .mn-nav-mobile { display: none; } }
.mn-nav-mobile-inner {
  max-width: var(--mn-max-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.35rem 0.5rem;
}
.mn-nav-mobile a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.35rem;
  border-radius: var(--mn-radius-sm);
  color: var(--mn-slate-400);
}
.mn-nav-mobile a span { font-size: 0.62rem; font-weight: 700; }
.mn-nav-mobile a.is-active { color: var(--mn-indigo-700); }

/* -------------------------------------------------------------------- */
/* Buttons, badges, toggles                                             */
/* -------------------------------------------------------------------- */

.mn-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  border-radius: var(--mn-radius-md);
  padding: 0.5rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--mn-indigo-600);
  color: var(--mn-indigo-950);
  box-shadow: var(--mn-shadow-sm);
  transition: background 0.15s ease, color 0.15s ease;
}
.mn-btn:hover { background: var(--mn-indigo-700); color: #fff; }
.mn-btn--light { background: #fff; color: var(--mn-indigo-700); }
.mn-btn--light:hover { background: var(--mn-indigo-50); }
.mn-btn--ghost { background: var(--mn-slate-100); color: var(--mn-slate-600); }
.mn-btn--ghost:hover { background: var(--mn-slate-200); }
.mn-btn--icon { width: 2rem; height: 2rem; padding: 0; justify-content: center; }

.mn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--mn-surface);
  color: var(--mn-slate-600);
  outline: 1px solid var(--mn-slate-200);
}
.mn-pill.is-active { background: var(--mn-indigo-600); color: var(--mn-indigo-950); box-shadow: var(--mn-shadow-sm); outline: none; }

.mn-badge { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 999px; padding: 0.15rem 0.5rem; font-size: 0.66rem; font-weight: 700; }
.mn-badge--local { background: var(--mn-violet-50); color: var(--mn-violet-700); outline: 1px solid var(--mn-violet-200); }
.mn-badge--rating { background: var(--mn-slate-50); color: var(--mn-slate-600); outline: 1px solid var(--mn-slate-200); }
.mn-badge--crowd-quiet { background: var(--mn-emerald-50); color: var(--mn-emerald-700); outline: 1px solid var(--mn-emerald-200); }
.mn-badge--crowd-moderate { background: var(--mn-amber-50); color: var(--mn-amber-600); outline: 1px solid var(--mn-amber-200); }
.mn-badge--crowd-packed { background: var(--mn-rose-50); color: var(--mn-rose-700); outline: 1px solid var(--mn-rose-200); }

.mn-select-wrap { position: relative; display: inline-block; }
.mn-select-wrap--block { display: block; width: 100%; }
.mn-select-wrap--block select { width: 100%; }
.mn-select-wrap select {
  appearance: none;
  border-radius: 999px;
  background: var(--mn-surface);
  padding: 0.4rem 1.75rem 0.4rem 1.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--mn-slate-700);
  box-shadow: var(--mn-shadow-sm);
  outline: 1px solid var(--mn-slate-200);
  border: none;
  width: 100%;
}
.mn-select-wrap .mn-select-icon-left { position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%); color: var(--mn-slate-400); pointer-events: none; }
.mn-select-wrap .mn-select-icon-right { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); color: var(--mn-slate-400); pointer-events: none; }

.mn-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  background: var(--mn-surface);
  padding: 0.5rem 0.75rem;
  outline: 1px solid var(--mn-slate-200);
  box-shadow: var(--mn-shadow-sm);
  border: none;
}
.mn-toggle-label { font-size: 0.72rem; font-weight: 600; color: var(--mn-slate-700); white-space: nowrap; }
.mn-toggle-track { position: relative; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: var(--mn-slate-300); transition: background 0.15s ease; flex-shrink: 0; }
.mn-toggle-track.is-on { background: var(--mn-indigo-600); }
.mn-toggle-thumb { position: absolute; top: 0.1875rem; left: 0.1875rem; width: 0.875rem; height: 0.875rem; border-radius: 999px; background: #fff; box-shadow: var(--mn-shadow-sm); transition: transform 0.15s ease; }
.mn-toggle-track.is-on .mn-toggle-thumb { transform: translateX(1rem); }

/* -------------------------------------------------------------------- */
/* Grid / layout helpers                                                */
/* -------------------------------------------------------------------- */

.mn-grid { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.mn-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .mn-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.mn-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .mn-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mn-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.mn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mn-scroll-x { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; }
.mn-scroll-x::-webkit-scrollbar { height: 6px; }
.mn-scroll-x::-webkit-scrollbar-thumb { background: var(--mn-slate-300); border-radius: 999px; }

/* -------------------------------------------------------------------- */
/* Cards                                                                 */
/* -------------------------------------------------------------------- */

.mn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--mn-radius-xl);
  background: var(--mn-surface);
  padding: 1rem;
  outline: 1px solid var(--mn-slate-200);
  box-shadow: var(--mn-shadow-sm);
  transition: box-shadow 0.15s ease;
}
.mn-card:hover { box-shadow: var(--mn-shadow-md); }
.mn-card--match { outline-color: var(--mn-indigo-200); }
.mn-card-badge-float {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border-radius: 999px;
  background: var(--mn-indigo-600);
  color: var(--mn-indigo-950);
  padding: 0.15rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 800;
  box-shadow: var(--mn-shadow-sm);
}

.mn-place-thumb { display: block; aspect-ratio: 4 / 3; margin: -1rem -1rem 0.75rem; border-radius: var(--mn-radius-xl) var(--mn-radius-xl) 0 0; overflow: hidden; background: var(--mn-slate-100); }
.mn-place-thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mn-place-head { display: flex; align-items: flex-start; gap: 0.65rem; }
.mn-place-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--mn-radius-md); background: var(--mn-slate-100); color: var(--mn-slate-600); flex-shrink: 0; }
.mn-place-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mn-place-name { display: block; font-size: 0.85rem; font-weight: 800; color: var(--mn-slate-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-place-meta { display: flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--mn-slate-500); margin-top: 0.15rem; }
.mn-place-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.75rem; }
.mn-place-vibe { margin-top: 0.5rem; font-size: 0.72rem; font-style: italic; color: var(--mn-slate-500); }

.mn-deal-card {
  display: flex;
  flex-direction: column;
  min-width: 250px;
  scroll-snap-align: start;
  border-radius: var(--mn-radius-xl);
  padding: 1rem;
  color: #fff;
  background: var(--mn-indigo-950);
  box-shadow: var(--mn-shadow-md);
}
.mn-deal-top { display: flex; align-items: center; justify-content: space-between; }
.mn-deal-discount { border-radius: 999px; background: var(--mn-indigo-600); color: var(--mn-indigo-950); padding: 0.15rem 0.55rem; font-size: 0.7rem; font-weight: 800; }
.mn-deal-timer { display: flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; font-weight: 800; }
.mn-deal-timer.is-urgent { color: var(--mn-indigo-400); animation: mn-pulse 1.4s ease-in-out infinite; }
.mn-deal-title { margin-top: 0.5rem; font-size: 0.85rem; font-weight: 800; line-height: 1.3; }
.mn-deal-merchant { margin-top: 0.25rem; display: flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--mn-indigo-100); }
.mn-deal-progress { margin-top: 0.75rem; height: 0.35rem; width: 100%; border-radius: 999px; background: rgba(255,255,255,0.2); overflow: hidden; }
.mn-deal-progress-bar { height: 100%; border-radius: 999px; background: #fff; transition: width 1s linear; }

.mn-rewards-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: var(--mn-radius-xl);
  padding: 1.25rem;
  color: #fff;
  background: linear-gradient(135deg, var(--mn-slate-900), var(--mn-indigo-950) 55%, var(--mn-violet-950));
  box-shadow: var(--mn-shadow-lg);
}
@media (min-width: 640px) { .mn-rewards-card { flex-direction: row; align-items: center; justify-content: space-between; } }
.mn-rewards-eyebrow { display: flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mn-indigo-300); }
.mn-rewards-points { margin-top: 0.25rem; font-size: 1.5rem; font-weight: 800; }
.mn-rewards-tier { font-size: 0.72rem; font-weight: 800; }

.mn-weather-card { border-radius: var(--mn-radius-lg); background: var(--mn-indigo-950); padding: 1.1rem; box-shadow: var(--mn-shadow-md); color: #fff; }
.mn-weather-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mn-weather-toggle-group { display: inline-flex; border-radius: var(--mn-radius-sm); background: rgba(255,255,255,0.08); padding: 0.2rem; }
.mn-weather-toggle-group a { display: inline-flex; align-items: center; gap: 0.25rem; border: none; background: transparent; border-radius: var(--mn-radius-sm); padding: 0.3rem 0.6rem; font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.65); }
.mn-weather-toggle-group a.is-active { background: var(--mn-indigo-600); color: var(--mn-indigo-950); box-shadow: var(--mn-shadow-sm); }
.mn-weather-tip { margin-top: 0.5rem; font-size: 0.75rem; color: rgba(255,255,255,0.7); }
.mn-weather-live { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; color: #fff; }
.mn-weather-live strong { font-size: 1.6rem; }
.mn-weather-card .mn-muted { color: rgba(255,255,255,0.7); }

/* Updates feed / community */
.mn-feed { border-radius: var(--mn-radius-xl); background: var(--mn-surface); padding: 1rem; outline: 1px solid var(--mn-slate-200); box-shadow: var(--mn-shadow-sm); }
.mn-feed-list { max-height: 20rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; padding-right: 0.25rem; }
.mn-feed-item { display: flex; align-items: flex-start; gap: 0.6rem; border-radius: var(--mn-radius-md); background: var(--mn-slate-50); padding: 0.6rem; animation: mn-fade-in-up 0.25s ease-out; }
.mn-feed-icon { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; flex-shrink: 0; }
.mn-feed-icon--utility { background: var(--mn-amber-50); color: var(--mn-amber-600); }
.mn-feed-icon--lost-pet { background: var(--mn-indigo-50); color: var(--mn-indigo-700); }
.mn-feed-icon--traffic { background: var(--mn-rose-50); color: var(--mn-rose-700); }
.mn-feed-icon--event { background: var(--mn-violet-50); color: var(--mn-violet-700); }
.mn-feed-icon--community { background: var(--mn-emerald-50); color: var(--mn-emerald-700); }
.mn-feed-icon--rrts { background: var(--mn-indigo-50); color: var(--mn-indigo-700); }

.mn-live-dot { display:inline-block; width:0.5rem; height:0.5rem; border-radius:999px; background: var(--mn-emerald-700); box-shadow: 0 0 0 0 rgba(4,120,87,0.5); animation: mn-live-pulse 1.8s infinite; }
@keyframes mn-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(4,120,87,0.45); } 70% { box-shadow: 0 0 0 6px rgba(4,120,87,0); } 100% { box-shadow: 0 0 0 0 rgba(4,120,87,0); } }
.mn-feed-text { font-size: 0.75rem; font-weight: 500; color: var(--mn-slate-800); line-height: 1.35; }
.mn-feed-meta { margin-top: 0.15rem; display: flex; align-items: center; gap: 0.2rem; font-size: 0.66rem; color: var(--mn-slate-400); }
.mn-feed-form { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; border-top: 1px solid var(--mn-slate-100); padding-top: 0.75rem; }
.mn-feed-form input { flex: 1; min-width: 0; border-radius: var(--mn-radius-md); border: 1px solid var(--mn-slate-200); padding: 0.4rem 0.7rem; font-size: 0.75rem; outline: none; }
.mn-feed-form input:focus { border-color: var(--mn-indigo-400); box-shadow: 0 0 0 3px var(--mn-indigo-100); }

.mn-topic { display: flex; gap: 0.75rem; border-radius: var(--mn-radius-xl); background: var(--mn-surface); padding: 1rem; outline: 1px solid var(--mn-slate-200); box-shadow: var(--mn-shadow-sm); }
.mn-topic-votes { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; flex-shrink: 0; }
.mn-topic-votes button { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: none; background: transparent; color: var(--mn-slate-400); }
.mn-topic-votes button.is-up { color: var(--mn-emerald-700); background: var(--mn-emerald-100); }
.mn-topic-votes button.is-down { color: var(--mn-rose-700); background: var(--mn-rose-100); }
.mn-topic-score { font-size: 0.75rem; font-weight: 800; color: var(--mn-slate-700); }
.mn-topic-title { font-size: 0.85rem; font-weight: 800; color: var(--mn-slate-900); line-height: 1.35; }
.mn-topic-desc { margin-top: 0.25rem; font-size: 0.72rem; color: var(--mn-slate-500); line-height: 1.4; }

/* Transit / RRTS */
.mn-route-card { border-radius: var(--mn-radius-xl); background: var(--mn-surface); padding: 1.1rem; outline: 1px solid var(--mn-slate-200); box-shadow: var(--mn-shadow-sm); }
.mn-route-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.mn-route-name { font-size: 0.95rem; font-weight: 800; color: var(--mn-slate-900); }
.mn-route-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.mn-route-stat { border-radius: var(--mn-radius-md); background: var(--mn-slate-50); padding: 0.5rem 0.75rem; font-size: 0.7rem; color: var(--mn-slate-600); }
.mn-route-stat strong { display: block; font-size: 0.8rem; color: var(--mn-slate-900); }
.mn-station-list { margin-top: 0.85rem; position: relative; padding-left: 1.1rem; }
.mn-station-list::before { content: ""; position: absolute; left: 0.28rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--mn-indigo-200); }
.mn-station { position: relative; padding-bottom: 0.75rem; font-size: 0.78rem; color: var(--mn-slate-700); }
.mn-station:last-child { padding-bottom: 0; }
.mn-station::before { content: ""; position: absolute; left: -1.1rem; top: 0.15rem; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--mn-indigo-600); box-shadow: 0 0 0 3px var(--mn-surface); }
.mn-station strong { color: var(--mn-slate-900); }
.mn-station-interchange { display: inline-block; margin-left: 0.4rem; font-size: 0.62rem; font-weight: 700; color: var(--mn-violet-700); background: var(--mn-violet-50); border-radius: 999px; padding: 0.05rem 0.4rem; }

/* Hero / travel info blocks */
.mn-hero {
  border-radius: var(--mn-radius-xl);
  background: var(--mn-indigo-950);
  color: #fff;
  padding: 1.5rem;
  box-shadow: var(--mn-shadow-lg);
}
.mn-hero h1 { font-size: 1.35rem; font-weight: 800; }
.mn-hero p { margin-top: 0.4rem; font-size: 0.82rem; color: var(--mn-indigo-100); max-width: 40rem; }

.mn-info-card { border-radius: var(--mn-radius-lg); background: var(--mn-surface); padding: 1rem; outline: 1px solid var(--mn-slate-200); box-shadow: var(--mn-shadow-sm); }
.mn-info-card h3 { font-size: 0.82rem; font-weight: 800; color: var(--mn-slate-900); display: flex; align-items: center; gap: 0.4rem; }
.mn-info-card p, .mn-info-card li { font-size: 0.75rem; color: var(--mn-slate-600); line-height: 1.5; }
.mn-info-card ul { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.35rem; }

/* Forms (submission forms for updates/topics) */
.mn-form-card { border-radius: var(--mn-radius-xl); background: var(--mn-surface); padding: 1rem; outline: 1px solid var(--mn-slate-200); box-shadow: var(--mn-shadow-sm); }
.mn-form-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; }
.mn-form-field label { font-size: 0.72rem; font-weight: 700; color: var(--mn-slate-600); }
.mn-form-field input, .mn-form-field select, .mn-form-field textarea {
  border-radius: var(--mn-radius-md);
  border: 1px solid var(--mn-slate-200);
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  outline: none;
}
.mn-form-field input:focus, .mn-form-field select:focus, .mn-form-field textarea:focus { border-color: var(--mn-indigo-400); box-shadow: 0 0 0 3px var(--mn-indigo-100); }
.mn-form-note { font-size: 0.68rem; color: var(--mn-slate-400); margin-top: 0.5rem; }
.mn-form-success { border-radius: var(--mn-radius-md); background: var(--mn-emerald-50); color: var(--mn-emerald-700); padding: 0.6rem 0.8rem; font-size: 0.75rem; font-weight: 600; }
.mn-form-error { border-radius: var(--mn-radius-md); background: var(--mn-rose-50); color: var(--mn-rose-700); padding: 0.6rem 0.8rem; font-size: 0.75rem; font-weight: 600; }

.mn-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}
.mn-auth-modal[hidden] { display: none; }
.mn-auth-modal-card { position: relative; margin-block: auto; }
.mn-auth-modal-card .mn-mobile-menu-close { position: absolute; top: 0.75rem; right: 0.75rem; }

.mn-auth-card {
  max-width: 26rem;
  border-radius: var(--mn-radius-xl);
  background: var(--mn-surface);
  padding: 1.5rem;
  outline: 1px solid var(--mn-slate-200);
  box-shadow: var(--mn-shadow-sm);
  text-align: center;
}
.mn-auth-card .mn-place-icon { margin-inline: auto; background: var(--mn-indigo-50); color: var(--mn-indigo-700); }
.mn-auth-card .mn-form-field { text-align: left; }
.mn-auth-card .mn-form-field label { display: block; margin-bottom: 0.35rem; }
.mn-auth-card .mn-form-field input {
  border-radius: var(--mn-radius-md);
  border: 1px solid var(--mn-slate-200);
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  outline: none;
  width: 100%;
}
.mn-auth-card .mn-form-field input:focus { border-color: var(--mn-indigo-400); box-shadow: 0 0 0 3px var(--mn-indigo-100); }
.mn-auth-card .mn-btn { width: 100%; justify-content: center; }

/* Footer */
.mn-footer { border-top: 1px solid var(--mn-slate-200); padding: 1.5rem 1rem 5rem; text-align: center; }
@media (min-width: 768px) { .mn-footer { padding-bottom: 1.5rem; } }
.mn-footer p { font-size: 0.7rem; color: var(--mn-slate-400); }

/* Text helpers */
.mn-h1 { font-size: 1.15rem; font-weight: 800; color: var(--mn-slate-900); }
.mn-muted { color: var(--mn-slate-500); font-size: 0.78rem; }
.mn-text-center { text-align: center; }

/* -------------------------------------------------------------------- */
/* Animations                                                            */
/* -------------------------------------------------------------------- */

@keyframes mn-fade-in-up { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes mn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.mn-fade-in-up { animation: mn-fade-in-up 0.25s ease-out; }

/* Icon sizing (inline SVGs from functions.php icon helper) */
.mn-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* -------------------------------------------------------------------- */
/* Real Estate + Hire Services + News                                   */
/* -------------------------------------------------------------------- */

.mn-re-badge { position: absolute; top: 0.6rem; left: 0.6rem; font-family: inherit; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.2rem 0.55rem; border-radius: 999px; color: #fff; z-index: 1; }
.mn-re-badge--rent { background: var(--mn-emerald-700); }
.mn-re-badge--sale { background: var(--mn-indigo-600); color: var(--mn-indigo-950); }
.mn-re-price { font-size: 1.05rem; font-weight: 800; color: var(--mn-indigo-700); margin-top: 0.5rem; }
.mn-re-price small { font-size: 0.65rem; font-weight: 600; color: var(--mn-slate-400); }
.mn-re-near { display: inline-block; margin-top: 0.5rem; font-size: 0.62rem; font-weight: 700; color: var(--mn-violet-700); background: var(--mn-violet-50); border-radius: 999px; padding: 0.15rem 0.5rem; outline: 1px solid var(--mn-violet-200); }

.mn-svc-card { display: flex; flex-direction: column; gap: 0.6rem; }
.mn-svc-top { display: flex; gap: 0.75rem; align-items: flex-start; }
.mn-svc-photo { width: 3.2rem; height: 3.2rem; border-radius: var(--mn-radius-md); overflow: hidden; flex-shrink: 0; background: var(--mn-slate-100); }
.mn-svc-photo img { width: 100%; height: 100%; object-fit: cover; }
.mn-svc-stats { display: flex; gap: 0.75rem; font-size: 0.7rem; color: var(--mn-slate-500); margin-top: 0.2rem; }

.mn-news-list { display: flex; flex-direction: column; gap: 0; }
.mn-news-item { display: grid; grid-template-columns: 7rem 1fr; gap: 0.25rem 1rem; padding: 0.85rem 0; border-top: 1px solid var(--mn-slate-100); }
.mn-news-item:first-child { border-top: none; }
.mn-news-meta { font-size: 0.66rem; color: var(--mn-slate-400); line-height: 1.6; }
.mn-news-meta .mn-news-src { display: block; font-weight: 700; color: var(--mn-violet-700); }
.mn-news-title { display: block; text-decoration: none; }
.mn-news-title:hover h4 { color: var(--mn-indigo-700); }
.mn-news-item h4 { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--mn-slate-900); line-height: 1.4; }
.mn-news-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.45rem; }
.mn-news-ref { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.62rem; color: var(--mn-slate-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-news-check {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--mn-indigo-700);
  text-decoration: none;
  border: 1px solid var(--mn-slate-200);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
}
.mn-news-check:hover { background: var(--mn-indigo-50); }
@media (max-width: 560px) { .mn-news-item { grid-template-columns: 1fr; gap: 0.25rem; } }

.mn-x-embed { display: block; text-decoration: none; }
.mn-x-embed:hover h3 { color: var(--mn-indigo-700); }