body {
        font-family:
          "Nunito",
          system-ui,
          -apple-system,
          "Segoe UI",
          Roboto,
          sans-serif;
        visibility: hidden;
      }
      .planner-mode-btn {
        background: #fff;
        border-color: #e2e8f0;
        color: #6b7280;
      }
      .planner-mode-btn .mode-check-icon {
        visibility: hidden;
      }
      .family-planner-btn {
        background: #fff;
        border-color: #e2e8f0;
        color: #6b7280;
      }
      .family-planner-btn.f-active {
        background: #faf5ff;
        border-color: #c084fc;
        color: #7e22ce;
      }
      .family-member-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 10px;
        border: 1px solid #f1f5f9;
        background: #f8fafc;
      }
      /* Meal selection modal */
      #meal-pick-modal {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        z-index: 9999;
        overflow-y: auto;
        padding: 2rem 1rem;
      }
      #meal-pick-modal.hidden {
        display: none;
      }
      #meal-pick-modal .modal-box {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 8px 48px rgba(0, 0, 0, 0.18);
        width: 100%;
        max-width: 640px;
        overflow: hidden;
        margin: auto;
      }
      .mpm-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 8px;
        max-height: 360px;
        overflow-y: auto;
        padding: 16px;
      }
      .mpm-item {
        position: relative;
        border: 2px solid #e5e7eb;
        border-radius: 10px;
        padding: 10px 12px;
        cursor: pointer;
        transition:
          border-color 0.12s,
          background 0.12s;
        user-select: none;
      }
      .mpm-item:hover {
        border-color: #a78bfa;
        background: #faf5ff;
      }
      .mpm-item.mpm-selected {
        border-color: #7c3aed;
        background: #f5f3ff;
      }
      .mpm-check {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        border: 2px solid #d1d5db;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        color: transparent;
        transition: all 0.1s;
      }
      .mpm-item.mpm-selected .mpm-check {
        background: #7c3aed;
        border-color: #7c3aed;
        color: #fff;
      }
      .mpm-name {
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
        margin-right: 20px;
        line-height: 1.3;
      }
      .mpm-type {
        font-size: 11px;
        color: #64748b;
        margin-top: 2px;
      }

      /* ──────────────────────────────────────────────────────────────────
         Stove Pals brand theme
         Aligns this page with the rest of the app: Nunito, navy/blue on
         icy-blue, soft cards, no gradients. Overrides the generic Tailwind
         palette used in the markup.
         ────────────────────────────────────────────────────────────────── */

      /* Base reset — tw-compat.css ships no preflight, so the default body
         margin and content-box sizing leak through (header inset from the
         edges, full-width inputs overflowing their containers). The Tailwind
         utilities here assume border-box, matching the rest of the site. */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      body {
        margin: 0;
      }

      /* Page background — solid icy blue (no gradient) */
      body.bg-slate-50 {
        background-color: #eef4fb;
      }

      /* Headings — brand navy, Nunito weight */
      #account-view h1,
      #account-view h3,
      #account-view h4,
      #auth-view h1,
      #auth-view h2 {
        font-weight: 800;
        letter-spacing: -0.01em;
      }

      /* Text palette retuned toward navy/blue-grey */
      .text-slate-900 {
        color: #0c2c4f !important;
      }
      .text-slate-800 {
        color: #21364f !important;
      }
      .text-slate-700 {
        color: #3a5170 !important;
      }
      .text-slate-600 {
        color: #516a87 !important;
      }
      .text-slate-500 {
        color: #6b7c93 !important;
      }
      .text-slate-400 {
        color: #8aa0b8 !important;
      }

      /* Cards — brand border + soft navy shadow */
      #account-view section.bg-white,
      #auth-view .bg-white,
      #feedback-modal .bg-white,
      .modal-box {
        border-color: #dbe7f3 !important;
        box-shadow: 0 4px 16px rgba(8, 52, 99, 0.06) !important;
      }

      /* Sticky header */
      #account-view > header {
        border-color: #dbe7f3 !important;
        box-shadow: 0 1px 0 rgba(8, 52, 99, 0.05);
      }

      /* Primary brand blue (#1b6fd8) for all actions + accents */
      .bg-blue-600,
      .bg-emerald-600,
      .bg-purple-600 {
        background-color: #1b6fd8 !important;
      }
      .hover\:bg-blue-700:hover,
      .hover\:bg-emerald-700:hover,
      .hover\:bg-purple-700:hover {
        background-color: #0d4fa8 !important;
      }
      .text-blue-600,
      .text-purple-600 {
        color: #1b6fd8 !important;
      }

      /* Active toggle state (planner mode / calories).
         These classes are toggled by JS but were undefined in tw-compat. */
      .border-blue-400 {
        border-color: #1b6fd8 !important;
      }
      .bg-blue-50 {
        background-color: #eaf2fc !important;
      }
      .text-blue-700 {
        color: #0d4fa8 !important;
      }

      /* Soft icon tiles — cool, on-brand tints */
      .bg-blue-100 {
        background-color: #dce9fa !important;
      }
      .bg-purple-100 {
        background-color: #dce9fa !important;
      }
      .bg-purple-50 {
        background-color: #eaf2fc !important;
      }
      .text-purple-400 {
        color: #7aa6e0 !important;
      }
      .border-purple-100 {
        border-color: #cfe0f6 !important;
      }
      .border-purple-200 {
        border-color: #bcd5f2 !important;
      }
      .hover\:bg-purple-50:hover {
        background-color: #eaf2fc !important;
      }
      .hover\:text-purple-600:hover {
        color: #1b6fd8 !important;
      }
      .hover\:text-purple-800:hover {
        color: #0d4fa8 !important;
      }

      /* Focus rings — brand blue everywhere */
      .focus\:ring-blue-400:focus,
      .focus\:ring-blue-500:focus,
      .focus\:ring-emerald-500:focus,
      .focus\:ring-purple-400:focus {
        box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.28) !important;
      }
      .focus\:border-blue-500:focus,
      .focus\:border-emerald-500:focus {
        border-color: #1b6fd8 !important;
      }

      /* Pointer cursor on all interactive controls */
      #account-view button:not(:disabled),
      #account-view a,
      #auth-view button:not(:disabled),
      #auth-view a,
      #feedback-modal button,
      .modal-box button {
        cursor: pointer;
      }

      /* Calorie toggle had no base border color, so border-2 fell back to
         currentColor (black). Match the planner-mode buttons. */
      .calories-toggle-btn {
        background: #fff;
        border-color: #e2e8f0;
        color: #6b7280;
      }

      /* Drop the default black focus outline; keep a brand ring for keyboard
         navigation only (focus-visible). */
      #account-view button:focus,
      #auth-view button:focus,
      #feedback-modal button:focus,
      .modal-box button:focus {
        outline: none;
      }
      #account-view button:focus-visible,
      #auth-view button:focus-visible,
      #feedback-modal button:focus-visible,
      .modal-box button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.28);
      }

      /* Family planner-style toggle (overrides inline purple) */
      .family-planner-btn.f-active {
        background: #eaf2fc;
        border-color: #1b6fd8;
        color: #0d4fa8;
      }

      /* Meal-pick modal accents (override inline purple) */
      .mpm-item:hover {
        border-color: #9dc0ee;
        background: #f3f8fe;
      }
      .mpm-item.mpm-selected {
        border-color: #1b6fd8;
        background: #eaf2fc;
      }
      .mpm-item.mpm-selected .mpm-check {
        background: #1b6fd8;
        border-color: #1b6fd8;
      }
      #mpm-select-all {
        color: #1b6fd8 !important;
      }

      /* ══════════════════════════════════════════════════════════════════════
         ACCOUNT — Nutrition-tab design system
         Mirrors the .nutri-* / .family-* language from plan.css: grouped
         sections (navy title + pill tag) above soft-shadowed cards, blue
         accent, navy headers, icy gradient background. Rules below intentionally
         override the older bases (planner/calorie buttons, member rows,
         background) by coming later in the cascade.
         ══════════════════════════════════════════════════════════════════════ */
      :root {
        --accent: #1b6fd8;
        --accent-hover: #1662c1;
        --muted: #6b7c93;
        --text-header: #083463;
        --text-main: #05223a;
        --border-subtle: rgba(200, 215, 235, 0.6);
        --bg-body: linear-gradient(180deg, #f4fbff, #e6f1ff 40%, #f0f7ff 100%);
        --card-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
        --danger: #d33b3b;
      }

      /* Unified spinner — dual-tone ring matching the rest of the app
         (see global.css .spinner). Kept local since this page doesn't
         load global.css. */
      .spinner {
        display: inline-block;
        width: 2.5rem;
        height: 2.5rem;
        border: 4px solid var(--accent);
        border-top-color: #ffffff;
        border-radius: 50%;
        animation: spinner-spin 0.85s linear infinite;
        flex-shrink: 0;
      }
      .spinner--sm {
        width: 1.15rem;
        height: 1.15rem;
        border-width: 2px;
      }
      @keyframes spinner-spin {
        to {
          transform: rotate(360deg);
        }
      }

      .select-none {
        user-select: none;
      }
      .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* Page background — icy gradient, matching the app */
      body.bg-slate-50 {
        background: var(--bg-body);
        background-attachment: fixed;
        color: var(--text-main);
        min-height: 100vh;
        min-height: 100dvh;
      }

      /* Mobile hardening (iOS Safari / Chrome) */
      html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }
      /* Keep fields ≥16px on phones so focusing them never zooms the page. */
      @media (max-width: 768px) {
        input:not([type="checkbox"]):not([type="radio"]):not(
            [type="range"]
          ):not([type="color"]),
        select,
        textarea {
          font-size: 16px !important;
        }
      }

      /* ── Sticky header ─────────────────────────────────────────────────── */
      #account-view > header.acct-header {
        background: rgba(255, 255, 255, 0.85);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--border-subtle);
        box-shadow: 0 1px 0 rgba(8, 52, 99, 0.04);
        position: sticky;
        top: 0;
        z-index: 20;
      }
      .acct-header-inner {
        max-width: 760px;
        margin: 0 auto;
        padding: 0 1.5rem;
        height: 56px;
        display: flex;
        align-items: center;
        gap: 0.75rem;
      }
      .acct-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-left: -6px;
        border-radius: 10px;
        color: var(--muted);
        text-decoration: none;
        transition:
          background 0.15s ease,
          color 0.15s ease;
      }
      .acct-back:hover {
        background: rgba(27, 111, 216, 0.08);
        color: var(--text-header);
      }
      .acct-header-title {
        flex: 1;
        margin: 0;
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--text-header);
        letter-spacing: -0.01em;
      }
      .acct-header-logo {
        width: 28px;
        height: 28px;
        opacity: 0.85;
      }

      /* ── Scroll body (mirrors .nutri-view / .family-view) ──────────────── */
      .acct-view {
        max-width: 760px;
        margin: 0 auto;
        padding: 1.5rem 2rem 3rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
      }

      /* ── Grouped section (mirrors .nutri-group) ────────────────────────── */
      .acct-group {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      /* Brief highlight when a /account#<section> deep link lands here, so
         the section that was asked for is obvious after the scroll (see
         consumeSectionHash in account.js). */
      .acct-group--flash > .acct-card {
        animation: acct-flash 1.5s ease-out;
      }
      @keyframes acct-flash {
        0%,
        55% {
          box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.35);
        }
        100% {
          box-shadow: 0 0 0 3px rgba(27, 111, 216, 0);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .acct-group--flash > .acct-card {
          animation: none;
        }
      }
      .acct-group-head {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex-wrap: wrap;
        padding: 0 0.15rem;
      }
      .acct-group-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--text-header);
        margin: 0;
      }
      .acct-group-tag {
        font-size: 0.62rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.18rem 0.55rem;
        border-radius: 999px;
      }
      .acct-group-tag.shared {
        background: rgba(27, 111, 216, 0.1);
        color: #1662c1;
      }
      .acct-group-tag.personal {
        background: rgba(40, 167, 69, 0.12);
        color: #1e8035;
      }
      .acct-group-tag.soon {
        background: rgba(245, 158, 11, 0.14);
        color: #b45309;
      }

      /* ── Preferences subgroup disclosure (mirrors picker-more-filters in
         plan.css: native <details>/<summary>, no JS state needed — content
         stays in the DOM and readable/settable while collapsed). ────────── */
      .acct-subgroup {
        display: flex;
        flex-direction: column;
      }
      .acct-subgroup-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
        list-style: none;
        cursor: pointer;
        padding: 0.9rem 1.1rem;
        border: 1px solid var(--border-subtle);
        border-radius: 14px;
        background: #fff;
        box-shadow: var(--card-shadow);
        transition: border-color 0.15s ease, background 0.15s ease;
      }
      .acct-subgroup-summary::-webkit-details-marker {
        display: none;
      }
      .acct-subgroup-summary:hover {
        border-color: #b8d2f2;
        background: #f7faff;
      }
      .acct-subgroup[open] > .acct-subgroup-summary {
        border-radius: 14px 14px 0 0;
        border-bottom-color: transparent;
      }
      .acct-subgroup-titlewrap {
        display: flex;
        align-items: baseline;
        gap: 0.55rem;
        flex-wrap: wrap;
        min-width: 0;
      }
      .acct-subgroup-title {
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--text-header);
      }
      .acct-subgroup-hint {
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--muted);
      }
      .acct-subgroup-chevron {
        color: #b6c6db;
        font-size: 0.85rem;
        flex-shrink: 0;
        transition: transform 0.18s ease;
      }
      .acct-subgroup[open] .acct-subgroup-chevron {
        transform: rotate(180deg);
      }
      .acct-subgroup-content {
        padding: 1.1rem;
        border: 1px solid var(--border-subtle);
        border-top: none;
        border-radius: 0 0 14px 14px;
        background: #fbfcfe;
      }
      /* Explicit open/closed display rules rather than relying on the UA
         stylesheet's implicit `details:not([open]) > *:not(summary)
         { display: none }` — an unconditional author `display` declaration
         here would otherwise always beat that UA rule (author origin
         outranks UA origin regardless of selector specificity). */
      .acct-subgroup:not([open]) > .acct-subgroup-content {
        display: none;
      }
      .acct-subgroup[open] .acct-subgroup-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      /* ── Card surface (mirrors .nutri-card) ────────────────────────────── */
      .acct-card {
        background: #fff;
        border: 1px solid var(--border-subtle);
        border-radius: 14px;
        padding: 1.25rem;
        box-shadow: var(--card-shadow);
      }
      .acct-card.is-link {
        padding: 0;
        overflow: hidden;
        transition: border-color 0.15s ease;
      }
      .acct-card.is-link:hover {
        border-color: #b8d2f2;
      }
      .acct-card-link {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        padding: 1.1rem 1.25rem;
        text-decoration: none;
      }

      .acct-section-title {
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.09em;
        color: var(--muted);
        margin: 0 0 0.9rem;
      }

      /* Card header row: icon tile + title + description */
      .acct-card-head {
        display: flex;
        align-items: flex-start;
        gap: 0.9rem;
      }
      .acct-card-head--gap {
        margin-bottom: 1rem;
      }
      .acct-card-head--gap-lg {
        margin-bottom: 1.1rem;
      }
      .acct-icon {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
      }
      .acct-icon.blue {
        background: rgba(27, 111, 216, 0.1);
        color: var(--accent);
      }
      .acct-icon.green {
        background: rgba(40, 167, 69, 0.12);
        color: #1e8035;
      }
      .acct-icon.amber {
        background: rgba(245, 158, 11, 0.14);
        color: #c47d11;
      }
      .acct-icon.slate {
        background: rgba(107, 124, 147, 0.12);
        color: var(--muted);
      }
      .acct-icon.danger {
        background: rgba(211, 59, 59, 0.1);
        color: #c0392b;
      }
      .acct-icon.violet {
        background: rgba(139, 92, 246, 0.12);
        color: #7c3aed;
      }
      .acct-card-headtext {
        flex: 1;
        min-width: 0;
      }
      .acct-card-title {
        font-size: 0.98rem;
        font-weight: 800;
        color: var(--text-header);
        margin: 0;
      }
      .acct-card-desc {
        font-size: 0.83rem;
        color: var(--muted);
        margin: 0.2rem 0 0;
        line-height: 1.45;
      }
      .acct-card-desc--tight {
        margin: 0 0 0.65rem;
      }
      .acct-chevron {
        color: #b6c6db;
        font-size: 0.85rem;
        flex-shrink: 0;
        align-self: center;
      }

      .acct-divider {
        height: 1px;
        background: var(--border-subtle);
        margin: 1.15rem 0;
      }
      .acct-field-label {
        display: block;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--text-header);
        margin: 0 0 0.4rem;
      }
      .acct-status {
        font-size: 0.75rem;
        margin: 0.45rem 0 0;
      }
      .text-danger {
        color: #dc2626;
      }
      .text-success {
        color: #16a34a;
      }

      /* ── Buttons ───────────────────────────────────────────────────────── */
      .acct-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding: 0.6rem 1rem;
        border-radius: 10px;
        border: 1px solid transparent;
        font-family: inherit;
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.2;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        transition: all 0.18s ease;
      }
      .acct-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
      }
      .acct-btn-sm {
        padding: 0.45rem 0.8rem;
        font-size: 0.8rem;
      }
      .acct-btn-sm--spaced {
        margin-top: 0.85rem;
      }
      .acct-status--tight {
        margin: 0.1rem 0 0;
      }
      .acct-loading-row {
        display: flex;
        justify-content: center;
        padding: 1rem 0;
      }
      .footer-heart {
        height: 1.1em;
        width: 1.1em;
        object-fit: contain;
        vertical-align: -0.2em;
        margin: 0 4px;
      }
      .acct-btn-block {
        width: 100%;
      }
      .acct-btn-primary {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
      }
      .acct-btn-primary:hover:not(:disabled) {
        background: var(--accent-hover);
        border-color: var(--accent-hover);
        transform: translateY(-1px);
      }
      .acct-btn-soft {
        background: #f3f8ff;
        color: var(--text-header);
        border-color: #d3e3f7;
      }
      .acct-btn-soft:hover:not(:disabled) {
        background: #e7f1ff;
        border-color: #b8d2f2;
      }
      .acct-btn-ghost {
        background: transparent;
        color: var(--muted);
        border-color: var(--border-subtle);
      }
      .acct-btn-ghost:hover:not(:disabled) {
        background: rgba(27, 111, 216, 0.06);
        color: var(--text-header);
      }
      .acct-btn-danger-soft {
        background: rgba(211, 59, 59, 0.08);
        color: #c0392b;
        border-color: rgba(211, 59, 59, 0.25);
      }
      .acct-btn-danger-soft:hover:not(:disabled) {
        background: rgba(211, 59, 59, 0.14);
      }
      .acct-btn-danger {
        background: var(--danger);
        color: #fff;
        border-color: var(--danger);
      }
      .acct-btn-danger:hover:not(:disabled) {
        background: #b71c1c;
        border-color: #b71c1c;
      }
      .acct-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.28);
      }
      .acct-btn-danger:focus-visible,
      .acct-btn-danger-soft:focus-visible {
        box-shadow: 0 0 0 3px rgba(211, 59, 59, 0.25);
      }

      /* ── Inputs ────────────────────────────────────────────────────────── */
      .acct-input {
        width: 100%;
        height: 2.65rem;
        padding: 0 0.82rem;
        border: 1.5px solid #d7e1ee;
        border-radius: 10px;
        background: #fff;
        color: #0f172a;
        font-size: 0.92rem;
        font-family: inherit;
        transition:
          border-color 0.15s ease,
          box-shadow 0.15s ease;
      }
      .acct-input:hover {
        border-color: #becdde;
      }
      .acct-input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.18);
      }
      textarea.acct-input {
        height: auto;
        padding: 0.6rem 0.82rem;
        resize: none;
        line-height: 1.5;
      }
      .acct-input.code {
        font-family: ui-monospace, "SF Mono", Menlo, monospace;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-weight: 700;
      }
      .acct-inline-row {
        display: flex;
        gap: 0.6rem;
        align-items: center;
      }
      .acct-inline-row--spaced {
        margin-top: 0.75rem;
      }

      /* ── Profile card ──────────────────────────────────────────────────── */
      .acct-profile {
        display: flex;
        align-items: center;
        gap: 1.05rem;
      }
      .acct-profile-avatar {
        position: relative;
        flex-shrink: 0;
        cursor: pointer;
      }
      .acct-avatar {
        width: 66px;
        height: 66px;
        border-radius: 18px;
        display: block;
      }
      .acct-avatar-initials {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Background color is set inline from AvatarStandard; this is the
           fallback before JS runs. */
        background: var(--accent);
        color: #fff;
        font-size: 1.7rem;
        font-weight: 800;
      }

      /* ── Avatar color picker ──────────────────────────────────────────── */
      .acct-avatar-color {
        margin-top: 0.85rem;
      }
      .acct-swatch-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.5rem;
      }
      .acct-swatch {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        border: 2px solid transparent;
        padding: 0;
        cursor: pointer;
        position: relative;
        transition:
          transform 0.12s ease,
          box-shadow 0.12s ease;
      }
      .acct-swatch:hover {
        transform: translateY(-1px);
      }
      .acct-swatch.selected {
        border-color: var(--text-header);
        box-shadow: 0 0 0 2px #fff inset;
      }
      .acct-swatch.selected::after {
        content: "\f00c";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.7rem;
      }
      .acct-avatar-photo {
        object-fit: cover;
        border: 1px solid var(--border-subtle);
      }
      .acct-avatar-cam {
        position: absolute;
        inset: 0;
        border-radius: 18px;
        background: rgba(8, 52, 99, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.95rem;
        opacity: 0;
        transition: opacity 0.15s ease;
        pointer-events: none;
      }
      .acct-profile-avatar:hover .acct-avatar-cam {
        opacity: 1;
      }
      .acct-profile-id {
        flex: 1;
        min-width: 0;
      }
      .acct-profile-name {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--text-header);
        word-break: break-word;
      }
      .acct-profile-email {
        margin: 0.1rem 0 0;
        font-size: 0.85rem;
        color: var(--muted);
        word-break: break-all;
      }
      .acct-signout {
        align-self: flex-start;
        flex-shrink: 0;
      }
      .acct-remove-photo {
        margin-top: 0.85rem;
      }

      /* ── Choice toggles (planner mode / calorie display / friends / advanced filters / nutrition) ──────── */
      .planner-mode-btn,
      .calories-toggle-btn,
      .friends-toggle-btn,
      .advfilters-toggle-btn,
      .nutrition-toggle-btn,
      .meal-card-style-btn {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.8rem 0.9rem;
        border-radius: 12px;
        border: 1.5px solid var(--border-subtle);
        background: #fff;
        color: var(--muted);
        text-align: left;
        cursor: pointer;
        transition: all 0.15s ease;
        width: 100%;
        min-width: 0;
      }
      .planner-mode-btn:hover,
      .calories-toggle-btn:hover,
      .friends-toggle-btn:hover,
      .advfilters-toggle-btn:hover,
      .nutrition-toggle-btn:hover,
      .meal-card-style-btn:hover {
        border-color: #b8d2f2;
        background: #f7fbff;
      }
      .planner-mode-btn p,
      .calories-toggle-btn p,
      .friends-toggle-btn p,
      .advfilters-toggle-btn p,
      .nutrition-toggle-btn p,
      .meal-card-style-btn p {
        margin: 0;
      }
      .planner-mode-btn > i:first-child,
      .calories-toggle-btn > i:first-child,
      .friends-toggle-btn > i:first-child,
      .advfilters-toggle-btn > i:first-child,
      .nutrition-toggle-btn > i:first-child {
        flex-shrink: 0;
      }
      .planner-mode-btn > div,
      .calories-toggle-btn > div,
      .friends-toggle-btn > div,
      .advfilters-toggle-btn > div,
      .nutrition-toggle-btn > div,
      .meal-card-style-btn > div {
        min-width: 0;
      }
      .planner-mode-btn p:first-child,
      .calories-toggle-btn p:first-child,
      .friends-toggle-btn p:first-child,
      .advfilters-toggle-btn p:first-child,
      .nutrition-toggle-btn p:first-child,
      .meal-card-style-btn p:first-child {
        font-size: 0.85rem;
        font-weight: 700;
      }
      .planner-mode-btn p:last-child,
      .calories-toggle-btn p:last-child,
      .friends-toggle-btn p:last-child,
      .advfilters-toggle-btn p:last-child,
      .nutrition-toggle-btn p:last-child,
      .meal-card-style-btn p:last-child {
        font-size: 0.74rem;
        color: var(--muted);
      }
      .mode-check-icon,
      .calories-check-icon,
      .friends-check-icon,
      .advfilters-check-icon,
      .nutrition-check-icon,
      .meal-card-style-check-icon {
        margin-left: auto;
        color: var(--accent);
        opacity: 0;
        transition: opacity 0.15s ease;
        visibility: visible;
      }
      /* JS marks the active option by adding .bg-blue-50 */
      .planner-mode-btn.bg-blue-50 .mode-check-icon,
      .calories-toggle-btn.bg-blue-50 .calories-check-icon,
      .friends-toggle-btn.bg-blue-50 .friends-check-icon,
      .advfilters-toggle-btn.bg-blue-50 .advfilters-check-icon,
      .nutrition-toggle-btn.bg-blue-50 .nutrition-check-icon,
      .meal-card-style-btn.bg-blue-50 .meal-card-style-check-icon {
        opacity: 1;
      }

      /* "Recommended" default marker — subtle gray pill next to the option
         title, kept visually distinct from the accent-blue check-icon that
         marks the user's actual current selection (far-right, opacity-toggled). */
      .acct-default-badge {
        display: inline-block;
        margin-left: 0.4rem;
        padding: 0.05rem 0.45rem;
        border-radius: 999px;
        font-size: 0.6rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: rgba(107, 124, 147, 0.14);
        color: var(--muted);
        vertical-align: middle;
        white-space: nowrap;
      }

      /* ── Meal Card Style preview thumbnails ──────────────────────────────
         Each option shows a live, miniature rendering of that style, built by
         renderMealCardStylePreview() (account.js) from the same
         renderCardContent() used on /plan (shared/meal-card-content.js) — so
         the markup can never drift from the real card layout. account.html
         doesn't load plan.css though, so the card-shape rules below are a
         scoped-down copy of plan.css's "MEAL CARD STYLES" section, kept just
         wide enough to paint these thumbnails; if a style's real layout
         changes in plan.css, mirror the change here too. */
      .meal-card-style-btn > .mcs-preview {
        flex-shrink: 0;
      }
      .mcs-preview {
        position: relative;
        width: 100px;
        height: 104px;
        border-radius: 10px;
        overflow: hidden;
        background: #eef4fb;
      }
      /* Card content height varies a lot between styles (a dense checklist
         vs. a single split column), so the scaled card is centered — not
         top-left anchored — inside the fixed-size box. That's what keeps
         every style's preview looking like the same "size" thumbnail
         instead of some floating small in a mostly-empty box. */
      .mcs-preview-inner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 175px;
        transform: translate(-50%, -50%) scale(0.57);
        transform-origin: center center;
        pointer-events: none;
      }
      .mcs-preview .cal-meal-card {
        display: flex;
        flex-direction: column;
        background: var(--bg-card, #fff);
        border: 1px solid var(--border-subtle);
        border-radius: 14px;
        overflow: hidden;
      }
      .mcs-preview .card-body {
        padding: 0.9rem 1rem 1rem;
        display: flex;
        flex-direction: column;
        flex: 1;
      }
      .mcs-preview .card-day-label {
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--accent);
        margin-bottom: 4px;
      }
      .mcs-preview .card-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 0.5rem;
      }
      .mcs-preview .card-pills .queue-card-recipe-group {
        width: 100%;
      }
      .mcs-preview .card-pills .queue-pill {
        font-size: 11.5px;
        padding: 3px 10px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .mcs-preview .card-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        font-size: 12px;
        color: var(--muted);
      }
      .mcs-preview .card-meta .meal-serving-badge {
        margin-bottom: 0;
        padding: 3px 9px;
        font-size: 0.72rem;
      }
      .mcs-preview .queue-pill {
        display: inline-block;
        font-size: 11px;
        padding: 3px 10px;
        border-radius: 20px;
        font-weight: 500;
        white-space: nowrap;
      }
      .mcs-preview .queue-pill-main {
        background: #dbeafe;
        color: #1e40af;
      }
      .mcs-preview .queue-pill-side {
        background: #dcfce7;
        color: #166534;
      }
      .mcs-preview .queue-pill-empty {
        background: #f1f5f9;
        color: var(--muted);
        border: 1px dashed var(--border-subtle);
        font-style: italic;
      }
      .mcs-preview .queue-card-recipe-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
      }
      .mcs-preview .queue-pill-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
        margin-right: 2px;
      }
      .mcs-preview .meal-serving-badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 16px;
        font-size: 0.85rem;
        font-weight: 600;
        background: rgba(155, 89, 182, 0.15);
        color: #9b59b6;
        border: 1px solid #9b59b6;
        white-space: nowrap;
      }

      /* Style-variant rules — mirrors plan.css's [data-card-style="sN"] block */
      .mcs-preview .cal-meal-card[data-card-style="s2"] .card-pills,
      .mcs-preview .cal-meal-card[data-card-style="s4"] .card-pills,
      .mcs-preview .cal-meal-card[data-card-style="s6"] .card-pills,
      .mcs-preview .cal-meal-card[data-card-style="s7"] .card-pills,
      .mcs-preview .cal-meal-card[data-card-style="s10"] .card-pills {
        display: block;
      }
      /* s2: Main + 2 Sides slots */
      .mcs-preview .mcs-slot-groups {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .mcs-preview .mcs-slot {
        border-radius: 10px;
        min-height: 46px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 10px;
      }
      .mcs-preview .mcs-slot-main {
        min-height: 54px;
        background: linear-gradient(135deg, #eaf3ff, #f4fbff);
        border: 1px solid #cfe3f7;
        margin-bottom: 6px;
      }
      .mcs-preview .mcs-slot-sides {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }
      .mcs-preview .mcs-slot-side {
        min-height: 42px;
        background: #f0fbf3;
        border: 1px solid #cdebd6;
      }
      .mcs-preview .mcs-slot.mcs-slot-empty {
        background: #fafbfd;
        border: 1.5px dashed var(--border-subtle);
        color: var(--muted);
        justify-content: center;
      }
      .mcs-preview .mcs-slot-add-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1.5px dashed var(--border-subtle);
        color: var(--muted);
        font-size: 11px;
        flex-shrink: 0;
      }
      .mcs-preview .mcs-slot-label {
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
        display: block;
        margin-bottom: 1px;
      }
      .mcs-preview .mcs-slot-main .mcs-slot-label {
        color: #1e40af;
      }
      .mcs-preview .mcs-slot-side .mcs-slot-label {
        color: #166534;
      }
      .mcs-preview .mcs-slot-title {
        font-size: 12.5px;
        font-weight: 800;
        color: var(--text-header);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .mcs-preview .mcs-slot-side .mcs-slot-title {
        font-size: 11.5px;
      }
      .mcs-preview .mcs-slot.mcs-slot-empty .mcs-slot-title {
        font-size: 11.5px;
        font-weight: 700;
      }
      /* s4: Icon avatar card */
      .mcs-preview .mcs-avatar-row {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .mcs-preview .mcs-avatar {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 15px;
        background: var(--accent);
      }
      .mcs-preview .mcs-avatar-body {
        min-width: 0;
      }
      .mcs-preview .mcs-avatar-title {
        font-size: 13.5px;
        font-weight: 800;
        color: var(--text-header);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .mcs-preview .mcs-avatar-sub {
        font-size: 11.5px;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 1px;
      }
      /* s5: Header strip card */
      .mcs-preview .cal-meal-card[data-card-style="s5"] {
        border-top: 4px solid var(--accent);
      }
      /* s6: Two-column split */
      .mcs-preview .mcs-split {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 8px;
      }
      .mcs-preview .mcs-col {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
      }
      .mcs-preview .mcs-col-label {
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
      }
      .mcs-preview .mcs-col-mains .mcs-col-label {
        color: #1e40af;
      }
      .mcs-preview .mcs-col-sides .mcs-col-label {
        color: #166534;
      }
      .mcs-preview .mcs-col-sides {
        align-items: flex-end;
        text-align: right;
      }
      .mcs-preview .mcs-col-item {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
      .mcs-preview .mcs-divider {
        width: 1px;
        background: var(--border-subtle);
      }
      /* s7: Checklist style */
      .mcs-preview .mcs-checklist {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .mcs-preview .mcs-check-row {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--text-main);
      }
      .mcs-preview .mcs-check-row i {
        font-size: 12px;
        width: 13px;
        flex-shrink: 0;
      }
      .mcs-preview .mcs-check-main i {
        color: #2563eb;
      }
      .mcs-preview .mcs-check-side i {
        color: #16a34a;
      }
      /* s10: Bold accent card */
      .mcs-preview .cal-meal-card[data-card-style="s10"] {
        border-left: 6px solid var(--accent);
      }
      .mcs-preview .mcs-bold-title {
        font-size: 16px;
        font-weight: 900;
        color: var(--text-header);
        line-height: 1.25;
        margin-bottom: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .mcs-preview .mcs-bold-sub {
        font-size: 12px;
        color: var(--muted);
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* Active-state utilities toggled by JS on the choice buttons */
      .border-blue-400 {
        border-color: var(--accent) !important;
      }
      .bg-blue-50 {
        background-color: #eaf2fc !important;
      }
      .text-blue-700 {
        color: #0d4fa8 !important;
      }

      /* ── Family ────────────────────────────────────────────────────────── */
      .acct-family-actions {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
      }
      .acct-family-block + .acct-family-block {
        margin-top: 1.35rem;
      }
      .acct-member-list {
        display: flex;
        flex-direction: column;
      }
      .family-member-row {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.65rem 0;
        border: none;
        border-radius: 0;
        background: transparent;
      }
      .family-member-row + .family-member-row {
        border-top: 1px solid var(--border-subtle);
      }

      /* ── Recently Deleted (trash) ─────────────────────────────────────── */
      .trash-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0;
      }
      .trash-item + .trash-item {
        border-top: 1px solid var(--border-subtle);
      }
      .trash-item-info {
        flex: 1;
        min-width: 0;
      }
      .trash-item-name {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--text-header);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .trash-item-meta {
        margin: 0.2rem 0 0;
        font-size: 0.76rem;
        color: var(--muted);
      }
      .trash-item-meta.urgent {
        color: #c0392b;
        font-weight: 700;
      }
      .trash-item-actions {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-shrink: 0;
      }
      .trash-item-actions .acct-btn-sm {
        white-space: nowrap;
      }
      /* JS-generated member row controls */
      .fam-member-manage-btn {
        white-space: nowrap;
      }

      /* ── Manage member modal ─────────────────────────────────────────────── */
      .manage-section {
        margin-top: 1.1rem;
      }
      .manage-section:first-child {
        margin-top: 0;
      }
      .manage-access-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.65rem 0;
      }
      .manage-access-row + .manage-access-row {
        border-top: 1px solid var(--border-subtle);
      }
      .manage-access-row-text {
        flex: 1;
        min-width: 0;
      }
      .manage-access-row-label {
        margin: 0;
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--text-header);
      }
      .manage-access-row-desc {
        margin: 0.15rem 0 0;
        font-size: 0.76rem;
        color: var(--muted);
      }
      .manage-note {
        font-size: 0.82rem;
        color: var(--muted);
        line-height: 1.5;
        background: rgba(107, 124, 147, 0.08);
        border-radius: 10px;
        padding: 0.7rem 0.85rem;
        margin: 0;
      }

      /* iOS-style on/off switch — ported from plan.css .nutri-switch since this
         standalone page doesn't load plan.css. */
      .acct-switch {
        position: relative;
        display: inline-flex;
        flex: 0 0 auto;
        cursor: pointer;
      }
      .acct-switch input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
      }
      .acct-switch-track {
        display: inline-block;
        width: 42px;
        height: 24px;
        border-radius: 999px;
        background: #cdd9e8;
        transition: background 0.18s ease;
      }
      .acct-switch-thumb {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(11, 45, 80, 0.35);
        transition: transform 0.18s ease;
      }
      .acct-switch input:checked + .acct-switch-track {
        background: var(--accent);
      }
      .acct-switch input:checked + .acct-switch-track .acct-switch-thumb {
        transform: translateX(18px);
      }
      .acct-switch input:focus-visible + .acct-switch-track {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      .acct-switch input:disabled + .acct-switch-track {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .acct-join-code-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }
      .acct-join-code {
        flex: 1;
        text-align: center;
        font-family: ui-monospace, "SF Mono", Menlo, monospace;
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: 0.22em;
        color: var(--accent);
        background: #eaf2fc;
        border: 1px solid #cfe0f6;
        border-radius: 10px;
        padding: 0.55rem 0.6rem;
      }
      .acct-icon-btn {
        flex-shrink: 0;
        width: 2.65rem;
        height: 2.65rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: 1px solid var(--border-subtle);
        background: #fff;
        color: var(--muted);
        cursor: pointer;
        transition: all 0.15s ease;
      }
      .acct-icon-btn:hover {
        background: #f3f8ff;
        border-color: #b8d2f2;
        color: var(--accent);
      }
      .acct-danger-zone {
        border-top: 1px solid var(--border-subtle);
        margin-top: 1.35rem;
        padding-top: 1.2rem;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
      }
      .acct-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
      }
      .acct-grid-style {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 0.6rem;
      }

      /* Meal Card Style — compact "current pick" summary shown instead of
         the full picker grid (see .acct-grid-style above) until "Change" is
         pressed. Reuses the same .mcs-preview thumbnail markup, scaled down
         further to fit a single row. */
      .acct-style-current {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.6rem 0.7rem;
        border-radius: 12px;
        border: 1.5px solid var(--border-subtle);
        background: #f9fbfd;
      }
      .acct-style-current-preview {
        flex-shrink: 0;
      }
      .acct-style-current-preview .mcs-preview {
        width: 56px;
        height: 58px;
        border-radius: 8px;
      }
      .acct-style-current-preview .mcs-preview-inner {
        transform: translate(-50%, -50%) scale(0.32);
      }
      .acct-style-current-text {
        flex: 1;
        min-width: 0;
      }
      .acct-style-current-name {
        margin: 0;
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-header);
      }
      .acct-style-current-desc {
        margin: 0.15rem 0 0;
        font-size: 0.74rem;
        color: var(--muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .acct-style-current .acct-btn {
        flex-shrink: 0;
      }

      /* ── Your Progress (streak, lifetime stats, badges) ─────────────── */
      .progress-streak-summary {
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
        flex-wrap: wrap;
        margin: 0.2rem 0 0.7rem;
      }
      .progress-streak-current {
        font-size: 1.2rem;
        font-weight: 800;
        color: var(--text-header, #083463);
        margin: 0;
      }
      .progress-streak-longest {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--muted, #6b7c93);
        margin: 0;
      }
      .progress-week-strip {
        display: flex;
        gap: 0.3rem;
      }
      .progress-week-dot {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
        background: rgba(107, 124, 147, 0.18);
        flex-shrink: 0;
      }
      .progress-week-dot.filled {
        background: #c47d11;
      }
      .progress-streak-next-milestone {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin: 0.45rem 0 0;
        font-size: 0.78rem;
        font-weight: 700;
        color: #935e0c;
      }
      .progress-streak-next-milestone:empty {
        display: none;
      }
      .progress-accent-toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.7rem;
        margin-top: 0.7rem;
        padding-top: 0.7rem;
        border-top: 1px solid var(--border-subtle);
      }
      .progress-accent-toggle-row .acct-status {
        margin: 0;
        flex: 1;
      }
      .acct-profile-name {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-wrap: wrap;
      }
      .founding-badge-ribbon {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.65rem;
        font-weight: 800;
        color: #935e0c;
        background: rgba(196, 125, 17, 0.14);
        border-radius: 999px;
        padding: 0.12rem 0.5rem;
      }

      .progress-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 0.6rem;
      }
      .progress-stat-tile {
        background: var(--bg-card, rgba(255, 255, 255, 0.8));
        border: 1px solid var(--border-subtle);
        border-radius: 12px;
        padding: 0.75rem 0.85rem;
      }
      .progress-stat-value {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--text-header, #083463);
        margin: 0;
      }
      .progress-stat-label {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--muted, #6b7c93);
        margin: 0.15rem 0 0;
      }

      .progress-badge-grid {
        margin-bottom: 0.9rem;
      }
      .progress-badge-tile {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
        padding: 0.85rem;
        border-radius: 12px;
        border: 1.5px solid var(--border-subtle);
        background: #fff;
      }
      .progress-badge-tile.locked {
        opacity: 0.6;
      }
      .progress-badge-tile.earned {
        border-color: rgba(245, 158, 11, 0.35);
        background: rgba(245, 158, 11, 0.06);
      }
      .progress-badge-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(245, 158, 11, 0.14);
        color: #c47d11;
        font-size: 0.95rem;
      }
      .progress-badge-label {
        font-size: 0.85rem;
        font-weight: 800;
        color: var(--text-header, #083463);
        margin: 0;
      }
      .progress-badge-meta {
        font-size: 0.72rem;
        color: var(--muted, #6b7c93);
        margin: 0;
      }

      .progress-milestones-subhead {
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted, #6b7c93);
        margin: 0.9rem 0 0.5rem;
      }

      .progress-milestone-list {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
      }

      .progress-milestone-tile {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.7rem 0.85rem;
        border-radius: 12px;
        border: 1.5px solid var(--border-subtle);
        background: #fff;
      }

      /* Big milestones get the same gold treatment used elsewhere for
         earned/special progress state, so they read as a bigger deal
         before you even reach them. */
      .progress-milestone-tile.big {
        border-color: rgba(245, 158, 11, 0.45);
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.09), rgba(245, 158, 11, 0.02));
      }

      .progress-milestone-icon {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(27, 111, 216, 0.1);
        color: #1b6fd8;
        font-size: 0.95rem;
      }

      .progress-milestone-tile.big .progress-milestone-icon {
        background: rgba(245, 158, 11, 0.18);
        color: #c47d11;
      }

      /* Huge milestones — the rare top tier (e.g. a full year of streak).
         Same gold language as .big, turned all the way up: solid fill, a
         gold ring, and a filled tag. */
      .progress-milestone-tile.huge {
        border-color: #c47d11;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
      }

      .progress-milestone-tile.huge .progress-milestone-icon {
        background: #c47d11;
        color: #fff;
      }

      .progress-milestone-body {
        flex: 1;
        min-width: 0;
      }

      .progress-milestone-reached {
        margin: 0 0 0.15rem;
        font-size: 0.72rem;
        font-weight: 700;
        color: #1aa179;
      }

      .progress-milestone-next {
        margin: 0 0 0.3rem;
        font-size: 0.85rem;
        font-weight: 800;
        color: var(--text-header, #083463);
        display: flex;
        align-items: center;
        gap: 0.4rem;
      }

      .progress-milestone-big-tag {
        font-size: 0.62rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #935e0c;
        background: rgba(196, 125, 17, 0.16);
        border-radius: 999px;
        padding: 0.1rem 0.45rem;
      }

      .progress-milestone-big-tag.huge {
        color: #fff;
        background: #c47d11;
      }

      .progress-milestone-bar {
        height: 6px;
        border-radius: 999px;
        background: rgba(27, 111, 216, 0.1);
        overflow: hidden;
      }

      .progress-milestone-tile.big .progress-milestone-bar,
      .progress-milestone-tile.huge .progress-milestone-bar {
        background: rgba(245, 158, 11, 0.18);
      }

      .progress-milestone-bar-fill {
        height: 100%;
        border-radius: 999px;
        background: #1b6fd8;
      }

      .progress-milestone-tile.big .progress-milestone-bar-fill,
      .progress-milestone-tile.huge .progress-milestone-bar-fill {
        background: #c47d11;
      }

      .progress-milestone-count {
        margin: 0.25rem 0 0;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--muted, #6b7c93);
      }

      /* "View all milestones" row on the compact Progress card — opens
         #milestones-modal with the full achievements + track list. */
      .progress-view-all-btn {
        justify-content: space-between;
        margin-top: 0.7rem;
      }
      .progress-view-all-btn i {
        font-size: 0.75rem;
      }

      /* Scroll wrapper inside the milestones modal so the head stays put
         while achievements + the endless-track list scroll together. */
      .acct-modal-scroll {
        max-height: min(65vh, 640px);
        overflow-y: auto;
        padding: 0.15rem 0.15rem 0.15rem 0;
        margin: 0 -0.15rem;
      }

      .family-planner-btn {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.7rem 0.8rem;
        border-radius: 12px;
        border: 1.5px solid var(--border-subtle);
        background: #fff;
        color: var(--muted);
        text-align: left;
        cursor: pointer;
        transition: all 0.15s ease;
      }
      .family-planner-btn:hover {
        border-color: #b8d2f2;
        background: #f7fbff;
      }
      .family-planner-btn.f-active {
        background: #eaf2fc;
        border-color: var(--accent);
        color: #0d4fa8;
      }
      .family-planner-btn p {
        margin: 0;
      }
      .family-planner-btn > i:first-child {
        flex-shrink: 0;
      }
      .family-planner-btn p:first-child {
        font-size: 0.8rem;
        font-weight: 700;
      }
      .family-planner-btn p:last-child {
        font-size: 0.72rem;
        color: var(--muted);
      }

      /* Privacy / terms quick links */
      .acct-link-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
      }

      /* ── Footer ────────────────────────────────────────────────────────── */
      .acct-footer {
        max-width: 760px;
        margin: 0 auto;
        padding: 0.5rem 2rem 2.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.85rem;
      }
      .acct-footer-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.25rem 1rem;
        font-size: 0.78rem;
      }
      .acct-footer-links a {
        color: var(--muted);
        text-decoration: none;
        transition: color 0.15s ease;
      }
      .acct-footer-links a:hover {
        color: var(--text-header);
      }
      .acct-footer-copy {
        font-size: 0.78rem;
        color: var(--muted);
        text-align: center;
        margin: 0;
      }
      .acct-footer-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
      }
      .acct-pill-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--muted);
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid var(--border-subtle);
        padding: 0.45rem 0.95rem;
        border-radius: 999px;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.15s ease;
      }
      .acct-pill-btn:hover {
        background: #fff;
        color: var(--text-header);
        border-color: #b8d2f2;
      }

      /* Toast — explicit brand colors (overrides the emerald→blue remap) */
      #toast-inner.bg-emerald-600 {
        background-color: #16a34a !important;
      }
      #toast-inner.bg-red-600 {
        background-color: #dc2626 !important;
      }

      /* ══════════════════════════════════════════════════════════════════════
         AUTH (signed-out) — Nutrition-tab design language
         Mirrors the .acct-* / .nutri-* system: icy gradient background, soft
         brand card, navy headers, blue accent, reused .acct-input / .acct-btn
         components so the signed-out screen feels like the rest of the app.
         ══════════════════════════════════════════════════════════════════════ */
      #auth-view {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1.25rem;
      }
      #auth-view.hidden {
        display: none;
      }
      #verify-gate-view {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1.25rem;
      }
      #verify-gate-view.hidden {
        display: none;
      }
      .auth-card {
        width: 100%;
        max-width: 430px;
        background: #fff;
        border: 1px solid var(--border-subtle);
        border-radius: 20px;
        box-shadow: 0 14px 44px rgba(8, 52, 99, 0.12);
        padding: 2rem 1.9rem 1.85rem;
      }

      /* ── Brand header ──────────────────────────────────────────────────── */
      .auth-brand {
        text-align: center;
        margin-bottom: 1.6rem;
      }
      .auth-logo-tile {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        background: #eaf2fc;
        border: 1px solid var(--border-subtle);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.9rem;
        box-shadow: 0 4px 14px rgba(27, 111, 216, 0.14);
      }
      .auth-logo-tile img {
        width: 40px;
        height: 40px;
        display: block;
      }
      .auth-title {
        font-size: 1.55rem;
        font-weight: 800;
        color: var(--text-header);
        margin: 0;
        letter-spacing: -0.02em;
      }
      .auth-subtitle {
        font-size: 0.9rem;
        color: var(--muted);
        margin: 0.32rem 0 0;
        line-height: 1.45;
      }

      /* ── Value-prop strip (initial choice) ─────────────────────────────── */
      .auth-features {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        margin: 0 0 1.5rem;
        padding: 1.1rem 1.15rem;
        background: #f6faff;
        border: 1px solid var(--border-subtle);
        border-radius: 14px;
      }
      .auth-feature {
        display: flex;
        align-items: center;
        gap: 0.8rem;
      }
      .auth-feature-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.88rem;
      }
      .auth-feature-icon.blue {
        background: rgba(27, 111, 216, 0.1);
        color: var(--accent);
      }
      .auth-feature-icon.amber {
        background: rgba(245, 158, 11, 0.14);
        color: #c47d11;
      }
      .auth-feature-icon.green {
        background: rgba(40, 167, 69, 0.12);
        color: #1e8035;
      }
      .auth-feature-text {
        font-size: 0.86rem;
        font-weight: 600;
        color: var(--text-main);
        line-height: 1.3;
      }

      .auth-choice {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
      }
      .auth-choice .acct-btn {
        padding: 0.78rem 1rem;
        font-size: 0.92rem;
      }

      .auth-google-note {
        margin: -0.3rem 0 0.15rem;
        text-align: center;
        font-size: 0.78rem;
        color: #7a8aa0;
      }

      .auth-divider {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 0.15rem 0;
        color: #94a3b8;
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }
      .auth-divider::before,
      .auth-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e2e8f0;
      }

      .auth-free-note {
        margin: 0.8rem 0 0;
        text-align: center;
        font-size: 0.8rem;
        font-weight: 700;
        color: #1aa179;
      }

      /* ── Back to homepage ─────────────────────────────────────────────── */
      .auth-home-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin: -0.3rem 0 1.1rem -0.3rem;
        padding: 0.3rem 0.5rem;
        border-radius: 8px;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--muted);
        text-decoration: none;
        transition:
          background 0.15s ease,
          color 0.15s ease;
      }
      .auth-home-link:hover {
        background: rgba(27, 111, 216, 0.08);
        color: var(--accent);
      }
      .auth-home-link i {
        font-size: 0.75rem;
      }

      /* ── Form panels ───────────────────────────────────────────────────── */
      .auth-panel-head {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        margin-bottom: 1.35rem;
      }
      .auth-back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-left: -6px;
        border-radius: 10px;
        border: none;
        background: transparent;
        color: var(--muted);
        font-size: 0.95rem;
        cursor: pointer;
        transition:
          background 0.15s ease,
          color 0.15s ease;
      }
      .auth-back-btn:hover {
        background: rgba(27, 111, 216, 0.08);
        color: var(--text-header);
      }
      .auth-panel-title {
        margin: 0;
        font-size: 1.18rem;
        font-weight: 800;
        color: var(--text-header);
        letter-spacing: -0.01em;
      }
      #verify-gate-view .auth-feature-icon {
        margin: 0 auto 1rem;
      }
      #verify-gate-view .auth-panel-title {
        text-align: center;
      }
      #verify-gate-view .acct-card-desc {
        text-align: center;
        margin-bottom: 1.25rem;
      }
      .auth-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      .auth-field {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
      }
      .auth-field .acct-field-label {
        margin: 0;
      }
      .auth-consent {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
      }
      .auth-consent input {
        margin-top: 0.15rem;
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        accent-color: var(--accent);
        cursor: pointer;
      }
      .auth-consent label {
        font-size: 0.8rem;
        color: var(--muted);
        line-height: 1.5;
      }
      .auth-consent a {
        color: var(--accent);
        font-weight: 700;
        text-decoration: none;
      }
      .auth-consent a:hover {
        text-decoration: underline;
      }
      .sp-consent-beta-note {
        display: block;
        margin-top: 0.45rem;
        color: var(--accent);
      }
      .auth-form-actions {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-top: 0.25rem;
      }
      .auth-note {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        font-size: 0.74rem;
        color: var(--muted);
        text-align: center;
        margin: 1.15rem 0 0;
      }
      .auth-link-btn {
        background: none;
        border: none;
        padding: 0;
        margin-top: 0.4rem;
        font-family: inherit;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--accent);
        cursor: pointer;
        text-align: right;
        display: block;
        width: 100%;
      }
      .auth-link-btn:hover {
        text-decoration: underline;
      }
      .auth-status-wrap {
        margin-top: 1rem;
      }

      /* ── Centered modal (feedback) — acct design language ───────────────── */
      .acct-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(8, 28, 51, 0.45);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        z-index: 50;
      }
      .acct-modal {
        width: 100%;
        max-width: 440px;
        background: #fff;
        border: 1px solid var(--border-subtle);
        border-radius: 18px;
        box-shadow: 0 18px 50px rgba(8, 52, 99, 0.22);
        padding: 1.5rem;
      }
      .acct-modal-head {
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
        margin-bottom: 1.1rem;
      }
      .acct-modal-head .acct-card-headtext {
        flex: 1;
        min-width: 0;
      }
      .acct-modal-close {
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: none;
        background: transparent;
        color: var(--muted);
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.15s ease;
      }
      .acct-modal-close:hover {
        background: rgba(27, 111, 216, 0.08);
        color: var(--text-header);
      }
      .acct-modal-actions {
        display: flex;
        gap: 0.6rem;
        margin-top: 1.1rem;
      }
      .acct-modal-actions .acct-btn {
        flex: 1;
      }

      /* Wider modal variant for content that needs more than the default
         440px (e.g. the Meal Card Style grid of 10 previews). */
      .acct-modal--wide {
        max-width: 780px;
      }
      .acct-modal--wide .acct-grid-style {
        max-height: min(60vh, 620px);
        overflow-y: auto;
        padding: 0.15rem 0.15rem 0.15rem 0;
        margin: 0 -0.15rem;
      }

      @media (max-width: 640px) {
        .acct-view {
          padding: 1.25rem 1.1rem 2.5rem;
          gap: 1.5rem;
        }
        .acct-header-inner {
          padding: 0 1.1rem;
        }
        .acct-footer {
          padding: 0.5rem 1.1rem 2.5rem;
        }
        .acct-card {
          padding: 1.1rem;
        }
        .auth-card {
          padding: 1.7rem 1.35rem 1.5rem;
          border-radius: 18px;
        }
      }

      @media (max-width: 480px) {
        .acct-grid-2 {
          grid-template-columns: 1fr;
        }
      }

/* Beta-offer note on the signup panel (GROWTH-PLAN Phase 3c). */
.auth-beta-note {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #eef5ff;
  border: 1px solid #cfe0f2;
  font-size: 13.5px;
  font-weight: 700;
  color: #0d4fa8;
  line-height: 1.45;
}
.auth-beta-note i {
  margin-right: 6px;
}
.auth-beta-note a {
  color: inherit;
  text-decoration: underline;
}

/* Marketing opt-in on the signup form (GROWTH-PLAN Phase 5b). Deliberately
   quieter than the .auth-consent clickwrap — it's optional. */
.auth-optin {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
  cursor: pointer;
}
.auth-optin input {
  margin-top: 0.15rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Email preferences opt-in row (GROWTH-PLAN Phase 5b). */
.acct-optin-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
}
.acct-optin-row input {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.acct-optin-row strong {
  display: block;
  color: var(--text-header, #083463);
  font-size: 0.92rem;
}