/* app-next.css — styles that used to live inside PHP partials (so they were
   only available when that partial was included), plus the few new component
   classes the React version needs. Everything here follows the existing design
   tokens; nothing re-styles an existing component. Loaded last. */

/* ── Submit spinner (was partials/form-loading.php) ───────────────────── */
.btn-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btnspin 0.6s linear infinite;
  margin-right: 0.45em;
}
@keyframes btnspin {
  to {
    transform: rotate(360deg);
  }
}
.is-loading {
  cursor: progress !important;
  opacity: 0.85;
}

/* ── Password show/hide (was partials/password-toggle.php) ────────────── */
.pw-wrap {
  position: relative;
  display: block;
}
.pw-wrap > input {
  padding-right: 2.75rem !important;
}
.pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted, #6b6475);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.pw-toggle:hover,
.pw-toggle:focus-visible {
  color: var(--accent, #7c5cbf);
}
.pw-toggle:focus {
  outline: none;
}

/* ── Inline field validation ──────────────────────────────────────────── */
.field-error {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--danger, #e05260);
}
.form-control-custom.is-invalid {
  border-color: var(--danger, #e05260);
}

/* ── Loading / skeleton ───────────────────────────────────────────────── */
.ab-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  color: var(--text-muted, #8a7898);
  font-size: 0.9rem;
  font-weight: 600;
}

.ab-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--skeleton-base, rgba(138, 120, 152, 0.12)) 25%,
    var(--skeleton-shine, rgba(138, 120, 152, 0.2)) 37%,
    var(--skeleton-base, rgba(138, 120, 152, 0.12)) 63%
  );
  background-size: 400% 100%;
  animation: abshimmer 1.4s ease infinite;
}
@keyframes abshimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-skeleton {
    animation: none;
  }
}

/* ── Modal ────────────────────────────────────────────────────────────── */
.ab-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(20, 12, 30, 0.55);
  backdrop-filter: blur(3px);
  animation: abfade 0.15s ease;
}
@keyframes abfade {
  from {
    opacity: 0;
  }
}
.ab-modal {
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, rgba(61, 32, 80, 0.12));
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(20, 12, 30, 0.28);
  animation: abpop 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes abpop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}
.ab-modal-sm {
  max-width: 380px;
}
.ab-modal-lg {
  max-width: 760px;
}
.ab-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem 0.75rem;
  border-bottom: 1px solid var(--border, rgba(61, 32, 80, 0.1));
}
.ab-modal-close {
  border: 0;
  background: none;
  color: var(--text-muted, #8a7898);
  font-size: 1rem;
  line-height: 1;
  padding: 0.25rem;
  cursor: pointer;
}
.ab-modal-close:hover {
  color: var(--text, inherit);
}
.ab-modal-body {
  padding: 1.1rem;
  overflow-y: auto;
}
.ab-modal-foot {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--border, rgba(61, 32, 80, 0.1));
}
@media (max-width: 575px) {
  .ab-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .ab-modal {
    max-width: none;
    border-radius: 20px 20px 0 0;
    max-height: 92dvh;
  }
}

/* ── Pagination ───────────────────────────────────────────────────────── */
.ab-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.ab-page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 0.5rem;
  border: 1px solid var(--border, rgba(61, 32, 80, 0.14));
  border-radius: 9px;
  background: var(--card-bg, #fff);
  color: var(--text-muted, #8a7898);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.ab-page-btn:hover:not(:disabled) {
  color: var(--accent, #3f37c9);
  border-color: var(--accent, #3f37c9);
}
.ab-page-btn.is-on {
  background: var(--accent, #3f37c9);
  border-color: var(--accent, #3f37c9);
  color: #fff;
}
.ab-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── Route-change progress bar ────────────────────────────────────────── */
.ab-routebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 300;
  background: transparent;
  pointer-events: none;
}
.ab-routebar > span {
  display: block;
  height: 100%;
  width: 30%;
  background: var(--accent, #3f37c9);
  animation: abroute 0.9s ease-in-out infinite;
}
@keyframes abroute {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-routebar > span {
    animation: none;
    width: 100%;
    opacity: 0.5;
  }
}

/* ── Auth pages (was inline in login.php / register.php) ──────────────── */
.auth-wrapper {
  flex: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.auth-card {
  width: 100%;
  max-width: 420px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.auth-brand img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.auth-brand span {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--plum);
}
.auth-footer-link {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.auth-footer-link a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

/* ── Password strength checklist (was partials/password-strength.php) ── */
.pw-rules {
    list-style: none;
    margin: 0;
    padding: 0 0.75rem;
    display: grid;
    gap: 0.3rem;
    background: var(--gray-bg, #f4f1f9);
    border-radius: 10px;
    /* Hidden until the password field is focused, then slides down; slides
       back up on blur. */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease, margin 0.3s ease;
  }
  .pw-rules.is-open {
    max-height: 260px;
    opacity: 1;
    margin: 0.5rem 0 0;
    padding: 0.6rem 0.75rem;
  }
  .pw-rules-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #6b6475);
    margin-bottom: 0.15rem;
  }
  .pw-rule {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--text-muted, #6b6475);
    transition: color 0.15s ease;
  }
  .pw-rule i { font-size: 0.95rem; flex: none; }
  .pw-rule.ok { color: #1a9e5c; }
  .pw-rule.ok i { color: #1a9e5c; }
  .pw-match-msg { font-size: 0.8rem; margin-top: 0.35rem; font-weight: 600; }
  .pw-match-msg.ok { color: #1a9e5c; }
  .pw-match-msg.err { color: var(--coral, #e0706a); }

/* ── Sidebar extras (was partials/sidebar.php) ─────────────────────── */
/* Brand header: name + tagline + a divider under it. */
  .brand-textwrap { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.1; }
  .brand-tagline { font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); margin-top: 2px; }
  .sidebar-brand { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .sidebar.collapsed .brand-textwrap { display: none; }

  /* Section labels (MAIN / MANAGE / PREFERENCES). */
  .nav-section-label {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.36);
    padding: 0.55rem 0.9rem 0.3rem;
  }
  .nav-section-label + .nav-section-label,
  .nav-group + .nav-section-label,
  .nav-link + .nav-section-label { margin-top: 0.35rem; }
  .sidebar.collapsed .nav-section-label { display: none; }

  /* "Go Premium" upsell card. */
  .sidebar-premium-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0.4rem 0.75rem 0.6rem;
    padding: 0.75rem 0.8rem;
    border-radius: 14px;
    text-decoration: none;
    /* One brand gradient — same premium card on the dark and white sidebar. */
    background: var(--brand-grad);
    border: none;
    box-shadow: 0 4px 14px rgba(63, 55, 201, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .sidebar-premium-card:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(63, 55, 201, 0.4); }
  /* The single gold touch in the app — a gem chip that reads as "Premium". */
  .spc-icon {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    color: var(--gold-light); font-size: 1.02rem;
  }
  .spc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .spc-text strong,
  .spc-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .spc-text strong { color: #fff; font-size: 0.9rem; line-height: 1.15; }
  .spc-text small { color: rgba(255, 255, 255, 0.78); font-size: 0.72rem; line-height: 1.25; }
  .spc-arrow {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.18); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 0.72rem;
  }
  .sidebar.collapsed .sidebar-premium-card { padding: 0.6rem 0.4rem; justify-content: center; }
  .sidebar.collapsed .spc-text,
  .sidebar.collapsed .spc-arrow { display: none; }

  /* Profile footer chevron. */
  .sidebar-profile-meta { flex: 1; min-width: 0; }
  .sidebar-profile-chev { color: rgba(255, 255, 255, 0.4); font-size: 0.9rem; flex: none; }
  .sidebar.collapsed .sidebar-profile-chev { display: none; }

/* ── Mobile bottom nav (was partials/bottom-nav.php) ─────────────────────── */
.mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 190; /* below the sidebar drawer (200) + its overlay (199) */
    display: none; /* shown only on mobile — see media query below */
    justify-content: space-around;
    align-items: center;
    /* Let the bar GROW to fit its content (icons + labels + the frosted icon
       pill padding added in premium.css) instead of a rigid height that can
       clip the labels. Always keeps some bottom breathing room, and honours
       the home-indicator safe area on notched phones. */
    box-sizing: border-box;
    min-height: 60px;
    height: auto;
    padding-top: 4px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    background: var(--card-bg, #fff);
    border-top: 1px solid var(--border, rgba(61, 32, 80, 0.12));
    box-shadow: 0 -2px 12px rgba(61, 32, 80, 0.08);
  }

  .mbn-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 0;
    background: none;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    color: var(--text-muted, #8A7898);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
  }
  .mbn-item i { font-size: 1.25rem; line-height: 1; transition: transform 0.12s ease; }
  .mbn-item.active,
  .mbn-item.active i { color: var(--accent, #3f37c9); }
  /* Instant press feedback — the icon dips the moment a finger lands, well
     before navigation, so a tap always feels acknowledged. */
  .mbn-item:active i { transform: scale(0.82); }
  /* Set by the nav loader on tap: show the destination tab as selected during
     the page-load wait, so it doesn't flip active only after the new page. */
  .mbn-item.mbn-going,
  .mbn-item.mbn-going i { color: var(--accent, #3f37c9); }

  /* Raised center "primary action" button — always accent (it never gets the
     .active state), a standing action rather than a nav tab. */
  .mbn-primary { color: var(--accent, #3f37c9); }
  .mbn-primary .mbn-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-top: -22px;   /* lift it above the bar */
    margin-bottom: 2px;
    border-radius: 50%;
    background: var(--accent, #3f37c9);
    color: #fff;
    box-shadow: 0 6px 16px rgba(63, 55, 201, 0.40);
  }
  .mbn-primary .mbn-fab i { font-size: 1.35rem; }

  @media (max-width: 991px) {
    .mobile-bottom-nav { display: flex; }
    /* Reserve space so page content never hides behind the fixed bar. */
    .main-content { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
  }

/* ── Topbar chips + onboarding nudge (were inline in partials/loader.php) ── */
.topbar-actions { display: flex; align-items: center; }

/* Premium streak badge (🔥 + day-count) that replaces the gem in the topbar. */
.topbar-streak {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: var(--brand-grad, linear-gradient(135deg, var(--accent-light), var(--accent)));
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.topbar-streak .bi-fire {
  font-size: 1rem;
  transform-origin: 50% 80%;
  animation: tsFlicker 2.6s ease-in-out infinite;
}
.topbar-streak .ts-count { font-variant-numeric: tabular-nums; }

/* Rewards points chip — same pill geometry, quieter colours so the two can
   sit side by side without competing. */
.topbar-points {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: var(--accent-pale);
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1;
}
.topbar-points .bi { font-size: 0.95rem; }
.topbar-points .tp-num { font-variant-numeric: tabular-nums; }
@keyframes tsFlicker {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .topbar-streak .bi-fire { animation: none; } }

/* Full-width notification bar directly under the sticky header. */
.onboarding-reminder {
  position: sticky;
  z-index: 99;                 /* just under the topbar's z-index: 100 */
  top: 0;                      /* replaced with the topbar height in JS */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.5rem 1rem;
  background: var(--accent-pale);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.onboarding-reminder .or-arrow { font-size: 1rem; transition: transform 0.15s ease; }
.onboarding-reminder:hover .or-arrow { transform: translateX(3px); }

/* ── Section tabs (was partials/section-tabs.php) ────────────────────── */
.section-tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin: 0 0 1.25rem;
    background: var(--accent-pale, #e8e6fb);
    border-radius: 12px;
    flex-wrap: wrap;
  }
  .section-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-muted, #8A7898);
    transition: background 0.15s, color 0.15s;
  }
  .section-tab:hover { color: var(--plum, #3D2050); }
  .section-tab.active {
    background: #fff;
    color: var(--plum, #3D2050);
    box-shadow: 0 1px 3px rgba(61, 32, 80, 0.12);
  }

/* ── Daily Log food rows + inline edit (were inline in log.php) ─────── */
.fe-actions { display: flex; gap: 0.1rem; align-items: center; flex: none; }
          .food-entry.editing { background: var(--gray-bg); border-radius: 12px 12px 0 0; }
          .food-edit-form {
            border: 1px solid var(--border); border-top: none;
            border-radius: 0 0 12px 12px; background: var(--gray-bg);
            padding: 0.85rem; margin: -0.1rem 0 0.55rem;
            display: flex; flex-direction: column; gap: 0.6rem;
          }
          .food-edit-form .fe-edit-row { display: grid; grid-template-columns: 1.5fr 0.9fr 0.8fr; gap: 0.5rem; }
          .food-edit-form .fe-edit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
          .food-edit-form .fe-nut { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.7rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
          .food-edit-form .fe-nut em { font-style: normal; opacity: 0.65; text-transform: none; }
          .food-edit-form .fe-nut input, .food-edit-form .fe-edit-row input, .food-edit-form .fe-edit-row select { font-size: 0.9rem; }
          .food-edit-form .fe-e-name { font-weight: 600; }
          .food-edit-form .fe-edit-actions { display: flex; gap: 0.6rem; margin-top: 0.15rem; }
          .food-edit-form .fe-edit-actions .btn { flex: 1 1 50%; display: inline-flex; align-items: center; justify-content: center; }
          @media (min-width: 560px) { .food-edit-form .fe-edit-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Activities manager rows + icon picker ───────────────────────────── */
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 0.4rem;
}
.icon-choice {
  height: 44px;
  border: 1px solid var(--border, rgba(61, 32, 80, 0.14));
  border-radius: 10px;
  background: var(--card-bg, #fff);
  color: var(--text-muted, #8a7898);
  font-size: 1.1rem;
  cursor: pointer;
}
.icon-choice:hover { color: var(--accent, #3f37c9); border-color: var(--accent, #3f37c9); }
.icon-choice.active {
  background: var(--accent-pale, #e8e6fb);
  color: var(--accent, #3f37c9);
  border-color: var(--accent, #3f37c9);
}
.reminder-actions { display: flex; gap: 0.1rem; align-items: center; flex: none; }

/* ── Monthly report controls (were inline in insights.php) ───────────── */
.report-controls { display: flex; flex-direction: column; gap: 0.6rem; }
.report-btn-row { display: flex; gap: 0.6rem; }
.report-btn-row .btn { flex: 1 1 50%; display: inline-flex; align-items: center; justify-content: center; }

/* ── Check-in prompt cards (was partials/checkin-reminders.php) ─────── */
.checkin-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
  }
  .checkin-card + .checkin-card { border-top: 1px solid var(--border); }
  .checkin-icon {
    flex: none; width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; background: var(--accent-pale); color: var(--accent);
  }
  .checkin-meta { flex: 1; min-width: 0; }
  .checkin-name { font-weight: 700; color: var(--plum); font-size: 0.98rem; margin-bottom: 0.15rem; }
  .checkin-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.4; }
  .checkin-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.4rem; }
  /* Uses the shared .reminder-switch (brand-gradient) so the check-in toggles
     match the reminder toggles above them on this page. */
  .checkin-switch { flex: none; padding-top: 0.2rem; }
  .checkin-saved {
    font-size: 0.72rem; font-weight: 600; color: #1a9e5c;
    opacity: 0; transition: opacity 0.2s ease; white-space: nowrap;
  }
  .checkin-saved.show { opacity: 1; }

/* ── Premium page (was inline in premium.php) ───────────────────────── */
.prem-hero {
      text-align: center;
      padding: 1.75rem 1.25rem;
      background: var(--brand-grad);
      color: #fff;
      border-radius: 20px;
      margin-bottom: 1.5rem;
    }
    .prem-hero .bi-gem { font-size: 2.4rem; }
    .prem-hero h1 { font-size: 1.5rem; font-weight: 800; margin: 0.5rem 0 0.35rem; }
    .prem-hero p { opacity: 0.92; margin: 0 auto; max-width: 460px; font-size: 0.9rem; }
    .prem-status {
      display: inline-flex; align-items: center; gap: 0.4rem;
      margin-top: 0.9rem; padding: 0.4rem 0.9rem; border-radius: 999px;
      background: rgba(255, 255, 255, 0.18); font-weight: 700; font-size: 0.85rem;
    }
    /* Lapsed access shouldn't wear the same confident chip as active access. */
    .prem-status-expired { background: rgba(0, 0, 0, 0.22); }
    .prem-perk { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.9rem 0; }
    .prem-perk + .prem-perk { border-top: 1px solid var(--border); }
    .prem-perk-icon {
      flex: none; width: 44px; height: 44px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
      background: var(--brand-grad); color: #fff;
    }
    .prem-perk-title { font-weight: 700; color: var(--plum); }
    .prem-perk-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; }
    .prem-soon {
      text-align: center; font-size: 0.82rem; color: var(--text-muted);
      border: 1px dashed var(--border); border-radius: 12px; padding: 0.9rem;
    }
    .prem-content { max-width: 640px; margin: 0 auto; }
    /* Centre the whole block in the page on desktop. */
    @media (min-width: 992px) {
      .prem-content-area {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(100vh - 130px);
        min-height: calc(100dvh - 130px);
      }
      .prem-content { width: 100%; }
    }

/* ── Discover page (was inline in discover.php) ─────────────────────── */
/* Describe row: input on its own full-width line + full-width button on
           mobile; side by side on desktop. */
        .discover-search-row { display: flex; flex-direction: column; gap: 0.5rem; }
        .discover-search-row input { width: 100%; }
        .discover-search-row .btn { width: 100%; white-space: nowrap; }
        @media (min-width: 576px) {
          .discover-search-row { flex-direction: row; }
          .discover-search-row input { flex: 1; }
          .discover-search-row .btn { width: auto; }
        }

        /* Nutrition source: labelled, full-width 2-segment control on mobile. */
        .discover-source-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.4rem; }
        .discover-source-toggle { display: flex; width: 100%; gap: 3px; padding: 3px; border-radius: 12px; background: var(--gray-bg); border: 1.5px solid var(--border); }
        .discover-source-opt { flex: 1; margin: 0; cursor: pointer; }
        .discover-source-opt input { position: absolute; opacity: 0; pointer-events: none; }
        .discover-source-opt span { display: flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.5rem 0.8rem; font-size: 0.82rem; font-weight: 700; white-space: nowrap; color: var(--text-muted); border-radius: 9px; transition: background 0.15s, color 0.15s; }
        .discover-source-opt input:checked + span { background: var(--brand-grad); color: var(--on-brand, #fff); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
        @media (min-width: 576px) { .discover-source-toggle { display: inline-flex; width: auto; } }

        /* Scan actions: full-width buttons on mobile, 50 / 50 on desktop. */
        .discover-btn-row { display: flex; flex-direction: column; gap: 0.5rem; }
        .discover-btn-row > button { width: 100%; display: inline-flex; align-items: center; justify-content: center; }
        @media (min-width: 576px) {
          .discover-btn-row { flex-direction: row; }
          .discover-btn-row > button { flex: 1 1 50%; }
        }

/* ── Streak page (was inline in streak.php) ─────────────────────────── */
/* Hero — no loud background; the theme accent carries it. */
    .streak-hero { display: block; }
    /* Row 1: streak count on the left, flame on the right. */
    .streak-hero-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .streak-hero-num { font-size: 3.2rem; font-weight: 800; line-height: 1; color: var(--plum); }
    .streak-hero-sub { font-size: 1.05rem; font-weight: 700; color: var(--plum); margin-top: 0.15rem; }
    .streak-hero-note { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.5rem; }

    /* Row 2: this-week 7-day tracker spread full-width, treasure at the end. */
    .streak-week {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-top: 1rem;
      flex-wrap: nowrap;
      width: 100%;
    }
    .sw-days { display: flex; gap: 0.4rem; flex: 1; justify-content: space-between; }
    .sw-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .sw-dot {
      width: 27px; height: 27px; border-radius: 50%;
      border: 1.5px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.78rem; color: var(--on-brand);
      transition: transform 0.15s ease;
    }
    .sw-day.is-active .sw-dot { background: var(--brand-grad); border-color: transparent; }
    .sw-day.is-today .sw-dot { box-shadow: 0 0 0 2px var(--accent); }
    .sw-day.is-future .sw-dot { opacity: 0.5; }
    .sw-lbl { font-size: 0.6rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }

    .sw-treasure {
      width: 34px; height: 34px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; color: var(--text-muted);
      border: 1.5px dashed var(--border);
      align-self: center;
    }
    .sw-treasure.is-unlocked {
      color: #5b3d00; border: none;
      background: linear-gradient(135deg, var(--gold, #f5c518), var(--gold-deep, #d9a800));
      box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.25);
      animation: swPop 0.4s ease;
    }
    @keyframes swPop { 0% { transform: scale(0.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
    .streak-hero .bi-fire {
      font-size: 3.6rem; color: var(--accent-light);
      transform-origin: 50% 80%;
      animation: shFlame 2.8s ease-in-out infinite;
    }
    @keyframes shFlame { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
    @media (prefers-reduced-motion: reduce) { .streak-hero .bi-fire { animation: none; } }

    .streak-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
    .streak-stat { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 0.9rem 0.6rem; text-align: center; box-shadow: var(--shadow); }
    .streak-stat-num { font-size: 1.5rem; font-weight: 800; color: var(--plum); }
    .streak-stat-lbl { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }

    /* Calendar — active days are rings (no fill), in the accent colour. */
    .cal-head { display: flex; align-items: center; justify-content: space-between; }
    .cal-nav {
      width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center; color: var(--accent);
      text-decoration: none; background: var(--white);
    }
    .cal-nav.disabled { opacity: 0.35; pointer-events: none; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; }
    .cal-dow { text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; padding-bottom: 0.35rem; }
    .cal-cell { aspect-ratio: 1 / 1; position: relative; display: flex; align-items: center; justify-content: center; }
    /* Apple-style progress ring: conic fill for the completed %, radial mask
       cuts the donut hole. Fills to the average of the day's goals. */
    .cal-ring {
      position: absolute; inset: 6%; border-radius: 50%;
      background: conic-gradient(var(--accent-light) calc(var(--pct, 0) * 1%), var(--accent-pale) 0);
      -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 5px));
              mask: radial-gradient(farthest-side, #0000 calc(100% - 5px), #000 calc(100% - 5px));
    }
    .cal-num {
      position: relative; z-index: 1;
      font-size: 0.8rem; font-weight: 600; color: var(--text);
      width: 62%; height: 62%; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    }
    .cal-num.is-today { background: var(--accent-light); color: var(--on-brand, #fff); font-weight: 800; }
    .cal-num.future { color: var(--text-muted); opacity: 0.55; }
    .cal-clickable { cursor: pointer; }
    .cal-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }

    /* Day-detail popup: what completed / is still pending for a tapped date. */
    .cal-pop-overlay {
      position: fixed; inset: 0; z-index: 3000;
      background: rgba(20, 10, 30, 0.45);
      display: flex; align-items: center; justify-content: center; padding: 22px;
      opacity: 0; pointer-events: none; transition: opacity 0.18s ease;
    }
    .cal-pop-overlay.show { opacity: 1; pointer-events: auto; }
    .cal-pop {
      background: var(--card-bg, #fff); color: var(--text);
      border-radius: 16px; width: min(92vw, 330px);
      box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.28));
      padding: 1.1rem 1.15rem; transform: translateY(8px); transition: transform 0.18s ease;
    }
    .cal-pop-overlay.show .cal-pop { transform: translateY(0); }
    .cal-pop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; }
    .cal-pop-date { font-weight: 800; color: var(--plum); font-size: 1rem; }
    .cal-pop-pct { font-weight: 800; color: var(--accent); font-size: 0.9rem; }
    .cal-goal { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0; border-top: 1px solid var(--border); }
    .cal-goal-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
    .cal-goal.done .cal-goal-ic { background: var(--brand-grad); color: var(--on-brand, #fff); }
    .cal-goal.pending .cal-goal-ic { border: 1.5px solid var(--border); color: var(--text-muted); }
    .cal-goal-txt { flex: 1; min-width: 0; }
    .cal-goal-name { display: block; font-weight: 600; font-size: 0.86rem; color: var(--text); }
    .cal-goal-sub { display: block; font-size: 0.76rem; color: var(--text-muted); margin-top: 1px; }
    .cal-goal.pending .cal-goal-sub { color: var(--accent); font-weight: 600; }
    .cal-pop-done { text-align: center; font-size: 0.82rem; color: var(--text-muted); padding-top: 0.7rem; }
    .cal-pop-close { margin-top: 0.9rem; width: 100%; }

    /* Expandable Activities row → per-activity done/pending detail. */
    .cal-goal-act { cursor: pointer; }
    .cal-act-chev { font-size: 0.7rem; color: var(--text-muted); transition: transform 0.18s ease; }
    .cal-goal-act.expanded .cal-act-chev { transform: rotate(180deg); }
    .cal-act-detail { max-height: 220px; overflow-y: auto; padding: 0.25rem 0 0.3rem 2.9rem; }
    .cal-act-item {
      display: flex; align-items: center; gap: 0.55rem;
      padding: 0.32rem 0; font-size: 0.82rem; color: var(--text-muted);
    }
    .cal-act-item > .bi:first-child { color: var(--text-muted); font-size: 0.95rem; width: 1.1rem; text-align: center; }
    .cal-act-item.done { color: var(--text); }
    .cal-act-item.done > .bi:first-child { color: var(--accent); }
    .cal-act-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cal-act-status { flex: none; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 600; color: var(--accent); }
    .cal-act-item.done .cal-act-status { color: var(--text-muted); font-weight: 500; }

    .ach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .ach-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; gap: 0.35rem; box-shadow: var(--shadow); }
    /* All achievement icons share the bright theme accent — monotone, no box. */
    .ach-icon {
      display: flex; align-items: center; justify-content: flex-start;
      font-size: 1.7rem; color: var(--accent-light); margin-bottom: 0.25rem;
    }
    .ach-num { font-size: 1.4rem; font-weight: 800; color: var(--plum); line-height: 1.1; }
    .ach-lbl { font-size: 0.78rem; color: var(--text-muted); }
    .ach-sub { font-size: 0.72rem; color: var(--text-muted); }

    .goal-track { display: flex; align-items: center; gap: 0.2rem; }
    .goal-node { flex: none; }
    .goal-dot-lg {
      width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 0.85rem; border: 2px solid var(--border); background: var(--gray-bg); color: var(--text-muted);
    }
    .goal-dot-lg.reached { border-color: transparent; background: var(--accent-light); color: var(--on-brand, #fff); }
    .goal-bar { height: 6px; border-radius: 999px; background: var(--border); flex: 1; overflow: hidden; }
    .goal-bar span { display: block; height: 100%; background: var(--accent-light); transition: width 1.1s cubic-bezier(.22, 1, .36, 1); }

    .society-card { display: flex; align-items: center; gap: 1rem; }
    .society-lock {
      width: 48px; flex: none; display: flex; align-items: center; justify-content: center;
      font-size: 2rem; color: var(--accent-light);
    }

/* ── Accent colour picker ────────────────────────────────────────────── */
.accent-swatch-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.accent-swatch {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(20, 12, 30, 0.18);
}
.accent-swatch.is-on { border-color: var(--plum, #3d2050); transform: scale(1.06); }

/* ── Admin table (was inline in admin.php) ──────────────────────────── */
.admin-table {
      width: 100%;
      font-size: 0.85rem;
      border-collapse: separate;
      border-spacing: 0;
    }

    .admin-table th {
      text-align: left;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      padding: 0.6rem 0.75rem;
      border-bottom: 1.5px solid var(--border);
      white-space: nowrap;
    }

    .admin-table td {
      padding: 0.65rem 0.75rem;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
      white-space: nowrap;
    }

    .admin-table tr:last-child td {
      border-bottom: none;
    }

    .admin-badge {
      display: inline-block;
      padding: 0.15rem 0.55rem;
      border-radius: 999px;
      font-size: 0.7rem;
      font-weight: 600;
      /* add from 700 to 600 */
    }

    .admin-badge-admin {
      background: var(--accent-pale);
      color: var(--accent);
    }

    .admin-badge-premium {
      background: linear-gradient(135deg, var(--gold), var(--gold-deep));
      color: #3d2050;
    }

    .admin-badge-free {
      background: var(--gray-bg);
      color: var(--text-muted);
    }

    .admin-badge-verified {
      background: #e6f7ee;
      color: #1a9e5c;
    }

    .admin-badge-unverified {
      background: #fdeee9;
      color: var(--coral);
    }

    .admin-badge-onboarded {
      background: #e6f7ee;
      color: #1a9e5c;
    }

    .admin-badge-pending {
      background: var(--border);
      color: var(--text-muted);
    }

    .admin-row-actions {
      display: flex;
      gap: 0.4rem;
    }

    .admin-row-actions form {
      display: inline;
    }

/* ── Avatar builder ──────────────────────────────────────────────────── */
.av-builder { max-width: 560px; margin: 0 auto; }
.av-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.av-preview svg { width: 180px; height: auto; }
.av-group { margin-bottom: 1.1rem; }
.av-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}
.av-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.av-chip {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card-bg, #fff);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.av-chip:hover { border-color: var(--accent); color: var(--accent); }
.av-chip.is-on {
  background: var(--brand-grad, var(--accent));
  border-color: transparent;
  color: var(--on-brand, #fff);
}
.av-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.av-swatch {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.av-swatch.is-on { border-color: var(--plum, #3d2050); transform: scale(1.08); }
.av-actions { margin-top: 1.5rem; }