/* ════════════════════════════════════════════════════════
       TOKENS
    ════════════════════════════════════════════════════════ */
    :root {
      --parchment:  #F7F3EC;
      --parchment2: #EDE7DB;
      --surface:    #FFFFFF;
      --ink:        #1C1917;
      --ink-mid:    #57534E;
      --ink-light:  #A8A29E;
      --rule:       #DDD5C8;
      --terra:      #C2623F;
      --terra-dark: #A84E32;
      --terra-light:#F5E6DF;
      --sage:       #7A9E7E;
      --sage-deep:  #3B7A3F;
      --sage-light: #E3EEE4;
      --amber:      #D97706;
      --rose:       #BE4B4B;
      --rose-light: #FCE8E8;

      --sidebar-w:  240px;
      --drawer-w:   460px;
      --radius:     8px;
      --radius-sm:  6px;
      --shadow:     0 2px 8px rgba(28,25,23,.08), 0 1px 2px rgba(28,25,23,.05);
      --shadow-lg:  0 8px 32px rgba(28,25,23,.16);
      --tap:        44px;            /* min touch target */

      --safe-top:    env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);

      --z-nav: 50; --z-topbar: 40; --z-detail: 150; --z-drawer: 160; --z-modal: 200; --z-toast: 500;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { -webkit-text-size-adjust: 100%; }
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: var(--parchment);
      color: var(--ink);
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      -webkit-font-smoothing: antialiased;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition: none !important; animation: none !important; }
    }

    /* ════════════════════════════════════════════════════════
       SIDEBAR  (desktop)  →  BOTTOM TAB BAR (mobile)
    ════════════════════════════════════════════════════════ */
    .sidebar {
      width: var(--sidebar-w);
      background: var(--ink);
      color: #F5F5F4;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      position: fixed;
      top: 0; left: 0; bottom: 0;
      z-index: var(--z-nav);
      padding: 32px 0 24px;
    }
    .sidebar-brand {
      padding: 0 24px 28px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .sidebar-brand h1 {
      font-family: 'Playfair Display', serif;
      font-size: 1.6rem; font-weight: 700; color: #FFF; line-height: 1.1;
    }
    .sidebar-brand p {
      font-size: .68rem; font-weight: 500; letter-spacing: .12em;
      text-transform: uppercase; color: var(--ink-light); margin-top: 5px;
    }
    .sidebar-nav { padding: 22px 12px; flex: 1; }
    .nav-label {
      font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
      color: var(--ink-light); padding: 0 12px; margin-bottom: 8px;
    }
    .nav-item {
      display: flex; align-items: center; gap: 11px;
      padding: 11px 12px; border-radius: var(--radius-sm);
      cursor: pointer; font-size: .87rem; font-weight: 400;
      color: #D6D3D1; transition: background .15s, color .15s;
      margin-bottom: 2px; border: none; background: none;
      width: 100%; text-align: left; font-family: inherit;
    }
    .nav-item svg { opacity: .6; flex-shrink: 0; }
    .nav-item:hover { background: rgba(255,255,255,.07); color: #FFF; }
    .nav-item:hover svg { opacity: 1; }
    .nav-item.active { background: var(--terra); color: #FFF; font-weight: 500; }
    .nav-item.active svg { opacity: 1; }
    .nav-sep { height: 1px; background: rgba(255,255,255,.1); margin: 14px 12px; }
    .nav-tab-label { display: inline; }   /* inline on desktop, stacked on mobile */
    .sidebar-footer {
      padding: 0 24px; font-size: .7rem; color: var(--ink-light); line-height: 1.5;
    }
    .sidebar-footer a { color: var(--ink-light); }

    /* ════════════════════════════════════════════════════════
       MAIN
    ════════════════════════════════════════════════════════ */
    .main {
      margin-left: var(--sidebar-w);
      flex: 1; min-width: 0;
      min-height: 100vh; min-height: 100dvh;
      display: flex; flex-direction: column;
    }

    .topbar {
      background: var(--surface);
      border-bottom: 1px solid var(--rule);
      padding: 14px 28px;
      display: flex; align-items: center; gap: 12px;
      position: sticky; top: 0; z-index: var(--z-topbar);
    }
    .search-wrap { position: relative; flex: 1; max-width: 380px; }
    .search-wrap > svg {
      position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
      color: var(--ink-light); pointer-events: none;
    }
    .search-input {
      width: 100%; padding: 10px 36px 10px 38px;
      border: 1px solid var(--rule); border-radius: 22px;
      background: var(--parchment); font-family: inherit;
      font-size: .88rem; color: var(--ink); outline: none;
      transition: border-color .2s, background .2s;
    }
    .search-input:focus { border-color: var(--terra); background: #FFF; }
    .search-input::placeholder { color: var(--ink-light); }
    .search-clear {
      position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
      background: none; border: none; cursor: pointer; color: var(--ink-light);
      padding: 6px; display: none; border-radius: 50%;
    }
    .search-clear.show { display: flex; }
    .search-clear:hover { color: var(--ink); }

    .chips-scroll {
      display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
      -webkit-overflow-scrolling: touch; flex: 1; min-width: 0;
    }
    .chips-scroll::-webkit-scrollbar { display: none; }
    .chip {
      padding: 6px 13px; border-radius: 20px; font-size: .76rem; font-weight: 500;
      cursor: pointer; border: 1px solid var(--rule); background: var(--surface);
      color: var(--ink-mid); transition: all .15s; white-space: nowrap; flex-shrink: 0;
      font-family: inherit;
    }
    .chip:hover { border-color: var(--terra); color: var(--terra); }
    .chip.active { background: var(--terra); border-color: var(--terra); color: #FFF; }

    .toggle-eligible {
      display: flex; align-items: center; gap: 7px; cursor: pointer;
      font-size: .8rem; color: var(--ink-mid); white-space: nowrap; user-select: none;
    }
    .toggle-eligible input { width: auto; accent-color: var(--terra); }

    /* Buttons */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 7px;
      padding: 10px 16px; border-radius: var(--radius-sm);
      font-family: inherit; font-size: .84rem; font-weight: 500;
      cursor: pointer; border: none; transition: all .15s; white-space: nowrap;
      min-height: var(--tap);
    }
    .btn-primary { background: var(--terra); color: #FFF; }
    .btn-primary:hover { background: var(--terra-dark); }
    .btn-ghost { background: transparent; color: var(--ink-mid); border: 1px solid var(--rule); }
    .btn-ghost:hover { background: var(--parchment2); }
    .btn-sm { padding: 7px 13px; font-size: .8rem; min-height: 0; }
    .btn-icon {
      padding: 9px; border-radius: var(--radius-sm); background: transparent;
      color: var(--ink-mid); border: 1px solid var(--rule); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: all .15s; min-width: var(--tap); min-height: var(--tap);
    }
    .btn-icon:hover { background: var(--parchment2); }
    .btn-icon.danger:hover { background: var(--rose-light); color: var(--rose); }

    .btn-new-label { display: inline; }

    /* ════════════════════════════════════════════════════════
       PANELS
    ════════════════════════════════════════════════════════ */
    .panel { display: none; padding: 28px; flex: 1; }
    .panel.active { display: block; }
    .panel-header {
      display: flex; justify-content: space-between; align-items: flex-start;
      margin-bottom: 24px; gap: 16px;
    }
    .panel-header h2 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 600; }
    .panel-header p { font-size: .82rem; color: var(--ink-mid); margin-top: 4px; }

    /* ════════════════════════════════════════════════════════
       RECIPE GRID + CARDS
    ════════════════════════════════════════════════════════ */
    .recipe-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px;
    }
    .empty-state {
      grid-column: 1 / -1; text-align: center; padding: 72px 28px; color: var(--ink-light);
    }
    .empty-state svg { margin: 0 auto 16px; display: block; opacity: .4; }
    .empty-state strong {
      font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--ink-mid);
      display: block; margin-bottom: 6px;
    }
    .empty-state p { font-size: .88rem; }

    .recipe-card {
      background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
      overflow: hidden; position: relative; cursor: pointer;
      transition: box-shadow .2s, transform .2s;
    }
    @media (hover: hover) {
      .recipe-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
    }
    .recipe-card:active { transform: scale(.99); }

    /* Folded corner — eligibility indicator */
    .recipe-card::before {
      content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0;
      border-style: solid; border-width: 0 42px 42px 0;
      border-color: transparent var(--parchment) transparent transparent; z-index: 2;
    }
    .recipe-card::after {
      content: ''; position: absolute; top: 0; right: 0; width: 42px; height: 42px; z-index: 1;
    }
    .card-fold-complete::after { background: var(--sage); }
    .card-fold-partial::after  { background: var(--amber); }
    .card-fold-none::after     { background: var(--rose); }

    .card-stripe { height: 3px; background: var(--rule); }
    .card-fold-complete .card-stripe { background: var(--sage); }
    .card-fold-partial  .card-stripe { background: var(--amber); }
    .card-fold-none     .card-stripe { background: var(--rose); }

    .card-body { padding: 16px 18px 14px; user-select: none; }
    .card-category {
      font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
      color: var(--ink-light); margin-bottom: 6px;
    }
    .card-title {
      font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 600;
      line-height: 1.3; margin-bottom: 10px; padding-right: 28px;
    }
    .card-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
    .meta-pill { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--ink-mid); }
    .meta-pill svg { color: var(--ink-light); flex-shrink: 0; }

    .card-ingredients { border-top: 1px solid var(--rule); padding-top: 12px; margin-bottom: 14px; }
    .ingredients-label {
      font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
      color: var(--ink-light); margin-bottom: 8px;
    }
    .ingredient-tags { display: flex; flex-wrap: wrap; gap: 4px; }
    .ing-tag {
      font-size: .72rem; padding: 2px 9px; border-radius: 20px;
      border: 1px solid var(--rule); color: var(--ink-mid);
    }
    .ing-tag.have { background: var(--sage-light); border-color: #B2D5B5; color: var(--sage-deep); }
    .ing-tag.missing { background: var(--rose-light); border-color: #EAADAD; color: #8B2020; text-decoration: line-through; opacity: .75; }

    .card-footer {
      border-top: 1px solid var(--rule); padding: 9px 12px 9px 18px;
      display: flex; justify-content: space-between; align-items: center; background: var(--parchment);
    }
    .card-status { font-size: .72rem; font-weight: 500; display: flex; align-items: center; gap: 6px; color: var(--ink-mid); }
    .status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--ink-light); }
    .card-fold-complete .status-dot { background: var(--sage); }
    .card-fold-partial  .status-dot { background: var(--amber); }
    .card-fold-none     .status-dot { background: var(--rose); }
    .card-actions { display: flex; gap: 4px; }

    /* ════════════════════════════════════════════════════════
       SHEETS (detail + drawer share base behaviour)
    ════════════════════════════════════════════════════════ */
    .overlay {
      position: fixed; inset: 0; background: rgba(28,25,23,.45);
      opacity: 0; pointer-events: none; transition: opacity .25s;
    }
    .overlay.open { opacity: 1; pointer-events: all; }
    #detail-overlay { z-index: calc(var(--z-detail) - 1); }
    #drawer-overlay  { z-index: calc(var(--z-drawer) - 1); }

    /* Detail modal — slides up, anchored right of sidebar on desktop */
    .detail-modal {
      position: fixed; left: var(--sidebar-w); right: 0; top: 0; bottom: 0;
      background: var(--surface); z-index: var(--z-detail);
      display: flex; flex-direction: column;
      transform: translateY(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
    }
    .detail-modal.open { transform: translateY(0); }

    .detail-header {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
      padding: 26px 32px 18px; border-bottom: 1px solid var(--rule); flex-shrink: 0;
      padding-top: max(26px, var(--safe-top));
    }
    .detail-header-left { flex: 1; min-width: 0; }
    .detail-eyebrow {
      font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
      color: var(--ink-light); margin-bottom: 6px;
    }
    .detail-title { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
    .detail-meta-row { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
    .detail-meta-item { display: flex; flex-direction: column; gap: 2px; }
    .detail-meta-item .k {
      font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-light);
    }
    .detail-meta-item .v { font-size: .85rem; font-weight: 500; color: var(--ink-mid); }
    .detail-close {
      flex-shrink: 0; background: var(--parchment); border: 1px solid var(--rule);
      border-radius: var(--radius-sm); padding: 0 14px; cursor: pointer;
      font-size: .82rem; font-weight: 500; color: var(--ink-mid);
      display: flex; align-items: center; gap: 6px; transition: background .15s;
      min-height: var(--tap); font-family: inherit;
    }
    .detail-close:hover { background: var(--parchment2); }

    .detail-body { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 320px 1fr; -webkit-overflow-scrolling: touch; }
    .section-label {
      font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
      color: var(--ink-light); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
    }
    .section-label .sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-light); font-size: .7rem; }

    .detail-ingredients { border-right: 1px solid var(--rule); padding: 26px 26px 40px; background: var(--parchment); }
    .detail-ing-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
    .detail-ing-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 5px; font-size: .86rem; line-height: 1.4; }
    .detail-ing-item.missing-item .detail-ing-text { color: var(--ink-light); }
    .detail-ing-check {
      flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }
    .detail-ing-check.have { background: var(--sage-light); border: 1.5px solid #B2D5B5; color: var(--sage); }
    .detail-ing-check.missing { background: var(--parchment2); border: 1.5px dashed var(--rule); }
    .detail-pantry-note {
      margin-top: 18px; padding: 11px 13px; background: var(--surface);
      border: 1px solid var(--rule); border-radius: var(--radius-sm);
      font-size: .76rem; color: var(--ink-mid); line-height: 1.5;
    }
    .detail-pantry-note strong { color: var(--ink); }

    .detail-steps { padding: 26px 32px 40px; }
    .detail-step { display: flex; gap: 15px; margin-bottom: 24px; align-items: flex-start; }
    .detail-step:last-child { margin-bottom: 0; }
    .step-num {
      flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
      background: var(--terra); color: #FFF; font-size: .8rem; font-weight: 600;
      display: flex; align-items: center; justify-content: center; margin-top: 1px;
    }
    .step-text { font-size: .9rem; line-height: 1.65; color: var(--ink-mid); padding-top: 4px; }

    .detail-nutrition { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule); }
    .nutrition-grid { display: flex; gap: 10px; flex-wrap: wrap; }
    .nutrition-cell {
      background: var(--parchment); border: 1px solid var(--rule); border-radius: var(--radius-sm);
      padding: 10px 14px; min-width: 78px; text-align: center; flex: 1;
    }
    .nutrition-cell .k {
      display: block; font-size: .6rem; font-weight: 600; letter-spacing: .08em;
      text-transform: uppercase; color: var(--ink-light); margin-bottom: 4px;
    }
    .nutrition-cell .v { font-size: .88rem; font-weight: 600; color: var(--ink); }

    .detail-footer {
      flex-shrink: 0; border-top: 1px solid var(--rule); padding: 12px 32px;
      padding-bottom: max(12px, var(--safe-bottom));
      display: flex; gap: 10px; justify-content: flex-end; background: var(--parchment);
    }

    /* ════════════════════════════════════════════════════════
       DRAWER (create/edit)
    ════════════════════════════════════════════════════════ */
    .drawer {
      position: fixed; top: 0; right: 0; bottom: 0; width: var(--drawer-w); max-width: 100vw;
      background: var(--surface); z-index: var(--z-drawer);
      transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
      display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(28,25,23,.12);
    }
    .drawer.open { transform: translateX(0); }
    .drawer-header {
      padding: 22px 26px 18px; border-bottom: 1px solid var(--rule);
      display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
      padding-top: max(22px, var(--safe-top));
    }
    .drawer-header h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; }
    .drawer-close {
      background: none; border: none; cursor: pointer; color: var(--ink-mid);
      padding: 10px; border-radius: 6px; display: flex;
      min-width: var(--tap); min-height: var(--tap); align-items: center; justify-content: center;
    }
    .drawer-close:hover { color: var(--ink); background: var(--parchment); }
    .drawer-body { flex: 1; overflow-y: auto; padding: 22px 26px; -webkit-overflow-scrolling: touch; }
    .drawer-footer {
      border-top: 1px solid var(--rule); padding: 14px 26px;
      padding-bottom: max(14px, var(--safe-bottom));
      display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; flex-wrap: wrap;
    }

    /* Form */
    .form-group { margin-bottom: 16px; }
    .form-row { display: flex; gap: 12px; margin-bottom: 16px; }
    .form-col { flex: 1; min-width: 0; }
    label { display: block; font-size: .78rem; font-weight: 500; color: var(--ink-mid); margin-bottom: 6px; }
    label .req { color: var(--terra); }
    input[type=text], input[type=url], textarea, select {
      width: 100%; padding: 11px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
      background: var(--parchment); font-family: inherit; font-size: 16px; /* 16px prevents iOS zoom */
      color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s;
    }
    input:focus, textarea:focus, select:focus {
      border-color: var(--terra); box-shadow: 0 0 0 3px rgba(194,98,63,.12); background: #FFF;
    }
    textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
    .form-hint { font-size: .72rem; color: var(--ink-light); margin-top: 4px; }
    .form-section-label {
      font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
      color: var(--ink-light); margin: 22px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
    }
    .form-section-label:first-child { margin-top: 0; }

    .ing-editor, .steps-list { display: flex; flex-direction: column; gap: 8px; }
    .ing-row { display: flex; gap: 8px; align-items: center; }
    .ing-row input { flex: 1; }
    .row-remove {
      flex-shrink: 0; background: none; border: 1px solid var(--rule); border-radius: 6px;
      cursor: pointer; color: var(--rose); display: flex; align-items: center; justify-content: center;
      min-width: var(--tap); min-height: var(--tap); transition: background .15s;
    }
    .row-remove:hover { background: var(--rose-light); }
    .add-row { display: flex; gap: 8px; margin-top: 8px; }
    .add-row input { flex: 1; }
    .step-row { display: flex; gap: 9px; align-items: flex-start; }
    .step-badge {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
      background: var(--terra-light); color: var(--terra); font-size: .78rem; font-weight: 600;
      display: flex; align-items: center; justify-content: center; margin-top: 9px;
    }
    .step-row textarea { min-height: 64px; }

    /* ════════════════════════════════════════════════════════
       PANTRY
    ════════════════════════════════════════════════════════ */
    .pantry-add { display: flex; gap: 8px; max-width: 520px; }
    .pantry-add input { flex: 1; }
    .pantry-hint { font-size: .76rem; color: var(--ink-light); margin-top: 8px; max-width: 520px; line-height: 1.5; }
    .detail-ing-item { cursor: pointer; }
    .detail-ing-item:hover { background: var(--parchment2); }
    .detail-ing-check { transition: background .15s, border-color .15s; }
    .pantry-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
    .pantry-tag {
      display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px;
      border-radius: 22px; background: var(--surface); font-size: .84rem; color: var(--ink);
      border: 1px solid var(--rule); box-shadow: var(--shadow);
    }
    .pantry-remove {
      background: var(--parchment2); border: none; cursor: pointer; color: var(--ink-mid);
      display: flex; align-items: center; justify-content: center;
      width: 24px; height: 24px; border-radius: 50%; transition: all .15s; flex-shrink: 0;
    }
    .pantry-remove:hover { background: var(--rose-light); color: var(--rose); }

    /* ════════════════════════════════════════════════════════
       JSON-LD MODAL
    ════════════════════════════════════════════════════════ */
    .schema-overlay {
      position: fixed; inset: 0; background: rgba(28,25,23,.5); z-index: var(--z-modal);
      display: none; align-items: center; justify-content: center; padding: 20px;
    }
    .schema-overlay.open { display: flex; }
    .schema-modal {
      background: var(--ink); border-radius: 10px; max-width: 640px; width: 100%;
      max-height: 82vh; display: flex; flex-direction: column;
    }
    .schema-modal-header {
      padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.1);
      display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
    }
    .schema-modal-header h4 { font-family: 'Playfair Display', serif; color: #FFF; font-size: 1rem; }
    .schema-modal-header button { background: none; border: none; color: #A8A29E; cursor: pointer; display: flex; padding: 6px; }
    .schema-actions { display: flex; gap: 8px; }
    .schema-copy {
      background: rgba(255,255,255,.1); border: none; color: #E7E5E4; cursor: pointer;
      font-size: .76rem; font-weight: 500; padding: 6px 12px; border-radius: 5px; font-family: inherit;
    }
    .schema-copy:hover { background: rgba(255,255,255,.18); }
    .schema-modal pre {
      flex: 1; overflow: auto; padding: 20px; font-size: .74rem; line-height: 1.6;
      color: #D6D3D1; font-family: ui-monospace, 'SF Mono', Menlo, monospace; white-space: pre;
    }

    /* ════════════════════════════════════════════════════════
       TOAST + FAB
    ════════════════════════════════════════════════════════ */
    .toast {
      position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 80px);
      padding: 12px 20px; border-radius: 22px; background: var(--ink); color: #FFF;
      font-size: .84rem; font-weight: 500; box-shadow: var(--shadow-lg);
      z-index: var(--z-toast); opacity: 0; transition: transform .26s, opacity .26s;
      max-width: calc(100vw - 32px); text-align: center;
    }
    .toast.show { transform: translate(-50%, 0); opacity: 1; }

    .fab { display: none; }   /* shown on mobile only */

    /* ════════════════════════════════════════════════════════
       MOBILE  ≤  760px
    ════════════════════════════════════════════════════════ */
    @media (max-width: 760px) {
      body { flex-direction: column; }

      /* sidebar → bottom tab bar */
      .sidebar {
        flex-direction: row; width: 100%; height: auto;
        top: auto; left: 0; right: 0; bottom: 0;
        padding: 6px 4px; padding-bottom: max(6px, var(--safe-bottom));
        border-top: 1px solid rgba(255,255,255,.12);
        justify-content: space-around;
      }
      .sidebar-brand, .nav-label, .nav-sep, .sidebar-footer { display: none; }
      .sidebar-nav { display: flex; padding: 0; flex: 1; justify-content: space-around; gap: 2px; }
      .nav-item {
        flex-direction: column; gap: 3px; padding: 7px 4px; width: auto; flex: 1;
        align-items: center; font-size: .62rem; border-radius: 10px; max-width: 90px;
      }
      .nav-item svg { width: 20px; height: 20px; opacity: .7; }
      .nav-item.active { background: transparent; color: var(--terra); }
      .nav-item.active svg { color: var(--terra); }
      .nav-tab-label { display: block; font-size: .62rem; }

      .main { margin-left: 0; padding-bottom: calc(64px + var(--safe-bottom)); }

      /* topbar: search row, chips row below */
      .topbar {
        flex-wrap: wrap; padding: 10px 14px; gap: 10px;
        padding-top: max(10px, var(--safe-top));
      }
      .auth-bar { padding: 8px 14px; }
      .search-wrap { max-width: none; flex: 1 1 100%; order: 1; }
      .chips-scroll { order: 3; flex: 1 1 100%; padding-bottom: 2px; }
      .topbar-toggle { order: 2; }
      .btn-new-topbar { display: none; }    /* replaced by FAB */

      .panel { padding: 18px 14px; }
      .panel-header h2 { font-size: 1.3rem; }
      .recipe-grid { grid-template-columns: 1fr; gap: 14px; }

      /* full-screen sheets */
      .detail-modal { left: 0; }
      .detail-body { grid-template-columns: 1fr; }
      .detail-ingredients { border-right: none; border-bottom: 1px solid var(--rule); padding: 22px 18px 28px; }
      .detail-header { padding: 18px; padding-top: max(18px, var(--safe-top)); }
      .detail-title { font-size: 1.35rem; }
      .detail-meta-row { gap: 16px; }
      .detail-steps { padding: 22px 18px 32px; }
      .detail-footer { padding: 12px 18px; padding-bottom: max(12px, var(--safe-bottom)); }

      .drawer { width: 100vw; }

      /* FAB for new recipe */
      .fab {
        display: flex; position: fixed; right: 16px;
        bottom: calc(72px + var(--safe-bottom));
        width: 56px; height: 56px; border-radius: 50%;
        background: var(--terra); color: #FFF; border: none; cursor: pointer;
        align-items: center; justify-content: center; z-index: var(--z-topbar);
        box-shadow: 0 4px 16px rgba(194,98,63,.45);
      }
      .fab:active { transform: scale(.94); }

      .toast { bottom: calc(80px + var(--safe-bottom)); }
    }

    @media (max-width: 380px) {
      .card-actions .btn-icon:first-child { display: none; } /* drop edit on tiny screens; use detail sheet */
    }

/* ── Shopping cart ── */
.cart-section { margin-top: 1.5rem; }
.cart-grid { display: flex; flex-direction: column; gap: .5rem; }
.cart-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; padding: .5rem .6rem; background: var(--surface, #26221e); border-radius: 8px; font-size: .9rem; }
.cart-name { font-weight: 600; }
.cart-total { color: var(--ink-light, #a8a29e); font-size: .8rem; }
.cart-contrib { cursor: pointer; padding: .15rem .35rem; border-radius: 6px; border: 1px solid var(--border, #3a3531); }
.cart-contrib:hover { background: var(--accent, #b91c1c); color: #fff; border-color: transparent; }
.cart-empty { color: var(--ink-light, #a8a29e); font-size: .85rem; }

/* ── Auth ── */
.auth-bar {
  background: var(--parchment);
  border-bottom: 1px solid var(--rule);
  padding: 10px 28px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 44px;
}
.auth-area { display: flex; align-items: center; gap: 10px; }
.auth-status { font-size: .75rem; }
.auth-signed-in { display: flex; align-items: center; gap: 10px; }
.auth-email { font-size: .85rem; color: var(--ink); }
.auth-signout {
  font-size: .8rem; background: none; border: 1px solid var(--rule);
  border-radius: 999px; padding: 4px 12px; color: var(--ink);
  cursor: pointer; font-family: inherit;
}
.auth-signout:hover { background: var(--parchment2); }