:root {
  --white: #FFF7ED;
  --pink-pale: #FCF0F0;
  --pink-hot: #BC6A78;
  --pink-deep: #7A4A50;
  --pink-pale2: #F7E4DC;
  --ink: #140D0C;
  --ink-soft: #5A4E4B;
  --sans: 'Cormorant Garamond', serif;
  --serif: 'Playfair Display', serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tab-h: 64px;
  --header-h: 56px;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* Disable text selection and press-and-hold everywhere except form fields */
*:not(input):not(textarea):not(select) {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select { -webkit-user-select: text; user-select: text; }
html { height: 100%; background: var(--pink-pale); }
body { height: 100%; background: var(--pink-pale); font-family: var(--sans); color: var(--ink); overflow: hidden; margin: 0; }

/* ── Mobile container ── */
#app-container {
  width: 100%;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;
  /* iOS (especially running as an installed/standalone app) can briefly
     disagree with itself about how tall 100dvh actually is, which left a
     sliver of the page's real background peeking out below full-screen
     modals. --app-height is set from JS using the visual viewport's real
     height and takes over once available, which tracks iOS accurately. */
  height: var(--app-height, 100dvh);
  margin: 0 auto;
  position: relative;
  background: var(--pink-pale);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  touch-action: pan-y;
}

/* ── App shell ── */
#app { display: flex; flex-direction: column; height: 100%; padding-top: var(--safe-top); flex: 1; }
#app.auth-mode { padding: 0; }

/* ── Auth screens ── */
.auth-screen {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100%; padding: 40px 24px; background: var(--pink-pale);
}
.auth-screen.active { display: flex; }
.auth-logo { width: 170px; height: auto; margin-bottom: 32px; }
.auth-card { background: #fff; border-radius: 24px; padding: 32px 28px; width: 100%; max-width: 380px; box-shadow: 0 8px 40px rgba(20,13,12,0.10); }
.auth-card h2 { font-family: var(--serif); font-size: 25.5px; margin-bottom: 6px; }
.auth-card p { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 24px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; font-weight: 700; color: var(--ink-soft); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 17.5px; padding: 12px 14px;
  border: 1.5px solid #E8DCD3; border-radius: 12px; background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pink-hot); }
.field textarea { resize: vertical; min-height: 80px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; font-size: 16.5px; font-weight: 800; border-radius: 12px; border: none; cursor: pointer; font-family: var(--sans); transition: opacity .15s; }
.btn:active { opacity: 0.8; }
.btn-pink { background: var(--pink-hot); color: #fff; margin-bottom: 10px; }
.btn-outline { background: #fff; color: var(--ink); border: 1.5px solid #E8DCD3; }
.divider { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--ink-soft); font-size: 14.5px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #E8DCD3; }
.auth-switch { text-align: center; font-size: 15.5px; color: var(--ink-soft); margin-top: 18px; }
.auth-switch a { color: var(--pink-deep); font-weight: 700; text-decoration: none; }
.flash { padding: 11px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; margin-bottom: 14px; display: none; }
.flash-error { background: #FBE9E7; color: #B3372C; }
.flash-success { background: #E4F4E9; color: #1F7A42; }

/* ── Toast (floating success notification, replaces inline modal flashes) ── */
#toast {
  position: absolute;
  left: 50%; bottom: calc(70px + 24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  background: var(--ink); color: #fff;
  padding: 12px 20px; border-radius: 100px;
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 24px rgba(20,13,12,0.25);
  z-index: 500;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  max-width: calc(100% - 48px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
#toast svg { width: 16px; height: 16px; stroke: #6FE0A0; fill: none; flex-shrink: 0; }

/* ── Install app banner ── */
#install-banner {
  position: absolute;
  left: 12px; right: 12px;
  bottom: calc(70px + 12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: 16px;
  padding: 14px 14px 14px 16px;
  box-shadow: 0 10px 30px rgba(20,13,12,0.18);
  z-index: 400;
  align-items: center; gap: 12px;
  display: none;
}
#install-banner.show { display: flex; }
#install-banner .install-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: var(--pink-pale2); display: flex; align-items: center; justify-content: center;
}
#install-banner .install-icon svg { width: 22px; height: 22px; stroke: var(--pink-hot); fill: none; }
#install-banner .install-body { flex: 1; min-width: 0; }
#install-banner .install-body h4 { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
#install-banner .install-body p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
#install-banner .install-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
#install-banner .install-btn {
  background: var(--pink-hot); color: #fff; border: none; border-radius: 100px;
  padding: 8px 14px; font-family: var(--sans); font-size: 14px; font-weight: 800; cursor: pointer;
  white-space: nowrap;
}
#install-banner .install-dismiss {
  background: none; border: none; color: var(--ink-soft); font-size: 13px; font-weight: 700;
  cursor: pointer; padding: 2px; text-align: center;
}
.g-icon { width: 20px; height: 20px; flex-shrink: 0; }
.hidden { display: none !important; }

/* ── Notification permission banner ── */
#notif-banner {
  position: absolute;
  left: 12px; right: 12px;
  bottom: calc(70px + 12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: 16px;
  padding: 14px 14px 14px 16px;
  box-shadow: 0 10px 30px rgba(20,13,12,0.18);
  z-index: 400;
  align-items: center; gap: 12px;
  display: none;
}
#notif-banner.show { display: flex; }
#notif-banner .notif-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: var(--pink-pale2); display: flex; align-items: center; justify-content: center;
}
#notif-banner .notif-icon svg { width: 22px; height: 22px; stroke: var(--pink-hot); fill: none; }
#notif-banner .notif-body { flex: 1; min-width: 0; }
#notif-banner .notif-body h4 { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
#notif-banner .notif-body p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
#notif-banner .notif-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
#notif-banner .notif-btn {
  background: var(--pink-hot); color: #fff; border: none; border-radius: 100px;
  padding: 8px 14px; font-family: var(--sans); font-size: 14px; font-weight: 800; cursor: pointer;
  white-space: nowrap;
}
#notif-banner .notif-dismiss {
  background: none; border: none; color: var(--ink-soft); font-size: 13px; font-weight: 700;
  cursor: pointer; padding: 2px; text-align: center;
}

/* ── Header ── */
#header {
  position: relative;
  margin: 0;
  background: var(--pink-pale);
  border-radius: 0 0 20px 20px;
  padding: 16px 16px 18px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; z-index: 50;
}
.header-left { display: flex; align-items: center; gap: 12px; }
.header-avatar-circle {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--pink-hot); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 26.5px; font-weight: 700;
  flex-shrink: 0; overflow: hidden; cursor: pointer;
  border: 2.5px solid rgba(255,255,255,0.8);
}
.header-avatar-circle img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.header-greeting { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.header-greeting .good-time { font-size: 13.5px; color: var(--pink-hot); font-weight: 700; }
.header-greeting .name { font-size: 19.5px; font-weight: 800; color: var(--ink); }
.header-right { display: flex; align-items: center; gap: 10px; }
.header-icon-btn {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--pink-pale2); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.header-icon-btn svg { width: 18px; height: 18px; stroke: var(--pink-deep); fill: none; stroke-width: 1.8; }
.notif-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--pink-hot); color: #fff;
  border-radius: 100px; font-size: 11.5px; font-weight: 800;
  display: none; align-items: center; justify-content: center;
  border: 2px solid var(--pink-pale);
}
.notif-badge.show { display: flex; }

/* ── Business map reload button ── */
.map-reload-btn {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(20,13,12,0.18);
}
.map-reload-btn svg { width: 17px; height: 17px; stroke: var(--pink-deep); }
.map-reload-btn.spinning svg { animation: spin .7s linear infinite; }

/* ── Notifications modal ── */
.notif-swipe { overflow: hidden; }
.notif-hint { font-size: 12.5px; color: #B0A09A; text-align: center; padding: 0 0 8px; }
.notif-item { touch-action: pan-y; user-select: none; display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #F0E8E0; cursor: pointer; }
.notif-item:last-child { border-bottom: none; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink-hot); flex-shrink: 0; margin-top: 6px; }
.notif-item.read .notif-dot { background: transparent; }
.notif-item .notif-body { flex: 1; }
.notif-item h4 { font-size: 15.5px; font-weight: 800; margin-bottom: 2px; }
.notif-item.read h4 { font-weight: 700; color: var(--ink-soft); }
.notif-item p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.4; }
.notif-item .notif-time { font-size: 12.5px; color: #B0A09A; margin-top: 4px; }

/* ── Tab content ── */
#content { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding-bottom: calc(70px + 20px + env(safe-area-inset-bottom, 0px)); }

/* ── Pull to refresh ── */
#ptr-indicator {
  display: flex; align-items: center; justify-content: center;
  height: 0; overflow: hidden;
  color: var(--pink-hot);
}
#ptr-indicator .spinner { margin: 12px auto; }
#ptr-indicator .ptr-arrow {
  width: 22px; height: 22px; stroke: var(--pink-hot); fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.15s ease;
}
.tab-pane { display: none; min-height: 100%; }
.tab-pane.animating {
  display: block;
  animation: pageIn 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateX(18px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.tab-pane.active { display: block; }

/* ── Tab bar — floating pill ── */
#tabbar-wrap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: transparent;
  padding: 8px 16px;
  padding-bottom: 8px;
  pointer-events: none;
}
#tabbar-wrap #tabbar { pointer-events: auto; }
#tabbar {
  width: 100%;
  height: 70px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-radius: 22px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(20,13,12,0.10);
  padding: 6px;
  gap: 4px;
  position: relative;
}
/* Sliding pill indicator — animates position/width between tabs */
#tab-pill {
  position: absolute;
  top: 6px; left: 0;
  height: 58px;
  background: var(--pink-pale2);
  border-radius: 16px;
  transition: left 0.32s cubic-bezier(0.34, 1.2, 0.64, 1), width 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
  z-index: 0;
  pointer-events: none;
  will-change: left, width;
}
.tab-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; background: none; border: none; cursor: pointer; font-family: var(--sans);
  font-size: 0; font-weight: 700; color: #B0A09A; padding: 0; transition: color .25s;
  height: 100%; border-radius: 16px; position: relative; z-index: 1;
}
.tab-btn svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab-btn.active { color: var(--pink-hot); }
.tab-btn.active svg { stroke: var(--pink-hot); }
.tab-btn .tab-icon-wrap {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 6px; width: 100%; height: 100%; border-radius: 16px;
  padding: 6px 4px;
}
.tab-btn .tab-icon-wrap span { display: none; font-size: 13.5px; font-weight: 800; }
.tab-btn.active .tab-icon-wrap span { display: block; }

/* ── Section headings ── */
.page-title { font-family: var(--serif); font-size: 23.5px; font-weight: 700; padding: 20px 20px 4px; }
.page-subtitle { font-size: 15px; color: var(--ink-soft); padding: 0 20px 16px; }

/* ── Cards ── */
.card { background: #fff; border-radius: 18px; padding: 18px; margin: 0 16px 14px; }
.card-sm { background: #fff; border-radius: 14px; padding: 14px 16px; margin: 0 16px 10px; }

/* ── HOME ── */
.home-hero { padding: 24px 20px 16px; }
.home-hero h2 { font-family: var(--serif); font-size: 27.5px; line-height: 1.2; margin-bottom: 6px; }
.home-hero h2 em { font-style: italic; color: var(--pink-hot); }
.home-hero p { font-size: 16px; color: var(--ink-soft); line-height: 1.6; }
.section-label { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pink-deep); padding: 16px 20px 8px; display: block; }
.event-chip {
  background: #fff; border-radius: 18px; padding: 10px 10px 14px; margin: 0 16px 10px;
  display: flex; flex-direction: column; gap: 12px; cursor: pointer;
}
.event-chip .chip-photo-wrap { position: relative; border-radius: 14px; overflow: hidden; }
.event-chip .chip-photo { width: 100%; height: 190px; object-fit: cover; border-radius: 14px; display: block; }
.event-chip .chip-photo-placeholder { background: var(--pink-pale2); }
.event-chip .chip-body { display: flex; align-items: center; gap: 14px; padding: 0 4px; }
.event-chip .date-box { background: var(--pink-pale2); border-radius: 10px; padding: 8px 10px; text-align: center; flex-shrink: 0; min-width: 44px; }
.event-chip .date-box .day { font-size: 19.5px; font-weight: 800; color: var(--pink-deep); line-height: 1; }
.event-chip .date-box .mon { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; }
.event-chip .info { min-width: 0; flex: 1; }
.event-chip .info h4 { font-size: 16px; font-weight: 800; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-chip .info span { font-size: 14px; color: var(--ink-soft); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-chip.past { opacity: 0.55; }
/* Subscriber-only lock overlay — the event card itself (photo, title, date,
   location) stays visible so non-subscribers can see something is
   happening; only tapping it is gated behind the subscribe prompt. */
.locked-overlay {
  position: absolute; inset: 0; background: rgba(28,14,20,0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #fff; text-align: center; padding: 10px; border-radius: inherit;
}
.locked-overlay svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.6; }
.locked-overlay span { font-size: 12.5px; font-weight: 800; letter-spacing: 0.01em; }
.story-chip {
  background: #fff; border-radius: 18px; padding: 10px 10px 14px; margin: 0;
  display: flex; flex-direction: column; cursor: pointer;
}
.story-chip .chip-photo { width: 100%; height: 190px; object-fit: cover; border-radius: 14px; display: block; }
.story-chip .chip-photo-placeholder { background: var(--pink-pale2); }
.story-chip .info { padding: 12px 4px 0; }
.story-chip .cat { font-size: 12px; font-weight: 800; color: var(--pink-deep); background: var(--pink-pale2); padding: 2px 8px; border-radius: 100px; display: inline-block; margin-bottom: 5px; }
.story-chip .info h4 { font-size: 15.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 2.6em; }

/* ── Horizontal sliding card row (Home: Upcoming Events, Latest Stories) ── */
.home-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 4px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 20px; /* spacer 8px + gap 12px — keeps snapped cards aligned with section labels */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.home-slider::-webkit-scrollbar { display: none; }
.home-slider .slider-spacer { flex: 0 0 8px; width: 8px; }
.home-slider .event-chip,
.home-slider .story-chip {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: calc(100% - 48px); /* wider card, just a tiny peek of the next one */
  margin: 0;
}
.home-empty-card {
  background: #fff; border-radius: 16px; padding: 20px 18px;
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-size: 15.5px; text-align: center;
  min-height: 60px;
}

/* ── BUSINESS ── */
.biz-toolbar { display: flex; gap: 10px; padding: 12px 16px; }
.search-input-wrap { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.search-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 12px; background: var(--pink-pale2);
  border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s; padding: 0;
}
.search-btn:active { background: var(--pink-hot); }
.search-btn:active svg { stroke: #fff; }
.search-btn svg { width: 17px; height: 17px; stroke: var(--pink-deep); fill: none; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.biz-toolbar input { flex: 1; min-width: 0; font-family: var(--sans); font-size: 17.5px; padding: 10px 50px 10px 14px; border: 1.5px solid #E8DCD3; border-radius: 12px; background: #fff; }
.biz-toolbar input:focus { outline: none; border-color: var(--pink-hot); }
.biz-filter { flex-shrink: 0; max-width: 108px; font-family: var(--sans); font-size: 15.5px; padding: 10px 10px; border: 1.5px solid #E8DCD3; border-radius: 12px; background: #fff; color: var(--ink); }
.biz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 20px; }
.biz-card { background: #fff; border-radius: 18px; overflow: hidden; cursor: pointer; }
.biz-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--pink-pale2); }
.biz-card .biz-img-placeholder { width: 100%; aspect-ratio: 1; background: var(--pink-pale2); display: flex; align-items: center; justify-content: center; font-size: 33.5px; }
.biz-card .biz-info { padding: 10px 12px 14px; }
.biz-card .biz-info h4 { font-size: 15.5px; font-weight: 800; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-card .biz-info .cat { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 6px; }
.biz-card .biz-info .addr { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-card .biz-info .offer { font-size: 15.5px; font-weight: 800; color: var(--pink-deep); }
.empty-state { text-align: center; padding: 48px 24px; color: var(--ink-soft); font-size: 16px; }
.empty-state svg { width: 48px; height: 48px; stroke: var(--pink-pale); fill: none; margin-bottom: 14px; display: block; margin-left: auto; margin-right: auto; }

/* ── EVENTS ── */
.events-list { padding: 0 0 20px; }
.event-card { background: #fff; border-radius: 18px; margin: 0 16px 14px; overflow: hidden; cursor: pointer; }
.event-card .card-cover-wrap { position: relative; }
.event-card .cover { width: 100%; height: 160px; object-fit: cover; background: var(--pink-pale2); display: block; }
.event-card .cover-placeholder { width: 100%; height: 120px; background: var(--pink-pale2); display: flex; align-items: center; justify-content: center; }
.event-card .cover-placeholder svg { width: 36px; height: 36px; stroke: var(--pink-pale); fill: none; }
.event-card .event-body { padding: 16px; }
.event-card .event-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.event-card .event-date { font-size: 14px; font-weight: 800; color: var(--pink-deep); }
.event-card .event-price { font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.event-card h3 { font-family: var(--serif); font-size: 19.5px; margin-bottom: 4px; }
.event-card .event-loc { font-size: 14.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 4px; }
.event-card .event-loc svg { width: 13px; height: 13px; flex-shrink: 0; }
.past-badge { display: inline-block; font-size: 12.5px; font-weight: 700; background: var(--pink-pale2); color: var(--ink-soft); padding: 2px 10px; border-radius: 100px; margin-top: 8px; }
.event-card .event-footer { padding: 0 16px 16px; }
.event-card .ticket-btn { display: block; text-align: center; background: var(--pink-hot); color: #fff; font-weight: 800; font-size: 15.5px; padding: 12px; border-radius: 10px; text-decoration: none; border: 0; width: 100%; font-family: inherit; cursor: pointer; }

/* ── STORIES ── */
.submit-btn-wrap { padding: 16px 16px 8px; }
.submit-story-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--pink-hot); color: #fff; font-weight: 800; font-size: 16px; padding: 14px; border-radius: 14px; border: none; width: 100%; cursor: pointer; font-family: var(--sans); }
.submit-story-btn svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }
.story-card { background: #fff; border-radius: 18px; margin: 0 16px 14px; overflow: hidden; cursor: pointer; }
.story-card img { width: 100%; height: 180px; object-fit: cover; display: block; background: var(--pink-pale2); }
.story-card .story-body { padding: 16px; }
.story-card .story-cat { font-size: 12.5px; font-weight: 800; color: var(--pink-deep); background: var(--pink-pale2); padding: 3px 10px; border-radius: 100px; display: inline-block; margin-bottom: 8px; }
.story-card h3 { font-family: var(--serif); font-size: 19.5px; margin-bottom: 6px; }
.story-card p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story-card .read-more { font-size: 14px; font-weight: 800; color: var(--pink-hot); margin-top: 8px; display: inline-block; }

/* ── PROFILE ── */
.profile-photo-wrap { display: flex; flex-direction: column; align-items: center; padding: 28px 20px 16px; }
.profile-photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--pink-pale2); }
.profile-photo-placeholder { width: 88px; height: 88px; border-radius: 50%; background: var(--pink-pale2); display: flex; align-items: center; justify-content: center; cursor: pointer; border: 3px solid rgba(255,255,255,0.8); overflow: hidden; position: relative; }
.profile-photo-placeholder svg { width: 40px; height: 40px; stroke: var(--pink-deep); fill: none; }
.profile-photo-placeholder img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.profile-photo-placeholder .upload-overlay {
  position: absolute; inset: 0; background: rgba(20,13,12,0.45);
  display: none; align-items: center; justify-content: center; border-radius: 50%;
}
.profile-photo-placeholder.uploading .upload-overlay { display: flex; }
.profile-photo-placeholder.uploading .upload-overlay .spinner {
  width: 28px; height: 28px; border: 3px solid rgba(255,255,255,0.4);
  border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite; margin: 0;
}
.photo-upload-hint { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; }
.profile-name { font-family: var(--serif); font-size: 21.5px; font-weight: 700; margin-top: 10px; }
.profile-email { font-size: 14.5px; color: var(--ink-soft); margin-top: 2px; }
.membership-badge { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; background: var(--pink-pale2); color: var(--pink-deep); font-size: 13.5px; font-weight: 800; padding: 4px 14px; border-radius: 100px; }
.profile-actions { display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 16px; }
.profile-action-btn { display: flex; align-items: center; justify-content: center; padding: 14px; border-radius: 14px; font-family: var(--sans); font-size: 16px; font-weight: 700; border: 1.5px solid #E8DCD3; background: #fff; cursor: pointer; color: var(--ink); }
.profile-action-btn.danger { color: #B3372C; border-color: #ECCCC8; }
.profile-action-btn.pending { color: var(--ink-soft); background: var(--pink-pale2); border-color: var(--pink-pale2); cursor: default; }
.profile-action-btn.owned { color: var(--pink-deep); border-color: var(--pink-hot); font-weight: 800; }

/* ── My Stories modal list ── */
.mystory-item { background: #fff; border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
.mystory-item .row1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.mystory-item h4 { font-size: 16px; font-weight: 800; line-height: 1.3; }
.mystory-item .meta { font-size: 13.5px; color: var(--ink-soft); }
.status-pill { font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 100px; white-space: nowrap; flex-shrink: 0; }
.status-pill.pending  { background: var(--pink-pale2); color: var(--pink-deep); }
.status-pill.approved { background: #E4F4E9; color: #1F7A42; }
.status-pill.rejected { background: #F0EAE4; color: #8A7B6F; }
.profile-info-card { background: #fff; border-radius: 18px; margin: 0 16px 16px; padding: 4px 18px; }
.profile-info-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.profile-info-header h3 { font-family: var(--serif); font-size: 17.5px; font-weight: 700; }
.pencil-btn { width: 34px; height: 34px; border-radius: 10px; background: var(--pink-pale2); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; }
.pencil-btn svg { width: 16px; height: 16px; stroke: var(--pink-deep); fill: none; }
.pencil-btn.is-editing { background: var(--pink-hot); }
.pencil-btn.is-editing svg { stroke: #fff; }
.profile-info-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid #F2E9E2; }
.profile-info-row .pi-label { width: 76px; flex-shrink: 0; font-size: 14px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.02em; }
.profile-info-row .pi-value { flex: 1; min-width: 0; border: none; background: transparent; font-family: var(--sans); font-size: 17.5px; color: var(--ink); padding: 0; }
.profile-info-row .pi-value::placeholder { color: #B0A09A; }
.profile-info-row .pi-value:focus { outline: none; }
.profile-info-row .pi-value { pointer-events: none; } /* inert until Edit is pressed */
.profile-info-card.editing .pi-value {
  pointer-events: auto;
  background: #FBF8F4; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
}
.profile-info-card.editing #pf-email {
  pointer-events: none; /* email stays non-editable even while the rest are open */
  background: transparent; border: none; padding: 0;
}
.save-profile-btn { margin: 0 16px 24px; }

/* ── Modal / Sheet — full screen, with a sticky close button pinned to the
   top so it's always reachable, not just the Cancel/Close button at the
   end of the content. ── */
.modal-overlay {
  /* position:fixed, pinned with inset:0, is anchored to the real device
     viewport directly — unlike position:absolute, it doesn't depend on
     #app-container (or any ancestor) having computed the exact right
     height, which is what was leaving a sliver of whatever sits behind
     the modal visible at the bottom on some phones. */
  position: fixed; inset: 0; background: rgba(20,13,12,0.5); z-index: 100;
  display: flex; align-items: flex-end;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.modal-overlay.active { visibility: visible; opacity: 1; pointer-events: auto; }
.modal-sheet {
  background: var(--pink-pale); border-radius: 0; width: 100%; height: 100%; overflow-y: auto;
  padding: 0 0 calc(24px + var(--safe-bottom));
  transform: translateY(32px);
  transition: transform 0.32s cubic-bezier(0.34, 1.15, 0.64, 1);
}
.modal-overlay.active .modal-sheet { transform: translateY(0); }
.modal-handle { display: none; }
.modal-close-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: flex-end;
  padding: calc(14px + var(--safe-top)) 16px 6px;
  background: transparent; pointer-events: none;
}
.modal-close-bar .modal-close-btn { pointer-events: auto; }
/* Branded variant — Story detail and Event detail only, per the client's
   request: logo centered in the bar, close button stays on the right. The
   spacer on the left matches the close button's width so the logo is
   actually centered rather than pushed right. */
.modal-close-bar.branded { justify-content: space-between; align-items: center; }
.modal-close-bar.branded .modal-bar-logo-pill { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-radius: 100px; padding: 8px 16px; display: flex; align-items: center; }
.modal-close-bar.branded .modal-bar-logo { height: 20px; width: auto; pointer-events: none; }
.modal-close-bar.branded .modal-bar-spacer { width: 36px; flex-shrink: 0; }
.modal-close-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1; color: var(--ink-soft);
}
.modal-title { font-family: var(--serif); font-size: 21.5px; font-weight: 700; padding: 0 20px 16px; margin-top: -8px; }
.modal-body { padding: 0 20px; }
.modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; cursor: pointer; font-size: 23.5px; color: var(--ink-soft); }

/* ── Custom confirm dialog (replaces browser confirm()) ── */
.confirm-overlay {
  position: absolute; inset: 0; z-index: 200;
  background: rgba(20,13,12,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s;
}
.confirm-overlay.active { visibility: visible; opacity: 1; pointer-events: auto; }
.confirm-overlay.active { display: flex; }
.confirm-box {
  background: var(--pink-pale); border-radius: 20px; padding: 26px 22px 20px;
  width: 100%; max-width: 320px; text-align: center;
  box-shadow: 0 12px 40px rgba(20,13,12,0.2);
  transform: scale(0.92); transition: transform 0.22s cubic-bezier(0.34, 1.15, 0.64, 1);
}
.confirm-overlay.active .confirm-box { transform: scale(1); }
.confirm-box h3 { font-family: var(--serif); font-size: 20.5px; margin-bottom: 8px; }
.confirm-box p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 20px; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions button {
  flex: 1; padding: 12px; border-radius: 12px; font-family: var(--sans);
  font-size: 16px; font-weight: 800; border: none; cursor: pointer;
}
.confirm-cancel { background: var(--pink-pale2); color: var(--ink); }
.confirm-ok { background: #B3372C; color: #fff; }
.confirm-ok.neutral { background: var(--pink-hot); }

/* ── Logging out overlay ── */
.logout-overlay {
  position: absolute; inset: 0; z-index: 300;
  background: var(--pink-pale);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.logout-overlay.active { visibility: visible; opacity: 1; pointer-events: auto; }
.logout-overlay span { font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.logout-overlay .spinner { margin: 0; }

/* ── Loading ── */
.spinner { width: 32px; height: 32px; border: 3px solid var(--pink-pale2); border-top-color: var(--pink-hot); border-radius: 50%; animation: spin .7s linear infinite; margin: 48px auto; display: block; }
.btn-spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: -2px; margin-right: 7px; }
.btn-outline .btn-spinner, .btn.btn-outline .btn-spinner { border: 2px solid rgba(122,74,80,0.25); border-top-color: var(--pink-deep); }
button[disabled] { opacity: 0.7; cursor: default; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes logoFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.loading-wrap { display: flex; justify-content: center; padding: 40px 0; }
#preloader { transition: opacity .4s ease; }
#preloader.hidden { opacity: 0; pointer-events: none; }
/* On mobile (and installed PWAs) the app fills the whole screen, so a
   shadow around its edges just looks like an unwanted dark border. It
   only makes sense once the viewport is wider than the app itself and
   it visibly appears as a framed card. */
@media (min-width: 431px) {
  #app-container { box-shadow: 0 0 60px rgba(20,13,12,0.18); }
}

/* ── Added for the unified platform ───────────────────────────────────────── */
.auth-forgot{text-align:right;margin:-6px 0 14px;font-size:14.5px;}
.auth-forgot a{color:var(--pink-deep);font-weight:700;text-decoration:none;}
.auth-note{font-size:14px;color:var(--ink-soft);line-height:1.5;margin:0 0 16px;}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;}
.biz-card.locked .offer::before{content:"🔒 ";}
.sub-banner{margin:0 16px 14px;padding:14px 16px;border-radius:16px;background:var(--pink-pale2);color:var(--pink-deep);font-size:14.5px;line-height:1.45;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.sub-banner button{flex-shrink:0;border:none;background:var(--pink-hot);color:#fff;font-weight:800;font-size:13.5px;padding:9px 16px;border-radius:100px;cursor:pointer;font-family:var(--sans);}
.event-note{font-size:13.5px;color:var(--ink-soft);text-align:center;margin-top:10px;}
.event-link-btn{background:none;border:none;color:var(--pink-deep);font-weight:700;font-size:14.5px;text-decoration:underline;cursor:pointer;display:block;margin:12px auto 0;font-family:var(--sans);}
.ticket-btn.is-registered{background:#e3f3e6;color:#2f6b3f;box-shadow:none;}
.ticket-btn.is-muted{background:var(--pink-pale2);color:var(--ink-soft);box-shadow:none;pointer-events:none;}
.myevent-item{padding:14px 0;border-bottom:1px solid rgba(20,13,12,.08);}
.myevent-item h4{font-family:var(--serif);font-size:16.5px;margin:0 0 4px;}
.myevent-item .meta{font-size:13.5px;color:var(--ink-soft);}


.membership-badge.premium { background: var(--pink-hot); color: #fff; }

/* ── No zoom on mobile: pinch/double-tap zoom is off and no field is small enough to make iOS zoom in on focus ── */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, select, textarea { font-size: max(16px, 1em) !important; }
.pi-value, .field input, .field select, .field textarea, .biz-toolbar input { font-size: 16px !important; }

/* ── Sign in with Google, notices on the auth screens ── */
.flash-info { background: #EEF3FB; color: #2A4F86; }
.google-wrap { margin-top: 14px; }
.google-or { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 14px; font-weight: 600; margin: 4px 0 14px; }
.google-or::before, .google-or::after { content: ""; flex: 1; border-top: 1px solid #E8DCD3; }
.google-btn-host { display: flex; justify-content: center; min-height: 44px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   DESKTOP VIEW (screens 900px and wider). Everything below applies only on large screens —
   phones and small tablets keep the mobile design above, untouched.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.desk-only { display: none; }
.profile-col { display: contents; }

@media (min-width: 900px) {
  :root { --side-w: 270px; --wrap: 1160px; --gut: 44px; }
  body { overflow: hidden; }
  #app-container { max-width: none; box-shadow: none; touch-action: auto; background: var(--pink-pale); }
  .desk-only { display: flex; }

  /* ── Sign-in screens: a calm centred card ── */
  .auth-screen { padding: 56px 24px; }
  .auth-logo { width: 210px; margin-bottom: 36px; }
  .auth-card { max-width: 440px; padding: 40px 38px; border-radius: 28px; box-shadow: 0 16px 60px rgba(20,13,12,0.10); }

  /* ── App shell: sidebar on the left, header + content on the right ── */
  #app:not(.auth-mode) #main-app {
    display: grid !important;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "side head" "side main";
    height: 100%;
  }
  #header { grid-area: head; background: transparent; border-radius: 0; padding: 26px max(var(--gut), calc((100% - var(--wrap)) / 2)) 6px; }
  .header-avatar-circle { width: 56px; height: 56px; font-size: 22px; }
  .header-greeting .name { font-size: 22px; }
  .header-icon-btn { width: 44px; height: 44px; border-radius: 14px; transition: background .15s; }
  .header-icon-btn:hover { background: var(--pink-hot); }
  .header-icon-btn:hover svg { stroke: #fff; }
  #content { grid-area: main; min-height: 0; padding: 0 max(var(--gut), calc((100% - var(--wrap)) / 2)) 56px; }
  #ptr-indicator { display: none; }

  /* ── Sidebar navigation (replaces the floating tab bar) ── */
  #tabbar-wrap {
    grid-area: side; position: relative; inset: auto; z-index: 60; pointer-events: auto;
    background: #fff; border-right: 1px solid rgba(20,13,12,0.07);
    padding: 30px 18px 24px; overflow-y: auto;
  }
  #tabbar-wrap::before {
    content: ""; display: block; height: 40px; margin: 0 10px 34px;
    background: url('../../images/femfounders-logo.png') left center / contain no-repeat;
  }
  #tabbar { flex-direction: column; align-items: stretch; width: 100%; height: auto; padding: 0; gap: 6px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-radius: 0; }
  #tab-pill { display: none !important; }
  .tab-btn { flex: none; height: 52px; font-size: 16px; color: var(--ink-soft); border-radius: 14px; transition: background .15s, color .15s; text-align: left; }
  .tab-btn .tab-icon-wrap { justify-content: flex-start; gap: 14px; padding: 0 16px; }
  .tab-btn .tab-icon-wrap span { display: block; font-size: 16.5px; font-weight: 700; }
  .tab-btn svg { width: 22px; height: 22px; }
  .tab-btn:hover { background: var(--pink-pale); }
  .tab-btn.active { background: var(--pink-pale2); color: var(--pink-deep); }
  .tab-btn.active svg { stroke: var(--pink-deep); }
  #side-notif-btn { margin-top: 0; }
  .notif-badge { position: static; margin-left: auto; }

  /* ── Pages ── */
  .tab-pane { min-height: 0; }
  .page-title, .page-subtitle, .section-label { padding-left: 0; padding-right: 0; }
  .page-title { font-size: 32px; padding-top: 26px; }
  .page-subtitle { font-size: 17px; padding-bottom: 20px; }
  .section-label { font-size: 13.5px; padding-top: 26px; padding-bottom: 14px; }
  .sub-banner { margin: 0 0 22px; max-width: 760px; }
  .events-list, #stories-list { padding: 0 0 24px; }

  /* Home: the two rows become tidy grids instead of swipe rows */
  .home-slider { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; overflow: visible; padding: 0; scroll-snap-type: none; }
  .home-slider .slider-spacer { display: none; }
  .home-slider .event-chip, .home-slider .story-chip { width: auto; margin: 0; transition: transform .18s, box-shadow .18s; }
  .home-slider .event-chip:hover, .home-slider .story-chip:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -16px rgba(20,13,12,0.3); }
  .event-chip .chip-photo, .story-chip .chip-photo { height: 180px; }
  .home-empty-card { grid-column: 1 / -1; }

  /* Events + stories: card grids */
  #events-list, #stories-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; align-items: stretch; }
  #stories-list { align-items: start; }
  #events-list > .loading-wrap, #events-list > .empty-state, #stories-list > .loading-wrap, #stories-list > .empty-state { grid-column: 1 / -1; }
  .event-card, .story-card { margin: 0; transition: transform .18s, box-shadow .18s; }
  .event-card:hover, .story-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -18px rgba(20,13,12,0.32); }
  .event-card, .story-card { display: flex; flex-direction: column; }
  .event-card .event-body, .story-card .story-body { flex: 1; }
  .event-card .cover, .event-card .cover-placeholder { height: 190px; }
  .event-card .event-body { padding: 20px 20px 14px; } .event-card .event-footer { padding: 0 20px 20px; }
  .story-card img { height: 210px; } .story-card .story-body { padding: 20px; }
  .submit-btn-wrap { padding: 0 0 8px; max-width: 360px; }

  /* Business */
  .biz-toolbar { padding: 6px 0 20px; max-width: 640px; }
  .biz-filter { max-width: 200px; }
  .biz-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; padding: 0 0 24px; }
  .biz-card { transition: transform .18s, box-shadow .18s; }
  .biz-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -18px rgba(20,13,12,0.32); }

  /* Profile: summary + actions on the left, details on the right */
  #tab-profile.active, #tab-profile.animating { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0 40px; align-items: start; padding-top: 30px; }
  .profile-col { display: block; }
  .profile-col-left { grid-column: 1; grid-row: 1; background: #fff; border-radius: 22px; padding: 6px 6px 10px; }
  .profile-col-right { grid-column: 2; grid-row: 1 / span 2; }
  .profile-col-account { grid-column: 1; grid-row: 2; padding-top: 14px; }
  .profile-col-account .profile-actions { padding: 0; margin-top: 0 !important; }
  .profile-col-left .profile-actions { padding: 8px 16px 16px; }
  .profile-info-card { margin: 0 0 20px; padding: 6px 28px; max-width: 760px; border-radius: 22px; }
  #membership-card { padding-bottom: 6px; }
  .save-profile-btn { margin: 0 0 24px; max-width: 760px; }
  .profile-action-btn { cursor: pointer; transition: background .15s, border-color .15s; }
  .profile-action-btn:hover { background: var(--pink-pale2); }
  .profile-action-btn.danger:hover { background: #FBE9E7; }
  #tab-profile .flash { margin-left: 0; }

  /* ── Pop-ups: centred windows instead of full-screen sheets ── */
  .modal-overlay { align-items: center; justify-content: center; padding: 32px; }
  .modal-sheet { width: min(640px, 100%); height: auto; max-height: min(90vh, 920px); border-radius: 26px; padding-bottom: 28px; box-shadow: 0 30px 90px rgba(20,13,12,0.35); transform: translateY(18px) scale(.98); }
  .modal-overlay.active .modal-sheet { transform: none; }
  #modal-event-detail .modal-sheet, #modal-story-detail .modal-sheet, #modal-business-map .modal-sheet { width: min(780px, 100%); }
  #modal-stripe-checkout .modal-sheet { width: min(620px, 100%); }
  .modal-close-bar { padding-top: 16px; }
  .modal-close-btn { background: rgba(255,255,255,0.7); transition: background .15s; }
  .modal-close-btn:hover { background: #fff; }
  .modal-title { padding-left: 28px; padding-right: 28px; font-size: 24px; }
  .modal-body { padding: 0 28px; }
  .confirm-overlay { position: fixed; }
  .confirm-box { max-width: 380px; }
  .logout-overlay { position: fixed; }
  #toast { position: fixed; bottom: 36px; left: calc(50% + var(--side-w) / 2); max-width: 520px; }
  .btn { max-width: 100%; }
  .modal-body .btn, .auth-card .btn { max-width: none; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: rgba(122,74,80,0.25); border-radius: 10px; border: 2px solid var(--pink-pale); }
}

/* Very wide screens: a little more breathing room */
@media (min-width: 1500px) {
  :root { --wrap: 1280px; }
  .home-slider { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
}

/* ── Sign-up: accept the Terms and Privacy Policy ── */
.terms-check { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 14px; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); cursor: pointer; }
.terms-check input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; accent-color: var(--pink-hot); cursor: pointer; }
.terms-check a { color: var(--pink-deep); font-weight: 800; text-decoration: underline; }
#signup-btn:disabled { opacity: .45; cursor: not-allowed; }

.wallet-hint { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); background: var(--pink-pale2); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; }