@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

  /* ============================================================
     BONNAPPLI BRAND REFRESH — 2026-05-23
     Editorial palette: cream + antique gold + charcoal
     Typography: Cormorant Garamond (display) + Inter (UI)
     Goal: redirect existing tokens so all components pick up
     the new look without rewriting individual rules.
     ============================================================ */

  :root{
    /* ---- New core palette (from brand guide) ---- */
    --bn-cream:        #F7F2EA;   /* Warm Cream — page canvas */
    --bn-ivory:        #FFFCF6;   /* Soft Ivory — cards / surfaces */
    --bn-charcoal:     #090B0A;   /* Charcoal Black — sidebar, primary CTA */
    --bn-charcoal-90:  #1A1C1A;
    --bn-charcoal-80:  #2A2C2A;
    --bn-gold:         #B08A4A;   /* Antique Gold — accent, primary CTA text */
    --bn-gold-deep:    #8E6E37;
    --bn-gold-soft:    #D9BE8C;
    --bn-sage:         #9EA58D;   /* Muted Sage — botanicals, success */
    --bn-sage-soft:    #C3CAB5;
    --bn-clay:         #D8C6AB;   /* Clay Beige — secondary surface */
    --bn-clay-soft:    #ECE0CB;
    --bn-line:         rgba(176,138,74,.22);   /* warm hairline */
    --bn-line-strong:  rgba(176,138,74,.38);
    --bn-ink:          #1F1B16;   /* primary text — warm near-black */
    --bn-ink-soft:     #594F40;
    --bn-ink-muted:    #8B7E68;

    /* ---- Redirect ALL legacy brand tokens to the new palette ---- */
    --brand-ink:        var(--bn-ink);
    --brand-ink-soft:   var(--bn-ink-soft);
    --brand-coral:      var(--bn-gold);
    --brand-coral-deep: var(--bn-gold-deep);
    --brand-peach:      var(--bn-cream);
    --brand-peach-deep: var(--bn-clay-soft);
    --brand-cream-card: var(--bn-ivory);
    --brand-green-dark: var(--bn-charcoal);
    --brand-green:      var(--bn-sage);
    --brand-cream:      var(--bn-cream);
    --brand-orange:     var(--bn-gold);
    --brand-yellow:     var(--bn-gold-soft);
    --brand-brown:      var(--bn-ink-soft);
    --brand-plum:       var(--bn-sage);

    /* Coral spectrum -> gold spectrum (used by polish v4 buttons/pills) */
    --coral-50:  #FBF5EA;
    --coral-100: #F4E8CE;
    --coral-200: #E8D4A6;
    --coral-300: #D5B679;
    --coral-400: #C39E5C;
    --coral-500: var(--bn-gold);
    --coral-600: var(--bn-gold-deep);
    --coral-700: #6E5326;
    --grad-coral: linear-gradient(135deg,#C8A368 0%,#B08A4A 55%,#8E6E37 100%);

    /* Surfaces — cream/ivory instead of peach */
    --paper:   var(--bn-ivory);
    --paper-2: var(--bn-cream);
    --surface-0: var(--bn-cream);
    --surface-1: var(--bn-ivory);
    --surface-2: #FBF7EE;
    --surface-3: var(--bn-clay-soft);
    --warm-line: var(--bn-line);

    /* Re-tinted shadows (warm umber instead of aubergine) */
    --shadow-xs: 0 1px 2px rgba(40,30,15,.05);
    --shadow-sm: 0 1px 3px rgba(40,30,15,.07),0 1px 2px rgba(40,30,15,.04);
    --shadow-md: 0 6px 18px rgba(40,30,15,.08),0 2px 6px rgba(40,30,15,.05);
    --shadow-lg: 0 24px 50px rgba(40,30,15,.14),0 8px 20px rgba(40,30,15,.07);
    --shadow-card: 0 1px 3px rgba(40,30,15,.06),0 1px 2px rgba(40,30,15,.03);
    --shadow-soft-xs: 0 1px 2px rgba(40,30,15,.04);
    --shadow-soft-sm: 0 1px 3px rgba(40,30,15,.05),0 1px 2px rgba(40,30,15,.03);
    --shadow-soft-md: 0 4px 12px -2px rgba(40,30,15,.07),0 2px 5px rgba(40,30,15,.04);
    --shadow-soft-lg: 0 18px 36px -10px rgba(40,30,15,.12),0 6px 14px -4px rgba(40,30,15,.06);
    --shadow-soft-xl: 0 32px 64px -20px rgba(40,30,15,.18),0 14px 28px -8px rgba(40,30,15,.09);

    --ring-focus: 0 0 0 3px rgba(176,138,74,.28);

    /* Display serif → Cormorant Garamond */
    --font-display: 'Cormorant Garamond','Cormorant','Fraunces',ui-serif,Georgia,serif;
  }

  /* ============ Page canvas — drop pattern, go quietly cream ============ */
  html, body{
    background: var(--bn-cream) !important;
    background-image:
      radial-gradient(ellipse 60% 45% at 0% 0%, rgba(176,138,74,.06) 0%, transparent 60%),
      radial-gradient(ellipse 55% 50% at 100% 100%, rgba(158,165,141,.07) 0%, transparent 60%) !important;
    color: var(--bn-ink) !important;
  }
  body{ letter-spacing: 0; }

  /* ============ Display headings — Cormorant Garamond ============ */
  .hero-card h2,
  .recipe-hero h1,
  .auth-title,
  .empty-title,
  .modal-title,
  .recipe-title,
  .stat-num,
  .page-title{
    font-family: var(--font-display) !important;
    font-variation-settings: normal !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
  }
  .hero-card h2{ font-weight: 500 !important; letter-spacing: -0.01em !important; }
  .auth-title{ font-weight: 600 !important; }
  .stat-num{ font-weight: 500 !important; }
  .recipe-title{ font-weight: 600 !important; letter-spacing: 0 !important; }
  /* Italic accent in headings, per brand guide ("something delicious.") */
  .hero-card h2 .accent,
  .recipe-hero h1 .accent{
    font-style: italic;
    font-weight: 500;
    color: var(--bn-gold);
    text-shadow: none;
  }

  /* ============ SIDEBAR — dark charcoal with gold accents ============ */
  .sidebar{
    background-color: var(--bn-charcoal) !important;
    background-image: url('assets/sidebar.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: cover !important;
    background-attachment: local !important;
    border-right: 1px solid rgba(176,138,74,.18) !important;
    padding: 26px 16px 26px !important;
  }
  .sidebar .brand{ padding: 6px 8px 32px !important; }
  .brand-mark{
    background: var(--bn-ivory) !important;
    box-shadow:
      0 4px 14px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.7),
      0 0 0 1px rgba(176,138,74,.30) !important;
  }
  .brand-name{
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    font-variation-settings: normal !important;
    letter-spacing: -0.01em !important;
    font-size: 26px !important;
  }
  .brand-name .b-bonn{ color: var(--bn-ivory) !important; }
  .brand-name .b-appli{
    color: var(--bn-gold) !important;
    text-shadow: none !important;
    font-style: italic;
  }
  .brand-sub{
    color: rgba(217,190,140,.55) !important;
    letter-spacing: .22em !important;
    font-weight: 500 !important;
    font-size: 9.5px !important;
  }
  .nav-btn{
    color: rgba(247,242,234,.62) !important;
    font-weight: 500 !important;
    letter-spacing: .005em !important;
  }
  .nav-btn:hover{
    background: rgba(176,138,74,.10) !important;
    color: var(--bn-ivory) !important;
    transform: none !important;
  }
  .nav-btn.active{
    background: rgba(176,138,74,.16) !important;
    color: var(--bn-ivory) !important;
    box-shadow: inset 0 0 0 1px rgba(176,138,74,.32) !important;
    font-weight: 600 !important;
  }
  .nav-btn.active::before{
    background: var(--bn-gold) !important;
    box-shadow: 0 0 10px rgba(176,138,74,.55) !important;
  }
  .nav-btn.active .nav-icon{
    color: var(--bn-gold) !important;
    filter: drop-shadow(0 0 4px rgba(176,138,74,.45)) !important;
  }
  .sidebar-foot{
    color: rgba(247,242,234,.32) !important;
    letter-spacing: .08em !important;
  }
  /* Bottom nav (mobile) — keep light but use gold accent */
  @media (max-width:820px){
    .bottom-nav{
      background: rgba(255,252,246,.95) !important;
      border-top: 1px solid var(--bn-line) !important;
    }
    .bottom-nav button.active{ color: var(--bn-ink) !important; }
    .bottom-nav button.active .nav-icon{
      color: var(--bn-gold) !important;
      filter: drop-shadow(0 2px 5px rgba(176,138,74,.30)) !important;
    }
  }

  /* ============ Primary CTA — black with gold text ============ */
  .btn-primary,
  button.btn-primary,
  .btn-accent,
  button.btn-accent,
  .btn-coral{
    background: var(--bn-charcoal) !important;
    background-image: none !important;
    color: var(--bn-gold) !important;
    border: 1px solid var(--bn-charcoal) !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 6px 18px -8px rgba(176,138,74,.35) !important;
  }
  .btn-primary:hover, .btn-accent:hover, .btn-coral:hover{
    background: var(--bn-charcoal-90) !important;
    color: #D9BE8C !important;
    filter: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.24), 0 10px 26px -8px rgba(176,138,74,.50) !important;
    transform: translateY(-1px);
  }
  .btn-primary:active, .btn-accent:active, .btn-coral:active{ transform: translateY(0); }

  /* Secondary — ivory with charcoal text, gold-on-hover border */
  .btn-secondary, button.btn-secondary{
    background: var(--bn-ivory) !important;
    color: var(--bn-ink) !important;
    border: 1px solid var(--bn-line-strong) !important;
    box-shadow: var(--shadow-xs) !important;
    letter-spacing: .04em !important;
  }
  .btn-secondary:hover{
    background: var(--bn-ivory) !important;
    border-color: var(--bn-gold) !important;
    color: var(--bn-charcoal) !important;
    box-shadow: 0 4px 12px -4px rgba(176,138,74,.30) !important;
  }
  .btn-ghost{
    color: var(--bn-ink-soft) !important;
    background: transparent !important;
    border-color: transparent !important;
  }
  .btn-ghost:hover{
    background: rgba(176,138,74,.08) !important;
    color: var(--bn-charcoal) !important;
  }
  .btn-success{
    background: linear-gradient(135deg,var(--bn-sage) 0%,#7E866A 100%) !important;
    color: var(--bn-ivory) !important;
  }
  .btn:focus-visible{ box-shadow: var(--ring-focus), 0 4px 14px rgba(40,30,15,.16) !important; }

  /* ============ Cards & surfaces — paper-soft cream ============ */
  .card{
    background: var(--bn-ivory) !important;
    background-image: none !important;
    border: 1px solid var(--bn-line) !important;
    box-shadow: var(--shadow-soft-sm) !important;
  }

  /* ============ Stat card — editorial, simple ============ */
  .stat, .stat-card{
    background: var(--bn-ivory) !important;
    border: 1px solid var(--bn-line) !important;
    box-shadow: var(--shadow-soft-xs) !important;
    border-radius: 18px !important;
  }
  .stat-num{
    color: var(--bn-charcoal) !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
  }
  .stat-label{
    color: var(--bn-ink-muted) !important;
    letter-spacing: .14em !important;
    font-weight: 600 !important;
    font-size: 10.5px !important;
  }
  /* Nuke the rainbow per-child colors from polish v4 — single muted accent */
  .grid-stats .stat:nth-child(1) .stat-num,
  .grid-stats .stat:nth-child(2) .stat-num,
  .grid-stats .stat:nth-child(3) .stat-num,
  .grid-stats .stat:nth-child(4) .stat-num{
    color: var(--bn-charcoal) !important;
  }
  /* Subtle gold left-edge bar on hover (matches recipe-tile motif) */
  .stat::before, .stat-card::before{
    background: var(--bn-gold) !important;
  }

  /* ============ Hero card — editorial banner, calm ============ */
  .hero-card{
    background-color: var(--bn-cream) !important;
    /* --hero-img is set per-app-open by the rotation script in index.html;
       falls back to hero-bg-v2.jpg if unset. */
    background-image:
      linear-gradient(90deg, var(--bn-ivory) 0%, rgba(255,252,246,.86) 30%, rgba(255,252,246,.34) 56%, rgba(255,252,246,0) 76%),
      var(--hero-img, url('assets/hero-bg-v2.jpg')) !important;
    background-position: center right !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    border: 1px solid var(--bn-line) !important;
    border-radius: 22px !important;
    color: var(--bn-ink) !important;
    box-shadow: var(--shadow-soft-sm) !important;
    overflow: hidden;
  }
  @media (max-width:600px){
    .hero-card{
      background-color: var(--bn-cream) !important;
      background-image:
        linear-gradient(180deg, var(--bn-ivory) 0%, rgba(255,252,246,.84) 26%, rgba(255,252,246,.30) 56%, rgba(255,252,246,0) 80%),
        var(--hero-img-m, url('assets/mobile_hero_crop_750-v2.jpg')) !important;
      background-position: center bottom !important;
      background-size: cover !important;
      background-repeat: no-repeat !important;
      min-height: 320px !important;
    }
  }
  .hero-card::before{
    background: none !important;
    border-top: 3px solid var(--bn-gold) !important;
    width: 56px !important;
    top: 0 !important;
    left: 28px !important;
    height: 0 !important;
    border-radius: 0 !important;
  }
  .hero-card .hero-eyebrow{
    color: var(--bn-gold-deep) !important;
    letter-spacing: .22em !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 11px !important;
  }
  .hero-card .hero-eyebrow::before{
    background: var(--bn-gold) !important;
  }
  .hero-card h2{
    color: var(--bn-charcoal) !important;
    font-weight: 500 !important;
  }
  .hero-card h2 .accent{
    color: var(--bn-gold-deep) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: var(--bn-gold-deep) !important;
  }
  .hero-card p{
    color: var(--bn-ink-soft) !important;
    opacity: 1 !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }

  /* ============ Recipe card — editorial tile ============ */
  .recipe-card{
    background: var(--bn-ivory) !important;
    border: 1px solid var(--bn-line) !important;
    box-shadow: var(--shadow-soft-xs) !important;
    border-radius: 18px !important;
  }
  .recipe-card:hover{
    border-color: var(--bn-gold) !important;
    box-shadow: 0 4px 14px -4px rgba(40,30,15,.10), 0 18px 38px -14px rgba(176,138,74,.32) !important;
  }
  .recipe-thumb{
    background: linear-gradient(135deg, var(--bn-clay-soft) 0%, var(--bn-cream) 100%) !important;
  }
  .recipe-title{
    color: var(--bn-charcoal) !important;
    font-size: 18px !important;
    line-height: 1.22 !important;
  }
  .recipe-card:hover .recipe-title{ color: var(--bn-gold-deep) !important; }
  .recipe-meta{ color: var(--bn-ink-muted) !important; letter-spacing: .04em; }
  .recipe-meta-dot{ color: var(--bn-clay) !important; }
  .recipe-body{ background: var(--bn-ivory) !important; }

  /* ============ Page header underline — gold instead of coral ============ */
  .page-head{ border-bottom-color: var(--bn-line) !important; }
  .page-head::after{
    background: var(--bn-gold) !important;
    box-shadow: 0 1px 4px rgba(176,138,74,.30) !important;
    height: 2px !important;
    border-radius: 0 !important;
  }
  .page-title{
    color: var(--bn-charcoal) !important;
    font-weight: 500 !important;
  }

  /* ============ Inputs / search / chips — warm hairline ============ */
  .input, .textarea, .select, input[type="text"], input[type="search"], input[type="email"], input[type="password"]{
    background: var(--bn-ivory) !important;
    border: 1px solid var(--bn-line) !important;
    color: var(--bn-ink) !important;
  }
  .input:focus, .textarea:focus, .select:focus,
  input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="password"]:focus{
    border-color: var(--bn-gold) !important;
    box-shadow: var(--ring-focus) !important;
    outline: none !important;
  }
  .chip, .tag{
    background: var(--bn-ivory) !important;
    border: 1px solid var(--bn-line) !important;
    color: var(--bn-ink) !important;
  }
  .chip.active, .chip[aria-pressed="true"], .tag.active{
    background: var(--bn-charcoal) !important;
    color: var(--bn-gold) !important;
    border-color: var(--bn-charcoal) !important;
  }

  /* ============ Modals / toasts / scrollbar — warm tint ============ */
  .modal{
    background: var(--bn-ivory) !important;
    border: 1px solid var(--bn-line) !important;
  }
  .modal-title{ color: var(--bn-charcoal) !important; }
  .toast{
    background: var(--bn-charcoal) !important;
    color: var(--bn-gold) !important;
    border: 1px solid rgba(176,138,74,.30) !important;
  }
  ::-webkit-scrollbar-thumb{ background: rgba(176,138,74,.28) !important; background-clip: padding-box !important; }
  ::-webkit-scrollbar-thumb:hover{ background: rgba(176,138,74,.45) !important; background-clip: padding-box !important; }

  /* ============ Links ============ */
  a{ color: var(--bn-charcoal) !important; }
  a:hover{ color: var(--bn-gold-deep) !important; }

  /* ============ Print — keep clean ============ */
  @media print{
    body{ background: #fff !important; }
  }

  /* ====== User-specified card backgrounds — WIN over brand-refresh (2026-06-02) ======
     Restores the per-stat + Today's-meals image slots wired in index.html.
     Loaded last + !important + high specificity so the override layer above cannot cover them.
     Swap asset files (stat-bg-1..4.png, meals-container-bg.webp) to change the art. */
  .grid-stats .stat{
    background-repeat: no-repeat !important;
    background-position: center right !important;
    background-size: cover !important;
  }
  .grid-stats .stat:nth-child(1){
    background-image:
      linear-gradient(90deg, rgba(255,251,247,.92) 0%, rgba(255,251,247,.55) 45%, rgba(255,251,247,0) 75%),
      url('assets/stat-bg-1.png') !important;
  }
  .grid-stats .stat:nth-child(2){
    background-image:
      linear-gradient(90deg, rgba(252,250,255,.92) 0%, rgba(252,250,255,.55) 45%, rgba(252,250,255,0) 75%),
      url('assets/stat-bg-2.png') !important;
  }
  .grid-stats .stat:nth-child(3){
    background-image:
      linear-gradient(90deg, rgba(250,253,247,.92) 0%, rgba(250,253,247,.55) 45%, rgba(250,253,247,0) 75%),
      url('assets/stat-bg-3.png') !important;
  }
  .grid-stats .stat:nth-child(4){
    background-image:
      linear-gradient(90deg, rgba(255,250,240,.92) 0%, rgba(255,250,240,.55) 45%, rgba(255,250,240,0) 75%),
      url('assets/stat-bg-4.png') !important;
  }
  .today-meals-card{
    background-color: #FFFBF3 !important;
    background-image:
      linear-gradient(180deg, rgba(255,251,243,.55) 0%, rgba(255,251,243,.22) 50%, rgba(255,251,243,.55) 100%),
      url('assets/meals-container-bg.webp') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }


  /* ============================================================
     POLISH 6.0 — 2026-06-05  (scheduled UI/UX refinement)
     Sits at the very end of brand-refresh.css, so it wins the
     cascade. Builds on the BonnAppli editorial system
     (cream + charcoal + antique gold + Cormorant Garamond).
     Goal: quieter depth, cleaner edges, calmer rhythm, kinder
     micro-interactions — modern, easy on the eyes, easy to use.
     Pure CSS, no markup changes. Respects reduced-motion.
     NOTE: deliberately does NOT touch .grid-stats .stat or
     .today-meals-card background-image (user photo slots above).
     ============================================================ */
  :root{
    --p6-ease:cubic-bezier(.22,1,.36,1);
    --p6-ease-snap:cubic-bezier(.2,.8,.28,1.04);
    --p6-hair:rgba(40,30,15,.07);
    --p6-line:rgba(176,138,74,.20);
    --p6-line-strong:rgba(176,138,74,.40);
    --p6-gold-glow:rgba(176,138,74,.16);
    --p6-radius:16px;
    --p6-radius-lg:22px;
    --p6-shadow-rest:
      0 1px 1px rgba(40,30,15,.03),
      0 2px 6px rgba(40,30,15,.045),
      0 10px 28px -12px rgba(40,30,15,.07);
    --p6-shadow-hover:
      0 1px 2px rgba(40,30,15,.04),
      0 6px 16px -4px rgba(40,30,15,.07),
      0 26px 52px -20px rgba(176,138,74,.18);
    --p6-shadow-float:
      0 2px 8px -2px rgba(40,30,15,.10),
      0 18px 44px -16px rgba(40,30,15,.16);
  }

  /* ===== Reading rhythm — gentler, more legible ===== */
  body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
    line-height:1.55;
  }
  p, .recipe-meta, .muted, .empty-state p{ line-height:1.6; }
  .recipe-card-instructions, .recipe-card-summary, .recipe-body, article p{
    max-width:68ch;
  }
  .stat-num, .num, [data-num], .stat-value{
    font-variant-numeric:tabular-nums lining-nums;
  }

  /* ===== Text selection — warm gold wash ===== */
  ::selection{ background:rgba(176,138,74,.22); color:var(--bn-ink); }

  /* ===== Section labels — quiet editorial caps with a gold tick ===== */
  .section-title{
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:11px;
    font-weight:600;
    color:var(--bn-ink-muted);
    display:flex; align-items:center; gap:9px;
  }
  .section-title::before{
    content:""; width:16px; height:2px; border-radius:2px;
    background:linear-gradient(90deg,var(--bn-gold),transparent);
    flex:0 0 auto;
  }

  /* ===== Cards & surfaces — cleaner edge, softer float ===== */
  .card, .recipe-card, .day-slot, .groc-item, .pantry-row, .meal-cell{
    border-radius:var(--p6-radius) !important;
    border:1px solid var(--p6-hair) !important;
    box-shadow:var(--p6-shadow-rest) !important;
    transition:
      transform .34s var(--p6-ease),
      box-shadow .34s var(--p6-ease),
      border-color .25s var(--p6-ease) !important;
  }
  .card:hover, .recipe-card:hover{
    transform:translateY(-3px) !important;
    box-shadow:var(--p6-shadow-hover) !important;
    border-color:var(--p6-line) !important;
  }
  .card:active, .recipe-card:active{ transform:translateY(-1px) scale(.997) !important; }

  /* ===== Recipe tile — refined image frame with gentle zoom ===== */
  .recipe-card{ overflow:hidden !important; }
  .recipe-thumb, .recipe-card .recipe-thumb{
    overflow:hidden;
    border-radius:13px 13px 0 0;
    position:relative;
    background:var(--bn-clay-soft);
  }
  .recipe-thumb img, .recipe-card img{
    transition:transform .55s var(--p6-ease) !important;
    will-change:transform;
  }
  .recipe-card:hover .recipe-thumb img,
  .recipe-card:hover img{ transform:scale(1.045) !important; }
  .recipe-thumb-overlay{
    background:linear-gradient(180deg,transparent 35%,rgba(9,11,10,.42) 100%) !important;
  }
  .recipe-title, .recipe-card-title{
    font-family:var(--font-display) !important;
    letter-spacing:0 !important;
    line-height:1.18 !important;
  }

  /* ===== Favourite heart — softer, gold when on ===== */
  .recipe-card-heart{ transition:transform .2s var(--p6-ease-snap), color .2s ease !important; }
  .recipe-card-heart:active{ transform:scale(.82) !important; }
  .recipe-card-heart.on{ color:var(--bn-gold) !important; filter:drop-shadow(0 1px 4px rgba(176,138,74,.4)); }

  /* ===== Buttons — one consistent, confident pill system ===== */
  .btn, button.btn, .btn-primary, .btn-secondary, .btn-ghost{
    border-radius:999px !important;
    font-weight:600 !important;
    letter-spacing:.005em !important;
    transition:
      transform .16s var(--p6-ease-snap),
      box-shadow .24s var(--p6-ease),
      background .22s var(--p6-ease),
      border-color .22s var(--p6-ease),
      color .2s var(--p6-ease) !important;
  }
  .btn:active, button.btn:active, .btn-primary:active{ transform:translateY(1px) scale(.985) !important; }

  /* Primary — charcoal field, gold type (brand CTA) */
  .btn-primary, .btn.primary, button.primary{
    background:var(--bn-charcoal) !important;
    color:var(--bn-gold-soft) !important;
    border:1px solid rgba(176,138,74,.30) !important;
    box-shadow:0 1px 2px rgba(40,30,15,.18), 0 10px 24px -12px rgba(40,30,15,.5) !important;
  }
  .btn-primary:hover, .btn.primary:hover, button.primary:hover{
    background:var(--bn-charcoal-90) !important;
    color:#F0DFB8 !important;
    box-shadow:0 2px 4px rgba(40,30,15,.2), 0 16px 32px -14px rgba(40,30,15,.6) !important;
  }

  /* Secondary / ghost — quiet, hairline, fills gently on hover */
  .btn-secondary, .btn.secondary, .btn-ghost, .btn.ghost{
    background:var(--bn-ivory) !important;
    color:var(--bn-ink) !important;
    border:1px solid var(--p6-line) !important;
    box-shadow:var(--p6-shadow-rest) !important;
  }
  .btn-secondary:hover, .btn.secondary:hover, .btn-ghost:hover, .btn.ghost:hover{
    background:#FBF5EA !important;
    border-color:var(--p6-line-strong) !important;
  }

  /* ===== Chips — refined, warm, clear selected state ===== */
  .chip{
    border-radius:999px !important;
    border:1px solid var(--p6-line) !important;
    background:rgba(176,138,74,.06) !important;
    color:var(--bn-ink-soft) !important;
    transition:
      background .2s var(--p6-ease),
      border-color .2s var(--p6-ease),
      color .2s var(--p6-ease),
      transform .14s var(--p6-ease-snap) !important;
  }
  .chip:hover{ background:rgba(176,138,74,.12) !important; border-color:var(--p6-line-strong) !important; }
  .chip:active{ transform:scale(.96) !important; }
  .chip.active, .chip.selected, .chip[aria-pressed="true"], .chip.on{
    background:var(--bn-charcoal) !important;
    color:var(--bn-gold-soft) !important;
    border-color:transparent !important;
  }

  /* ===== Inputs / search — calm field, gold focus halo ===== */
  input, textarea, select, .input, .search input{
    border-radius:12px !important;
    border:1px solid var(--p6-line) !important;
    background:var(--bn-ivory) !important;
    transition:border-color .2s var(--p6-ease), box-shadow .2s var(--p6-ease), background .2s var(--p6-ease) !important;
  }
  input:focus, textarea:focus, select:focus, .input:focus-within, .search input:focus{
    outline:none !important;
    border-color:var(--p6-line-strong) !important;
    box-shadow:0 0 0 3px var(--p6-gold-glow) !important;
    background:#fff !important;
  }
  ::placeholder{ color:var(--bn-ink-muted) !important; opacity:.7; }

  /* ===== Global accessible focus ring (keyboard only) ===== */
  a:focus-visible, button:focus-visible, .chip:focus-visible,
  [role="button"]:focus-visible, [tabindex]:focus-visible{
    outline:none !important;
    box-shadow:0 0 0 3px var(--p6-gold-glow), 0 0 0 1px var(--p6-line-strong) !important;
    border-radius:10px;
  }

  /* ===== Bottom nav — frosted glass, refined active indicator ===== */
  .bottom-nav{
    background:rgba(247,242,234,.82) !important;
    -webkit-backdrop-filter:saturate(140%) blur(18px);
    backdrop-filter:saturate(140%) blur(18px);
    border-top:1px solid var(--p6-hair) !important;
    box-shadow:0 -8px 28px -18px rgba(40,30,15,.28) !important;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) * .5) !important;
  }
  .bottom-nav button{
    color:var(--bn-ink-muted) !important;
    border-radius:14px !important;
    transition:color .22s var(--p6-ease), transform .16s var(--p6-ease-snap) !important;
  }
  .bottom-nav button .nav-icon{ transition:transform .26s var(--p6-ease-snap), opacity .2s ease !important; }
  .bottom-nav button:active{ transform:scale(.92) !important; }
  .bottom-nav button.active, .bottom-nav button[aria-current="page"]{
    color:var(--bn-gold-deep) !important;
  }
  .bottom-nav button.active .nav-icon,
  .bottom-nav button[aria-current="page"] .nav-icon{ transform:translateY(-1px) scale(1.06) !important; }
  /* gold pill indicator under the active tab */
  .bottom-nav button.active::before,
  .bottom-nav button[aria-current="page"]::before{
    content:"" !important;
    position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:26px; height:3px; border-radius:3px;
    background:linear-gradient(90deg,var(--bn-gold-soft),var(--bn-gold)) !important;
    opacity:1 !important;
  }

  /* ===== Modals — frosted backdrop, soft entrance ===== */
  .modal-backdrop, .overlay, .modal-overlay{
    background:rgba(9,11,10,.42) !important;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  .modal, .sheet, .dialog{
    border-radius:var(--p6-radius-lg) !important;
    border:1px solid var(--p6-hair) !important;
    box-shadow:
      0 0 0 1px rgba(40,30,15,.04),
      0 24px 60px -18px rgba(40,30,15,.30),
      0 60px 120px -40px rgba(40,30,15,.20) !important;
    animation:p6ModalIn .34s var(--p6-ease) both;
  }
  @keyframes p6ModalIn{
    from{ opacity:0; transform:translateY(12px) scale(.985); }
    to{ opacity:1; transform:none; }
  }

  /* ===== Toasts — floating frosted pill ===== */
  .toast{
    border-radius:999px !important;
    background:rgba(9,11,10,.92) !important;
    color:var(--bn-gold-soft) !important;
    border:1px solid rgba(176,138,74,.28) !important;
    box-shadow:var(--p6-shadow-float) !important;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }

  /* ===== Empty states — calm, centred, editorial ===== */
  .empty-state{
    text-align:center;
    color:var(--bn-ink-muted);
    padding:34px 22px;
  }
  .empty-state h2, .empty-state h3, .empty-state .empty-title{
    font-family:var(--font-display) !important;
    font-style:italic;
    font-weight:500 !important;
    color:var(--bn-ink) !important;
    letter-spacing:-.01em;
  }

  /* ===== Page header underline — refined gold rule ===== */
  .page-title::after{
    background:linear-gradient(90deg,var(--bn-gold),var(--bn-gold-soft)) !important;
    height:2px !important; border-radius:2px;
  }

  /* ===== Hairline dividers ===== */
  hr, .divider{
    border:0 !important;
    height:1px !important;
    background:linear-gradient(90deg,transparent,var(--p6-hair),transparent) !important;
  }

  /* ===== Skeleton shimmer — warm ===== */
  .skeleton{
    background:linear-gradient(100deg,#efe7d8 30%,#f8f2e6 50%,#efe7d8 70%) !important;
    background-size:200% 100% !important;
    animation:p6Shimmer 1.4s ease-in-out infinite !important;
    border-radius:10px !important;
  }
  @keyframes p6Shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

  /* ===== Scrollbars — thin & warm ===== */
  *{ scrollbar-width:thin; scrollbar-color:var(--p6-line-strong) transparent; }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-thumb{
    background:rgba(176,138,74,.34);
    border-radius:999px;
    border:3px solid transparent;
    background-clip:content-box;
  }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(176,138,74,.5); background-clip:content-box; }
  ::-webkit-scrollbar-track{ background:transparent; }

  /* ===== Soft view entrance ===== */
  .view.active, main > section.active{ animation:p6ViewIn .4s var(--p6-ease) both; }
  @keyframes p6ViewIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

  /* ===== Respect reduced motion ===== */
  @media (prefers-reduced-motion:reduce){
    *, *::before, *::after{
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
      scroll-behavior:auto !important;
    }
  }


/* ═══════════ PERF LAYER (2026-06-08) ═══════════
   content-visibility lets the browser skip layout + paint for OFF-SCREEN
   list items, cutting first-paint cost and scroll jank on long recipe /
   grocery / meal-plan lists. The `auto` intrinsic size keyword means the
   real height is remembered after first render, so scroll position stays
   stable. Gracefully ignored on browsers that do not support it. */
.recipe-card{ content-visibility:auto; contain-intrinsic-size:auto 320px; }
.plan-day-row{ content-visibility:auto; contain-intrinsic-size:auto 120px; }
.grocery-item,.grocery-row{ content-visibility:auto; contain-intrinsic-size:auto 56px; }
/* Keep modal scrolling from chaining to the page behind it (no effect on the
   main page pull-to-refresh). */
.modal,.subs-modal{ overscroll-behavior:contain; }

/* ============================================================
   PERF 7.0 — 2026-06-10: instant taps + scroll containment
   - touch-action:manipulation removes the double-tap-zoom wait
     so buttons/cards respond instantly on iOS + Android.
   - overscroll-behavior:contain on inner scrollables stops
     scroll chaining (background page "grabbing" the scroll and
     feeling stuck) without touching main-page pull-to-refresh.
============================================================ */
button, .btn, .chip, .nav-btn, .bottom-nav button, .tab,
.recipe-card, .meal-cell, .pds-slot, .day-slot, .stat,
.grocery-item, .timer-chip, .temp-chip, a {
  touch-action: manipulation;
}
.modal-body, .peek-panel, .modal .scroll, .slot-picker-list,
.onb-body, .cook-ing-list {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}


/* ============================================================
   POLISH 7.0 — 2026-06-13  (scheduled UI/UX refinement)
   Appended at the very end of brand-refresh.css so it wins the
   cascade over both the editorial base layer and the inline
   <style> in app.html (hence the !important pattern).

   POLISH 6.0 already covered cards, buttons, chips, inputs,
   bottom-nav, modals, toasts, empty-states and scrollbars.
   7.0 deliberately targets the gaps that were still rough:
     • a confident, fluid DISPLAY TYPE SCALE (titles/headings)
     • the home HERO copy + actions
     • the STAT tiles (number + label rhythm, gentle lift)
     • SEGMENTED controls + TABS (modern inset track)
     • status PILLS / badges consistency
     • LIST-ROW density + hairline separators (grocery/pantry/plan)
     • comfortable 44px tap targets

   Honours the user photo slots: never sets background-image on
   .hero-card, .grid-stats .stat or .today-meals-card — only
   refines their typography, borders, radius and hover transform.
   Motion is covered by the existing prefers-reduced-motion block.
   ============================================================ */
  :root{
    --p7-ease:cubic-bezier(.22,1,.36,1);
    --p7-ink:var(--bn-charcoal);
    --p7-hair:rgba(40,30,15,.07);
    --p7-line:rgba(176,138,74,.20);
    --p7-track:rgba(40,30,15,.05);
    --p7-gold:var(--bn-gold);
  }

  /* ===== Fluid, confident display scale =====
     Cormorant looks best a touch larger with tighter tracking at
     big sizes. clamp() keeps it graceful from phone to desktop. */
  .page-title{
    font-family:var(--font-display) !important;
    font-size:clamp(28px, 6.4vw, 38px) !important;
    line-height:1.08 !important;
    letter-spacing:-.012em !important;
    font-weight:600 !important;
  }
  .page-sub{
    color:var(--bn-ink-muted) !important;
    font-size:12.5px !important;
    letter-spacing:.02em !important;
    margin-top:3px !important;
  }
  .hero-card h2{
    font-family:var(--font-display) !important;
    font-size:clamp(30px, 7.4vw, 44px) !important;
    line-height:1.06 !important;
    letter-spacing:-.014em !important;
    margin:.18em 0 .42em !important;
  }
  /* Modal / dialog titles + in-card headings share the serif voice */
  .modal h2, .modal h3, .sheet h2, .dialog h2,
  .modal-title, .sheet-title{
    font-family:var(--font-display) !important;
    letter-spacing:-.01em !important;
    line-height:1.15 !important;
    font-weight:600 !important;
  }

  /* ===== Home hero — calmer copy block, roomier actions ===== */
  .hero-card{ padding:26px 28px 28px !important; }
  .hero-actions{
    display:flex !important; flex-wrap:wrap !important; gap:10px !important;
    margin-top:18px !important;
  }
  .hero-actions .btn{ min-height:44px !important; padding-inline:18px !important; }

  /* ===== Stat tiles — editorial number + quiet label, gentle lift.
     Transform-only hover keeps the per-tile background photo intact. */
  .grid-stats{ gap:12px !important; }
  .grid-stats .stat{
    border:1px solid var(--p7-hair) !important;
    border-radius:16px !important;
    box-shadow:0 1px 2px rgba(40,30,15,.04), 0 10px 26px -16px rgba(40,30,15,.10) !important;
    transition:transform .3s var(--p7-ease), box-shadow .3s var(--p7-ease), border-color .25s var(--p7-ease) !important;
    overflow:hidden !important;
  }
  .grid-stats .stat:hover{
    transform:translateY(-2px) !important;
    border-color:var(--p7-line) !important;
    box-shadow:0 2px 6px rgba(40,30,15,.06), 0 20px 40px -18px rgba(176,138,74,.26) !important;
  }
  .grid-stats .stat:active{ transform:translateY(0) scale(.995) !important; }
  .stat-num{
    font-family:var(--font-display) !important;
    font-weight:600 !important;
    font-size:clamp(26px, 7vw, 34px) !important;
    line-height:1 !important;
    color:var(--bn-charcoal) !important;
    font-variant-numeric:tabular-nums lining-nums !important;
    letter-spacing:-.01em !important;
  }
  .stat-label{
    text-transform:uppercase !important;
    letter-spacing:.12em !important;
    font-size:10.5px !important;
    font-weight:600 !important;
    color:var(--bn-ink-muted) !important;
    margin-top:5px !important;
  }

  /* ===== Segmented controls (.seg / .seg-sm / .unit-toggle) =====
     A soft inset track with a clean charcoal "pill" for the active
     segment — the modern iOS-style segmented look, on-brand. */
  .seg, .cook-mode .unit-toggle{
    background:var(--p7-track) !important;
    border:1px solid var(--p7-hair) !important;
    border-radius:12px !important;
    padding:3px !important;
    gap:2px !important;
  }
  .seg button, .cook-mode .unit-toggle button{
    border:0 !important;
    border-radius:9px !important;
    background:transparent !important;
    color:var(--bn-ink-soft) !important;
    font-weight:600 !important;
    min-height:34px !important;
    transition:background .2s var(--p7-ease), color .2s var(--p7-ease), box-shadow .2s var(--p7-ease), transform .14s var(--p7-ease) !important;
  }
  .seg button:hover:not(.active), .cook-mode .unit-toggle button:hover:not(.active){
    color:var(--bn-charcoal) !important;
    background:rgba(255,255,255,.5) !important;
  }
  .seg button:active, .cook-mode .unit-toggle button:active{ transform:scale(.97) !important; }
  .seg button.active, .cook-mode .unit-toggle button.active{
    background:var(--bn-charcoal) !important;
    color:var(--bn-gold-soft) !important;
    box-shadow:0 1px 2px rgba(40,30,15,.18), 0 6px 16px -8px rgba(40,30,15,.4) !important;
    font-weight:600 !important;
  }

  /* ===== Tabs (auth + picker) — underline indicator, no heavy fill ===== */
  .auth-tabs, .picker-tabs{
    border-bottom:1px solid var(--p7-hair) !important;
    gap:4px !important;
  }
  .auth-tab, .picker-tabs button, .picker-tabs > *{
    position:relative !important;
    color:var(--bn-ink-muted) !important;
    font-weight:600 !important;
    background:transparent !important;
    border:0 !important;
    transition:color .2s var(--p7-ease) !important;
  }
  .auth-tab:hover, .picker-tabs button:hover{ color:var(--bn-charcoal) !important; }
  .auth-tab.active, .picker-tabs .active, .picker-tabs button.active,
  .auth-tab[aria-selected="true"], .picker-tabs [aria-selected="true"]{
    color:var(--bn-charcoal) !important;
  }
  .auth-tab.active::after, .picker-tabs .active::after, .picker-tabs button.active::after,
  .auth-tab[aria-selected="true"]::after, .picker-tabs [aria-selected="true"]::after{
    content:"" !important;
    position:absolute !important; left:14%; right:14%; bottom:-1px;
    height:2.5px !important; border-radius:3px 3px 0 0 !important;
    background:linear-gradient(90deg,var(--bn-gold-soft),var(--bn-gold)) !important;
  }

  /* ===== Status pills / suggestion chips — one calm look ===== */
  .sug-pill, .csn-pill, .cook-step-pill, .pdr-today-pill, .pds-side-pill, .ds-pill{
    border-radius:999px !important;
    font-weight:600 !important;
    letter-spacing:.01em !important;
    border:1px solid var(--p7-line) !important;
  }
  .sug-pill{
    background:rgba(176,138,74,.08) !important;
    color:var(--bn-gold-deep) !important;
    transition:background .18s var(--p7-ease), transform .14s var(--p7-ease) !important;
  }
  .sug-pill:hover{ background:rgba(176,138,74,.16) !important; }
  .sug-pill:active{ transform:scale(.96) !important; }

  /* ===== List-row density + hairline rhythm =====
     Grocery / pantry / plan rows read as a clean ledger: comfortable
     touch height, a single warm hairline between rows, calm hover. */
  .grocery-item, .grocery-row, .pantry-row, .plan-day-row, .groc-item{
    min-height:48px !important;
    transition:background .18s var(--p7-ease) !important;
  }
  .grocery-item:hover, .grocery-row:hover, .pantry-row:hover, .groc-item:hover{
    background:rgba(176,138,74,.045) !important;
  }
  /* a checked grocery line recedes quietly */
  .grocery-item.checked, .grocery-row.checked, .groc-item.checked,
  .grocery-item.done, .groc-item.done{
    opacity:.55 !important;
  }
  .grocery-item.checked .groc-name, .groc-item.checked .groc-name,
  .grocery-item.done .groc-name{
    text-decoration:line-through !important;
    text-decoration-color:var(--bn-ink-muted) !important;
  }

  /* ===== Source / recipe chips inside grocery rows ===== */
  .src-chip, .grocery-source, .groc-src{
    border-radius:999px !important;
    background:rgba(40,30,15,.045) !important;
    border:1px solid var(--p7-hair) !important;
    color:var(--bn-ink-soft) !important;
    font-size:11px !important;
    letter-spacing:.01em !important;
  }

  /* ===== Comfortable, consistent tap targets ===== */
  .btn, button.btn, .chip, .nav-btn, .bottom-nav button{
    min-height:40px !important;
  }
  .bottom-nav button{ min-height:48px !important; }

  /* ===== Sticky top bar (where present) — frosted, matches nav ===== */
  .top-bar{
    background:rgba(247,242,234,.84) !important;
    -webkit-backdrop-filter:saturate(140%) blur(16px) !important;
    backdrop-filter:saturate(140%) blur(16px) !important;
    border-bottom:1px solid var(--p7-hair) !important;
  }

  /* ===== Card content rhythm — a touch more air ===== */
  .card-pad{ padding:18px 20px !important; }

  /* ===== Accent word — refined italic gold (used in hero/empty copy) ===== */
  .accent{
    color:var(--bn-gold-deep) !important;
    font-style:italic !important;
  }

/* ===== Mobile input zoom guard (2026-06-13) =====
   The legacy 16px input rule lives only inside @media (max-width:600px), so
   touch tablets / large foldables in the 601-820px range inherit the 15px
   .auth-field/.input size and trigger iOS Safari's zoom-on-focus. Scope this
   to touch devices (hover:none + pointer:coarse) so desktop sizing is never
   affected; selector is limited to text-entry fields so cook-mode controls
   and other intentionally-sized elements are untouched. !important is needed
   to beat app.html's inline <style> which loads after this external sheet. */
@media (hover:none) and (pointer:coarse){
  .input, .textarea, .select, .search input, .subs-search,
  .pantry-row .input, .auth-field input,
  input[type="text"], input[type="search"], input[type="url"],
  input[type="email"], input[type="password"], input[type="number"],
  input[type="tel"], input:not([type]), textarea, select{
    font-size:16px !important;
  }
}