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

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #e8e4de;
      color: #2c2c2c;
      line-height: 1.6;
      min-height: 100vh;
    }

    a { color: #2d6a4f; text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* ── Header ── */
    .site-header {
      background: #ece8e2;
      border-bottom: 1px solid #d5cdc0;
      padding: 0.9rem 0;
    }
    .site-header .inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 1rem;
      display: flex;
      align-items: center;
    }
    .site-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: #2d6a4f;
      font-variant: small-caps;
      letter-spacing: .06em;
      text-decoration: none;
    }
    .site-title:hover { opacity: .8; }

    /* Short title hidden by default, shown on mobile */
    .site-title-short { display: none; }
    .site-title-full { display: inline; }

    /* ── Hamburger menu button (always visible) ── */
    .site-mobile-menu-btn {
      background: none; border: 1px solid #d0c8be; border-radius: 6px;
      padding: .2rem .5rem; cursor: pointer; font-size: 1rem; color: inherit;
    }
    .site-mobile-menu {
      display: none; position: fixed;
      top: 0; right: 0; bottom: 0; left: auto;
      width: 280px; max-width: 80vw;
      background: var(--bg, #e8e4de); z-index: 700; flex-direction: column;
      padding: .75rem; gap: .5rem;
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      box-shadow: -4px 0 24px rgba(0,0,0,.15);
      border-left: 1px solid var(--border, #d5cdc0);
    }
    .site-mobile-menu.open { display: flex; }
    .site-mobile-menu a, .site-mobile-menu button {
      font-size: .88rem; padding: .5rem .65rem; border-radius: 8px;
      text-align: left; width: 100%; flex-shrink: 0;
    }
    /* Mobile: fullscreen overlay */
    @media (max-width: 768px) {
      .site-mobile-menu {
        width: 100%; max-width: 100%; left: 0;
        border-left: none; box-shadow: none;
      }
    }


    /* ── Main container ── */
    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 2rem 1rem;
    }

    /* ── Page heading ── */
    .page-heading {
      font-size: 1.75rem;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 1.5rem;
    }

    /* ── Recipe grid (list page) ── */
    .recipe-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 1.25rem;
    }
    .recipe-card {
      background: #f2eeea;
      border: 1px solid #d8d0c5;
      border-radius: 8px;
      padding: 1.25rem 1.5rem;
      transition: box-shadow .15s, transform .15s;
      position: relative;
    }
    .recipe-card:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,.08);
      transform: translateY(-2px);
    }
    .recipe-card__title {
      font-size: 1.05rem;
      font-weight: 600;
      display: block;
      margin-bottom: 0.35rem;
    }
    .recipe-card__meta {
      font-size: 0.8rem;
      color: #888;
    }

    /* ── Empty state ── */
    .empty-state {
      text-align: center;
      padding: 5rem 1rem;
      color: #aaa;
      font-size: 1.05rem;
    }

    /* ── Tags / badges ── */
    .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
    .tag {
      background: #dceedd;
      color: #2d6a4f;
      padding: 0.2rem 0.65rem;
      border-radius: 20px;
      font-size: 0.78rem;
      font-weight: 500;
    }

    /* ── Detail page ── */
    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-size: 0.88rem;
      margin-bottom: 1.25rem;
      color: #2d6a4f;
    }
    .recipe-title {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 0.75rem;
      line-height: 1.25;
    }
    .oven-banner {
      display: inline-flex;
      gap: 1.5rem;
      background: #fff8f0;
      border: 1px solid #f0d9b5;
      border-radius: 6px;
      padding: 0.6rem 1rem;
      font-size: 0.9rem;
      margin-bottom: 1.75rem;
    }

    /* ── Sections ── */
    .section { margin-bottom: 2.5rem; }
    .section-heading {
      font-size: 1.1rem;
      font-weight: 600;
      color: #444;
      border-bottom: 2px solid #e5ddd0;
      padding-bottom: 0.4rem;
      margin-bottom: 0.9rem;
    }

    /* ── Ingredients list ── */
    .ingredients-list { list-style: none; }
    .ingredients-list li {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
      padding: 0.4rem 0;
      border-bottom: 1px solid #f2ede5;
      font-size: 0.93rem;
    }
    .ing-qty {
      min-width: 80px;
      font-weight: 600;
      color: #2d6a4f;
      font-size: 0.83rem;
      flex-shrink: 0;
    }
    .ing-note {
      font-size: 0.8rem;
      color: #999;
      font-style: italic;
    }
    .component-label {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #aaa;
      padding: 0.6rem 0 0.2rem;
    }

    /* ── Buttons ── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      padding: 0.5rem 1.1rem;
      border-radius: 6px;
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      text-decoration: none;
      transition: opacity .15s;
    }
    .btn:hover { opacity: .85; text-decoration: none; }
    .btn-primary { background: #2d6a4f; color: #fff; }
    .btn-outline  { background: transparent; color: #2d6a4f; border: 1.5px solid #2d6a4f; }

    /* ── List header ── */
    .list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.5rem;
    }

    /* ── Forms ── */
    .create-form { max-width: 480px; }
    .form-group  { margin-bottom: 1.2rem; }
    .form-label  { display: block; font-size: 0.88rem; font-weight: 600; color: #555; margin-bottom: 0.35rem; }
    .form-input  {
      width: 100%;
      padding: 0.55rem 0.75rem;
      border: 1px solid #cac2b8;
      border-radius: 6px;
      font-size: 0.95rem;
      font-family: inherit;
      background: #f5f2ed;
      transition: border-color .15s;
    }
    .form-input:focus { outline: none; border-color: #2d6a4f; box-shadow: 0 0 0 3px rgba(45,106,79,.12); }
    .form-error { color: #c0392b; font-size: 0.88rem; margin-bottom: 1rem; }
    .required { color: #c0392b; }

    /* ── Ingredient autocomplete ── */
    .autocomplete-wrapper { position: relative; flex: 1; min-width: 180px; }
    .autocomplete-wrapper .form-input { width: 100%; }
    .ingredient-dropdown {
      position: absolute;
      top: calc(100% + 2px);
      left: 0;
      right: 0;
      background: #f5f2ed;
      border: 1px solid #cac2b8;
      border-radius: 0 0 6px 6px;
      list-style: none;
      max-height: 220px;
      overflow-y: auto;
      z-index: 200;
      display: none;
      box-shadow: 0 4px 12px rgba(0,0,0,.08);
    }
    .ingredient-dropdown.open { display: block; }
    .ingredient-dropdown li {
      padding: 0.5rem 0.75rem;
      cursor: pointer;
      font-size: 0.92rem;
    }
    .ingredient-dropdown li:hover { background: #f0f7f4; }
    .ingredient-dropdown li.create-new {
      color: #2d6a4f;
      font-style: italic;
      border-top: 1px solid #f2ede5;
    }

    /* ── Builder ── */
    .builder-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.25rem;
    }
    .builder-section { margin-bottom: 2rem; }
    .builder-form {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
    }
    .builder-form .form-input { width: auto; flex: 1; min-width: 140px; }
    .builder-list { list-style: none; }
    .builder-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.5rem 0;
      border-bottom: 1px solid #f2ede5;
      font-size: 0.93rem;
    }
    .item-text { flex: 1; }
    .item-action { font-size: 0.8rem; color: #2d6a4f; margin-left: 0.4rem; }
    .empty-hint { color: #bbb; font-size: 0.88rem; padding: 0.5rem 0; }
    .tag-draft { background: #fff3e0; color: #b36200; }
    .btn-remove {
      background: none;
      border: none;
      color: #c0392b;
      font-size: 1.1rem;
      line-height: 1;
      cursor: pointer;
      padding: 0.2rem 0.4rem;
      border-radius: 4px;
      flex-shrink: 0;
    }
    .btn-remove:hover { background: #fde8e8; }
    .steps-builder-list { counter-reset: steps-builder; }
    .steps-builder-list .builder-item::before {
      counter-increment: steps-builder;
      content: counter(steps-builder) ". ";
      font-weight: 600;
      color: #888;
      margin-right: 0.4rem;
      flex-shrink: 0;
    }

    /* ── Danger button / small button / icon button ── */
    .btn-danger { background: #c0392b; color: #fff; }
    .btn-sm { padding: 0.25rem 0.55rem; font-size: 0.8rem; border-radius: 4px; }
    .btn-icon {
      background: none; border: none; color: #bbb; cursor: pointer;
      padding: 0.15rem 0.4rem; font-size: 1rem; border-radius: 4px; flex-shrink: 0;
    }
    .btn-icon:hover { color: #2d6a4f; background: #f0f7f4; }
    .editable-title { cursor: pointer; }
    .editable-title:hover { text-decoration: underline dotted; color: #1a1a1a; }

    /* ── Page grid: main content + macro sidebar ── */
    .page-with-sidebar {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 1.5rem;
      align-items: start;
    }
    .macro-sidebar {
      position: sticky;
      top: 1rem;
    }
    .macro-sidebar .macro-section {
      margin-top: 0;
    }
    /* Macro sidebar refresh button */
    .macro-refresh-btn {
      display: flex; align-items: center; gap: .35rem;
      background: none; border: 1px solid #d0c8be; border-radius: 6px;
      padding: .3rem .65rem; font-size: .82rem; cursor: pointer; color: #555;
      margin-top: .65rem; width: 100%;
      transition: background .1s;
    }
    .macro-refresh-btn:hover { background: #f0f7f4; color: #2d6a4f; border-color: #2d6a4f; }
    .macro-refresh-btn:disabled { opacity: .55; cursor: default; }

    /* ── Ingredients overview (top of page, multi-column) ── */
    .ingredients-overview-section {
      background: #f2eeea;
      border: 1px solid #d8d0c5;
      border-radius: 10px;
      padding: .75rem 1rem;
      margin-bottom: 1.1rem;
    }
    .ingredients-overview-heading {
      font-size: .78rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: #666; margin-bottom: .55rem;
    }
    .ingredients-overview-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 0 1.25rem;
    }
    .ing-ov-item {
      display: flex; align-items: baseline; gap: .3rem;
      padding: .18rem 0;
      border-bottom: 1px solid #f5f0eb;
      font-size: .83rem;
      min-width: 0;  /* allow truncation inside grid cell */
    }
    .ing-ov-item:last-child { border-bottom: none; }
    .ing-ov-name {
      font-weight: 600;
      min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ing-ov-qty  { color: #888; font-size: .78rem; flex-shrink: 0; white-space: nowrap; }
    .ing-ov-kcal { color: #2d6a4f; font-size: .72rem; background: #e8f5e9;
                   border-radius: 7px; padding: .02rem .3rem; white-space: nowrap; flex-shrink: 0; margin-left: auto; }
    .ing-ov-nodata { color: #b36200; font-size: .72rem; background: #fff3e0;
                     border-radius: 7px; padding: .02rem .3rem; flex-shrink: 0; margin-left: auto; }

    /* ── DnD Builder layout — single-column vertical ── */
    .builder-layout {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 1.25rem;
    }
    /* Add-ingredient bar: compact horizontal strip */
    .add-panel {
      background: #f2eeea;
      border: 1px solid #d8d0c5;
      border-radius: 10px;
      padding: .85rem 1rem;
      margin-bottom: 1.1rem;
    }
    .add-panel-row {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      align-items: center;
    }
    .add-panel h3 {
      font-size: 0.78rem; font-weight: 700; color: #666;
      text-transform: uppercase; letter-spacing: .06em;
      margin-bottom: .5rem;
    }
    .canvas-panel-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: .75rem;
    }

    /* Container boxes */
    .recipe-container {
      border-radius: 10px;
      margin-bottom: 1.25rem;
      /* overflow: hidden removed — it clipped the nutrition dropdown which is
         position:absolute inside the chip. Border-radius is preserved via
         first/last-child selectors below. */
      border: 2px solid #e5ddd0;
      position: relative;
    }
    .recipe-container.nutrition-editing {
      z-index: 100;
    }
    /* Preserve rounded corners on the container's first and last direct child
       so backgrounds don’t bleed outside the parent border-radius. */
    .recipe-container > *:first-child { border-radius: 8px 8px 0 0; }
    .recipe-container > *:last-child  { border-radius: 0 0 8px 8px; }
    .recipe-container.type-container { border-color: #f0c040; }
    .recipe-container.type-tool      { border-color: #4a90d9; }
    .recipe-container.type-appliance { border-color: #e05555; }

    .container-header {
      padding: .55rem .9rem;
      display: flex; align-items: center; gap: .5rem;
      font-weight: 600; font-size: .93rem;
    }
    .type-container .container-header { background: #fff3cc; }
    .type-tool      .container-header { background: #ddeeff; }
    .type-appliance .container-header { background: #ffe5e5; }
    .container-icon { font-size: 1.3rem; }
    .container-action-select {
      flex: 1; min-width: 0; max-width: 180px;
      padding: .18rem .4rem; font-size: .78rem; font-family: inherit;
      border: 1px solid rgba(0,0,0,.15); border-radius: 5px;
      background: rgba(255,255,255,.6); color: inherit; cursor: pointer;
    }
    .container-action-select:focus { outline: none; border-color: #2d6a4f; }
    .btn-container-remove {
      background: none; border: none; color: #bbb; cursor: pointer;
      padding: .15rem .35rem; font-size: 1rem; border-radius: 4px; flex-shrink: 0; line-height: 1;
    }
    .btn-container-remove:hover { color: #c0392b; background: #fde8e8; }
    /* Container destination selector (→ output) */
    .container-dest-select {
      flex: none; width: auto; max-width: 140px;
      padding: .18rem .3rem; font-size: .75rem; font-family: inherit;
      border: 1px solid rgba(0,0,0,.12); border-radius: 5px;
      background: rgba(255,255,255,.55); color: #2d6a4f; cursor: pointer;
    }
    .container-dest-select:focus { outline: none; border-color: #2d6a4f; }
    /* Output badge shown on the receiving container */
    .container-incoming-badge {
      display: inline-flex; align-items: center; gap: .25rem;
      background: #e8f5e9; color: #2d6a4f; border-radius: 12px;
      padding: .1rem .5rem; font-size: .72rem; font-weight: 600;
      border: 1px solid #c8e6c9; white-space: nowrap;
    }

    .container-body {
      min-height: 64px;
      padding: .6rem .7rem;
      display: flex; flex-wrap: wrap; gap: .5rem; align-content: flex-start;
      background: #f5f2ed;
      transition: background .1s;
    }
    .container-footer {
      padding: .3rem .7rem;
      background: rgba(0,0,0,.02);
      border-top: 1px solid rgba(0,0,0,.06);
      display: flex; align-items: center; gap: .4rem;
    }
    .container-footer .container-dest-select {
      flex: 1; max-width: none;
    }
    .container-body.drop-target {
      background: #f0f7f4;
      outline: 2px dashed #2d6a4f;
      outline-offset: -2px;
    }
    .container-drop-hint {
      color: #bbb; font-size: .8rem; align-self: center;
    }

    /* Ingredient chips */
    .ingredient-chip {
      background: #f2eeea;
      border: 1px solid #cac2b8;
      border-radius: 20px;
      padding: .3rem .45rem .3rem .75rem;
      display: inline-flex; align-items: center; gap: .3rem;
      font-size: .82rem;
      cursor: grab;
      user-select: none;
      box-shadow: 0 1px 3px rgba(0,0,0,.06);
      transition: box-shadow .1s, opacity .1s;
      max-width: 100%;
      min-width: 0;
    }
    .ingredient-chip:hover { box-shadow: 0 2px 7px rgba(0,0,0,.1); }
    .ingredient-chip.dragging { opacity: .45; cursor: grabbing; }
    .recipe-container.dragging-container { opacity: .5; cursor: grabbing; }
    .recipe-container.reorder-above { border-top: 3px solid #2d6a4f !important; }
    .recipe-container.reorder-below { border-bottom: 3px solid #2d6a4f !important; }
    /* Step reorder */
    .step-grip {
      color:#bbb; font-size:.8rem; margin-right:.4rem; cursor:grab;
      flex-shrink:0; user-select:none; padding:.1rem .2rem;
    }
    .builder-item.step-reorder-above { border-top: 3px solid #2d6a4f; }
    .builder-item.step-reorder-below { border-bottom: 3px solid #2d6a4f; }
    .builder-item.step-dragging { opacity: .45; }
    /* Action parameters row */
    .container-params {
      display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
      padding: .35rem .7rem .3rem;
      background: rgba(0,0,0,.025);
      border-top: 1px solid rgba(0,0,0,.06);
      font-size: .78rem;
    }
    .container-params label {
      display: inline-flex; align-items: center; gap: .2rem;
      color: #666; white-space: nowrap;
    }
    .container-params input {
      width: 72px; padding: .15rem .35rem; font-size: .78rem;
      border: 1px solid #d0c8be; border-radius: 4px; background: #fff;
      font-family: inherit;
    }
    .container-params input:focus { outline: none; border-color: #2d6a4f; }
    .container-params .notes-input { width: 180px; }
    .chip-qty { color: #2d6a4f; font-weight: 600; }

    /* Unassigned zone */
    .unassigned-zone {
      border: 2px dashed #e0d8d0;
      border-radius: 8px;
      padding: .65rem;
      min-height: 52px;
      margin-top: .75rem;
      display: flex; flex-wrap: wrap; gap: .5rem; align-content: flex-start;
      transition: border-color .1s, background .1s;
    }
    .unassigned-zone.drop-target {
      border-color: #2d6a4f;
      background: #f0f7f4;
    }
    .unassigned-hint { color: #bbb; font-size: .8rem; align-self: center; }

    /* Container picker */
    .container-picker {
      display: none;
      gap: .5rem;
      align-items: center;
      margin-top: .5rem;
    }

    /* Inline add-ingredient bar inside containers */
    .container-add-bar {
      display: flex; align-items: center; justify-content: center;
      padding: .35rem .7rem;
      background: rgba(0,0,0,.02);
      border-top: 1px dashed rgba(0,0,0,.10);
      cursor: pointer;
      font-size: .78rem; font-weight: 600; color: #888;
      transition: background .1s, color .1s;
      gap: .3rem;
    }
    .container-add-bar:hover { background: #f0f7f4; color: #2d6a4f; }
    .container-add-form {
      display: none;
      flex-wrap: wrap;
      gap: .4rem;
      align-items: center;
      padding: .55rem .7rem;
      background: rgba(0,0,0,.02);
      border-top: 1px solid rgba(0,0,0,.06);
    }
    .container-add-form.open { display: flex; }
    .container-add-form .form-input { font-size: .82rem; padding: .3rem .5rem; }
    .container-add-form .autocomplete-wrapper { flex: 1; min-width: 140px; }

    /* Multi-select */
    .ingredient-chip.selected {
      outline: 2px solid #2d6a4f;
      outline-offset: -1px;
      background: #e8f5e9;
    }
    .multi-select-badge {
      position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
      background: #2d6a4f; color: #fff; padding: .4rem 1rem;
      border-radius: 20px; font-size: .82rem; font-weight: 600;
      box-shadow: 0 4px 16px rgba(0,0,0,.2); z-index: 1000;
      display: flex; align-items: center; gap: .5rem;
    }
    .multi-select-badge button {
      background: rgba(255,255,255,.2); border: none; color: #fff;
      padding: .15rem .5rem; border-radius: 12px; cursor: pointer; font-size: .78rem;
    }
    .multi-select-badge button:hover { background: rgba(255,255,255,.35); }

    /* Copy containers (reference symbol) */
    .recipe-container.is-copy {
      border-style: dashed;
      opacity: .88;
    }
    .copy-badge {
      font-size: .65rem; background: #f3e8ff; color: #7c3aed;
      border-radius: 8px; padding: .05rem .4rem; white-space: nowrap;
      border: 1px solid #d8b4fe; font-weight: 600;
    }

    /* Steps section */
    .steps-section { margin-top: 2rem; }

    /* ── Macro section ── */
    .macro-section {
      margin-top: 1.5rem;
      background: #f2eeea;
      border: 1px solid #d8d0c5;
      border-radius: 10px;
      padding: .75rem .85rem;
    }
    .macro-section-heading {
      font-size: .78rem; font-weight: 700; color: #666;
      text-transform: uppercase; letter-spacing: .06em;
      margin-bottom: .75rem;
      display: flex; align-items: center; gap: .5rem;
    }
    .macro-grid {
      display: grid;
      grid-template-columns: auto repeat(4, minmax(0, 1fr));
      gap: .2rem .25rem;
      font-size: .75rem;
    }
    .macro-grid .macro-label { color: #888; font-size: .68rem; white-space: nowrap; text-align: right; }
    .macro-grid .macro-val   { font-weight: 600; text-align: right; white-space: nowrap; font-size: .75rem; }
    .macro-grid .macro-row-label { color: #555; font-weight: 500; align-self: center; white-space: nowrap; font-size: .75rem; }
    .macro-kcal    { color: #e07030; }
    .macro-protein { color: #2d6a4f; }
    .macro-fat     { color: #b35700; }
    .macro-carbs   { color: #1a5a9a; }
    .macro-partial { color: #b36200; font-size: .78rem; margin-top: .4rem; }
    .macro-portions-row {
      display: flex; align-items: center; gap: .4rem;
      margin-bottom: .6rem; font-size: .85rem;
    }
    .macro-portions-display {
      font-weight: 700; color: #2d6a4f; cursor: pointer;
      border-bottom: 1px dashed #2d6a4f;
    }
    /* Portions edit */
    .portions-row {
      display: inline-flex; align-items: center; gap: .4rem;
      font-size: .88rem; color: #555; margin-top: .3rem;
    }
    .portions-input {
      width: 55px; padding: .15rem .4rem; font-size: .88rem;
      border: 1px solid #d0c8be; border-radius: 5px; font-family: inherit;
    }
    /* Nutrition lookup dropdown (in chip edit mode) */
    .nutrition-lookup-wrap { position: relative; display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; }
    .nutrition-info-line { font-size: .75rem; color: #888; white-space: nowrap; }
    .nutrition-search-btn { background: none; border: 1px solid #d0c8be; border-radius: 4px; cursor: pointer; padding: .1rem .4rem; font-size: .82rem; color: #2d6a4f; }
    .nutrition-search-btn:hover { background: #f0f7f4; }
    .nutrition-search-dropdown {
      position: absolute; top: 100%; left: 0; z-index: 400;
      background: #f5f2ed; border: 1px solid #cac2b8; border-radius: 6px;
      box-shadow: 0 4px 16px rgba(0,0,0,.15);
      min-width: 300px; max-width: 420px; width: max-content;
      max-height: 60vh; overflow-y: auto;
      list-style: none; padding: 0; display: none;
    }
    .nutrition-search-dropdown.open { display: block; }
    .nutrition-search-dropdown li {
      padding: .45rem .75rem; cursor: pointer; font-size: .82rem;
      border-bottom: 1px solid #f2ede5;
    }
    .nutrition-search-dropdown li:last-child { border-bottom: none; }
    .nutrition-search-dropdown li:hover { background: #f0f7f4; }
    .nutrition-search-dropdown .nsd-name { font-weight: 600; }
    .nutrition-search-dropdown .nsd-meta { color: #999; font-size: .75rem; }

    /* ── Meal Planner ── */
    body:has(.planner-page) { overflow: hidden; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
    body:has(.planner-page) main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    body:has(.planner-page) main > .container {
      max-width: 100%; padding: .2rem 0;
      flex: 1; min-height: 0; display: flex; flex-direction: column;
      overflow: hidden;
    }
    .planner-page {
      display: flex; flex-direction: column;
      flex: 1; min-height: 0;
      overflow: hidden;
    }
    .planner-table-wrap {
      max-width: 100%;
      margin: 0;
      flex: none;
      height: calc(50vh - 30px);
      overflow: hidden;
      min-height: 80px;
    }
    .planner-week-nav {
      display: flex; align-items: center; gap: .5rem;
    }
    .planner-week-nav button {
      background: none; border: 1px solid #d0c8be; border-radius: 5px;
      padding: .2rem .55rem; cursor: pointer; font-size: .9rem; color: #555;
    }
    .planner-week-nav button:hover { background: #f0f7f4; color: #2d6a4f; border-color: #2d6a4f; }
    .planner-week-label { font-weight: 600; font-size: .88rem; color: #444; min-width: 180px; text-align: center; }
    .planner-table {
      width: 100%; height: 100%; border-collapse: collapse;
      background: #f2eeea; border: 1px solid #d8d0c5;
      border-radius: 0; overflow: hidden; table-layout: fixed;
    }
    .planner-table th {
      background: #eae6e0; padding: .4rem .2rem; font-size: .75rem;
      font-weight: 700; color: #555; text-align: center;
      border-bottom: 2px solid #e5ddd0; border-right: 1px solid #f2ede5;
      cursor: default; position: relative;
      overflow: hidden;
    }
    /* Column resize handle on right edge of th */
    .planner-table th .col-resize-handle {
      position: absolute; top: 0; right: -2px; width: 5px; height: 100%;
      cursor: col-resize; z-index: 10;
    }
    .planner-table th .col-resize-handle:hover,
    .planner-table th .col-resize-handle.active {
      background: var(--accent, #2d6a4f); opacity: .4;
    }
    .planner-table th:first-child {
      width: 64px; background: #e5e1db;
    }
    .planner-table td {
      border: 1px solid #f2ede5; padding: 0; vertical-align: top;
      position: relative; overflow: hidden;
    }
    .planner-chip {
      width: 100%; margin: 0; border-radius: 0;
      border: none; border-bottom: 1px solid rgba(0,0,0,.06);
    }
    .planner-chip:last-child { border-bottom: none; }
    /* Bug 4: 2-column planner layout on mobile */
    @media (max-width: 768px) {
      .planner-table { table-layout: auto; }
      .planner-table th:first-child { width: 40px; }
      .planner-table th { font-size: .55rem; padding: .2rem .1rem; }
      .planner-table td.meal-label { font-size: .45rem; width: 40px; padding: .1rem; }
      .planner-chip { font-size: .75rem; padding: .15rem .25rem; }
      .planner-chip-name { font-size: .75rem !important; }
      .planner-page { display: flex; flex-direction: column; }
      .planner-table-wrap { flex: none; height: auto !important; max-height: 45vh; overflow: auto; }
    }
    @media (max-width: 480px) {
      .planner-table thead th:nth-child(n+6) { display: none; } /* hide Sb, Nd on very small */
      .planner-table tbody td:nth-child(n+6) { display: none; }
      .planner-chip-name { font-size: .65rem !important; }
    }
    .planner-table td.meal-label {
      background: #eae6e0; font-size: .6rem; font-weight: 700;
      color: #888; text-transform: uppercase; letter-spacing: .03em;
      text-align: center; vertical-align: middle; width: 64px;
      padding: .15rem .2rem;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      position: relative;
    }
    /* Row resize handle on bottom edge of meal-label td */
    .planner-table td.meal-label .row-resize-handle {
      position: absolute; bottom: -2px; left: 0; width: 100%; height: 5px;
      cursor: row-resize; z-index: 10;
    }
    .planner-table td.meal-label .row-resize-handle:hover,
    .planner-table td.meal-label .row-resize-handle.active {
      background: var(--accent, #2d6a4f); opacity: .4;
    }
    .planner-cell {
      min-height: 80px; transition: background .1s;
    }
    .planner-cell.drop-over {
      background: #e8f5e9; outline: 2px dashed #2d6a4f; outline-offset: -2px;
    }
    .planner-chip {
      display: flex; align-items: center; gap: .25rem;
      background: #f5f2ed; border: 1px solid #cac2b8;
      padding: .3rem .4rem .3rem .6rem; margin-bottom: .15rem;
      font-size: 1rem; cursor: default; position: relative;
    }
    .planner-chip:hover { box-shadow: 0 1px 5px rgba(0,0,0,.1); }
    .planner-chip-name {
      flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis;
      white-space: normal; word-break: break-word;
      line-height: 1.35;
      font-weight: 500;
    }
    .planner-chip-remove {
      background: none; border: none; color: #ccc; cursor: pointer;
      font-size: .82rem; padding: 0 .15rem; line-height: 1; flex-shrink: 0;
    }
    .planner-chip-remove:hover { color: #c0392b; }
    /* ── Cart toggle on planner chips ── */
    .planner-chip-cart {
      background: none; border: none; cursor: pointer;
      font-size: .6rem; padding: 0 .15rem; line-height: 1; flex-shrink: 0;
      color: #bbb; opacity: .6;
    }
    .planner-chip-cart:hover { opacity: 1; }
    .planner-chip.in-cart {
      border-left: 3px solid #2d6a4f;
    }
    .planner-chip.in-cart .planner-chip-cart {
      color: #2d6a4f; opacity: 1; font-weight: 700;
    }
    .planner-chip:not(.in-cart) {
      border-left: 3px dashed #d0c8be;
    }
    .planner-summary-row td {
      background: #ece8e2; text-align: center; font-size: .58rem;
      font-weight: 600; padding: .1rem .1rem;
      cursor: default; position: relative; line-height: 1.2;
    }
    .planner-summary-row.kcal-row td {
      border-top: 1px solid #e5ddd0; color: #e07030; font-weight: 700;
    }
    .planner-summary-row.protein-row td { color: #2d6a4f; }
    .planner-summary-row.fat-row td     { color: #b35700; }
    .planner-summary-row.carbs-row td   { color: #1a5a9a; }
    /* Tooltip */
    .planner-tooltip {
      display: none; position: absolute; z-index: 500;
      background: #333; color: #fff; border-radius: 6px;
      padding: .4rem .65rem; font-size: .72rem; white-space: nowrap;
      pointer-events: none; left: 50%; transform: translateX(-50%);
      top: calc(100% + 4px);
    }
    .planner-tooltip::before {
      content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
      border-left: 5px solid transparent; border-right: 5px solid transparent;
      border-bottom: 5px solid #333;
    }
    /* Recipe picker (below table) */
    .recipe-picker {
      max-width: 100%;
      margin: 0;
      background: #f2eeea;
      border: 1px solid #d8d0c5;
      border-radius: 0;
      padding: .4rem .5rem .3rem;
      flex: 1 1 auto;
      display: flex; flex-direction: column;
      min-height: 80px;
      overflow: hidden;
    }
    /* ── Resize handle between table and picker ── */
    .planner-resize-handle {
      height: 8px; cursor: row-resize;
      background: var(--surface-2, #eae6e0);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; touch-action: none;
      border-top: 1px solid var(--border, #d8d0c5);
      border-bottom: 1px solid var(--border, #d8d0c5);
    }
    .planner-resize-handle::after {
      content: ''; width: 32px; height: 3px;
      background: var(--text-soft, #aaa); border-radius: 2px;
    }
    .planner-resize-handle:hover { background: var(--accent-soft, #e8f5e9); }
    .planner-resize-handle:active { background: var(--accent-soft, #dceedd); }
    .recipe-picker-controls {
      display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
      margin-bottom: .5rem;
      flex-shrink: 0;
    }
    .recipe-picker-heading {
      font-size: .78rem; font-weight: 700; color: #666;
      text-transform: uppercase; letter-spacing: .06em;
      margin-right: .3rem;
    }
    .recipe-picker-controls .sidebar-search {
      width: auto; min-width: 180px; flex: 1; max-width: 280px;
      margin-bottom: 0;
    }
    .recipe-picker-controls .sidebar-sort { margin-bottom: 0; }
    .recipe-picker-controls .sidebar-filters { margin-bottom: 0; }
    .picker-expand-btn {
      background: none; border: 1px solid #d0c8be; border-radius: 4px;
      padding: .15rem .45rem; font-size: .7rem; cursor: pointer; color: #555;
      margin-left: auto; flex-shrink: 0;
    }
    .picker-expand-btn:hover { background: #f0f7f4; color: #2d6a4f; border-color: #2d6a4f; }
    .recipe-picker-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
      grid-auto-rows: minmax(3.6rem, auto);
      gap: .4rem;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      list-style: none;
      flex: 1;
      min-height: 0;
      align-content: start;
    }
    /* Expanded state: picker takes over the page */
    .recipe-picker.expanded {
      position: fixed; top: 52px; left: 0; right: 0; bottom: 0;
      margin: 0; border-radius: 0; z-index: 600;
      padding: .6rem .75rem;
    }
    .recipe-picker.expanded .recipe-picker-list {
      max-height: none;
    }
    .sidebar-search {
      width: 100%; padding: .35rem .6rem; font-size: .82rem;
      border: 1px solid #d0c8be; border-radius: 6px; font-family: inherit;
      margin-bottom: .4rem;
    }
    .sidebar-search:focus { outline: none; border-color: #2d6a4f; }
    .sidebar-sort {
      display: flex; gap: .3rem; margin-bottom: .4rem;
    }
    .sidebar-sort button {
      flex: 1; background: #f2eeea; border: 1px solid #cac2b8; border-radius: 4px;
      padding: .2rem .4rem; font-size: .72rem; cursor: pointer; color: #555;
    }
    .sidebar-sort button.active { background: #2d6a4f; color: #fff; border-color: #2d6a4f; }
    .sidebar-filters {
      display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem;
    }
    .sidebar-filters button {
      background: #f2eeea; border: 1px solid #cac2b8; border-radius: 12px;
      padding: .12rem .45rem; font-size: .68rem; cursor: pointer; color: #666;
    }
    .sidebar-filters button:hover { border-color: #2d6a4f; color: #2d6a4f; }
    .sidebar-filters button.active { background: #e8f5e9; color: #2d6a4f; border-color: #2d6a4f; font-weight: 600; }
    .sidebar-card {
      background: #f5f2ed; border: 1px solid #d8d0c5; border-radius: 6px;
      padding: .8rem 1rem;
      cursor: grab; user-select: none;
      transition: box-shadow .1s, opacity .1s;
      display: flex; align-items: flex-start; flex-wrap: wrap;
      gap: .3rem .6rem;
      min-width: 0; overflow: hidden;
      min-height: 3.6rem;
    }
    .sidebar-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
    .sidebar-card.dragging { opacity: .4; }
    .sidebar-card-add-hint {
      flex-shrink: 0;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--accent, #2d6a4f);
      color: #fff;
      display: none; align-items: center; justify-content: center;
      font-size: .65rem; font-weight: 700; line-height: 1;
      opacity: .3;
      pointer-events: none;
    }
    .sidebar-card-title {
      font-size: .8rem; font-weight: 600;
      min-width: 0; flex: 1;
      white-space: normal; overflow: hidden; text-overflow: ellipsis;
      word-break: break-word;
      line-height: 1.3;
    }
    .sidebar-card-meta {
      font-size: .65rem; color: #999; white-space: nowrap; flex-shrink: 0;
    }
    .sidebar-card-kcal {
      font-size: .68rem; color: #e07030; font-weight: 600; white-space: nowrap; flex-shrink: 0;
    }
    .sidebar-card-tag {
      font-size: .6rem; background: #e8f5e9; color: #2d6a4f;
      border-radius: 8px; padding: .05rem .35rem; white-space: nowrap; flex-shrink: 0;
    }

    /* ── Steps list ── */
    .steps-list { list-style: none; counter-reset: steps; }
    .steps-list li {
      counter-increment: steps;
      position: relative;
      padding: 0.7rem 0 0.7rem 3rem;
      border-bottom: 1px solid #f2ede5;
      font-size: 0.93rem;
    }
    .steps-list li::before {
      content: counter(steps);
      position: absolute;
      left: 0;
      top: 0.65rem;
      width: 2rem;
      height: 2rem;
      background: #2d6a4f;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      font-weight: 700;
    }

    /* DARK_THEME_START */
    html[data-theme="dark"] {
      color-scheme: dark;
      --bg: #0f1419;
      --surface: #18202a;
      --surface-2: #1f2833;
      --surface-3: #26313d;
      --surface-hover: #2b3846;
      --text: #e6edf3;
      --text-strong: #f7fbff;
      --text-muted: #b4bec9;
      --text-soft: #8c98a5;
      --border: #2e3947;
      --border-strong: #425163;
      --accent: #7dd3a7;
      --accent-strong: #a2ebc4;
      --accent-soft: #17362c;
      --accent-soft-2: #1c4336;
      --accent-border: #2f6b56;
      --warning: #f2c879;
      --warning-soft: #3b2d18;
      --warning-border: #8a672d;
      --danger: #f07f86;
      --danger-soft: #3d2127;
      --danger-border: #92505a;
      --info: #8cc7ff;
      --info-soft: #193246;
      --info-border: #3b6489;
      --shadow: rgba(0, 0, 0, .35);
    }


    html[data-theme="dark"] body {
      background: radial-gradient(circle at top, #16202a 0%, var(--bg) 55%);
      color: var(--text);
    }

    html[data-theme="dark"] a { color: var(--accent); }
    html[data-theme="dark"] a:hover { color: var(--accent-strong); }

    html[data-theme="dark"] .site-header {
      background: rgba(15, 20, 25, .92);
      border-bottom-color: var(--border);
      backdrop-filter: blur(8px);
    }

    .site-title,
    .page-heading,
    .recipe-title,
    .section-heading,
    .recipe-card__title,
    html[data-theme="dark"] .container-label-text {
      color: var(--text-strong);
    }

    .planner-chip-name,
    html[data-theme="dark"] .sidebar-card-title {
      color: var(--text-strong);
      text-decoration: none;
    }

    .planner-chip-name:hover,
    .sidebar-card-title:hover,
    .recipe-card__title:hover,
    html[data-theme="dark"] .editable-title:hover {
      color: var(--accent-strong);
    }

    .recipe-card,
    .ingredients-overview-section,
    .add-panel,
    .macro-section,
    .ingredient-dropdown,
    .nutrition-search-dropdown,
    .sidebar-card,
    .form-input,
    .sidebar-search,
    .ingredient-chip,
    .planner-chip,
    html[data-theme="dark"] .container-body {
      background: var(--surface);
      color: var(--text);
      border-color: var(--border);
    }

    html[data-theme="dark"] .oven-banner {
      background: var(--warning-soft);
      border-color: var(--warning-border);
      color: var(--warning);
    }

    .section-heading,
    .recipe-card,
    .ingredients-overview-section,
    .macro-section,
    .planner-table,
    .sidebar-card,
    .steps-list li,
    .builder-item,
    .ingredients-list li,
    .ing-ov-item,
    .container-footer,
    .container-params,
    .ingredient-dropdown li,
    .nutrition-search-dropdown li,
    .planner-table td,
    html[data-theme="dark"] .planner-table th {
      border-color: var(--border);
    }

    .recipe-card__meta,
    .ing-note,
    .component-label,
    .empty-state,
    .empty-hint,
    .container-drop-hint,
    .unassigned-hint,
    .form-label,
    .planner-week-label,
    .macro-grid .macro-label,
    .macro-grid .macro-row-label,
    .ingredients-overview-heading,
    .add-panel h3,
    .sidebar-card-meta,
    .planner-table th,
    .planner-table td.meal-label,
    html[data-theme="dark"] .nutrition-search-dropdown .nsd-meta {
      color: var(--text-muted);
    }

    .tag,
    .sidebar-card-tag,
    .ing-ov-kcal,
    html[data-theme="dark"] .container-incoming-badge {
      background: var(--accent-soft);
      color: var(--accent-strong);
      border: 1px solid var(--accent-border);
    }

    .tag-draft,
    html[data-theme="dark"] .ing-ov-nodata {
      background: var(--warning-soft);
      color: var(--warning);
    }

    .item-action,
    .ing-qty,
    .chip-qty,
    .back-link,
    .btn-outline,
    .site-title,
    html[data-theme="dark"] .macro-portions-display {
      color: var(--accent);
    }

    html[data-theme="dark"] .macro-portions-display { border-bottom-color: var(--accent-border); }

    html[data-theme="dark"] .btn-primary {
      background: linear-gradient(135deg, #6dd3a4, #4ea87d);
      color: #08110d;
    }

    html[data-theme="dark"] .btn-outline {
      border-color: var(--accent);
      background: transparent;
    }

    .btn-outline:hover,
    .btn-icon:hover,
    .macro-refresh-btn:hover,
    .planner-week-nav button:hover,
    .sidebar-sort button:hover,
    .sidebar-filters button:hover,
    html[data-theme="dark"] .nutrition-search-btn:hover {
      background: var(--surface-hover);
      color: var(--accent-strong);
      border-color: var(--accent-border);
    }

    html[data-theme="dark"] .btn-danger {
      background: linear-gradient(135deg, #ef6f78, #d95564);
      color: #fff;
    }

    .btn-icon,
    .btn-container-remove,
    .step-grip,
    .planner-chip-remove,
    html[data-theme="dark"] .container-grip {
      color: var(--text-soft);
    }
    .planner-chip-cart { color: var(--text-soft); }
    html[data-theme="dark"] .planner-chip.in-cart { border-left-color: var(--accent); }
    html[data-theme="dark"] .planner-chip.in-cart .planner-chip-cart { color: var(--accent); }
    html[data-theme="dark"] .planner-chip:not(.in-cart) { border-left-color: var(--border-strong); }

    .btn-remove:hover,
    .planner-chip-remove:hover,
    html[data-theme="dark"] .btn-container-remove:hover {
      background: var(--danger-soft);
      color: var(--danger);
    }

    .form-input,
    .sidebar-search,
    .container-action-select,
    .container-dest-select,
    .container-params input,
    .portions-input,
    .macro-refresh-btn,
    .planner-week-nav button,
    .sidebar-sort button,
    .sidebar-filters button,
    html[data-theme="dark"] .nutrition-search-btn {
      background: var(--surface-2);
      color: var(--text);
      border-color: var(--border-strong);
    }

    .form-input::placeholder,
    html[data-theme="dark"] .sidebar-search::placeholder {
      color: var(--text-soft);
    }

    .form-input:focus,
    .sidebar-search:focus,
    .container-action-select:focus,
    .container-dest-select:focus,
    .container-params input:focus,
    html[data-theme="dark"] .portions-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(125, 211, 167, .18);
    }

    .ingredient-dropdown li:hover,
    html[data-theme="dark"] .nutrition-search-dropdown li:hover {
      background: var(--surface-hover);
    }

    html[data-theme="dark"] .ingredient-dropdown li.create-new {
      color: var(--accent);
      border-top-color: var(--border);
    }

    html[data-theme="dark"] .planner-table {
      background: var(--surface);
      border-color: var(--border);
    }

    html[data-theme="dark"] .planner-table th {
      background: var(--surface-2);
      color: var(--text-muted);
      border-bottom-color: var(--border-strong);
      border-right-color: var(--border);
    }

    .planner-table th:first-child,
    .planner-table td.meal-label,
    html[data-theme="dark"] .planner-summary-row td {
      background: var(--surface-3);
    }

    html[data-theme="dark"] .planner-summary-row td {
      color: var(--text-muted);
    }

    html[data-theme="dark"] .planner-summary-row.kcal-row td {
      color: #ffb86b;
      border-top-color: var(--border-strong);
    }

    html[data-theme="dark"] .planner-summary-row.protein-row td { color: var(--accent); }
    html[data-theme="dark"] .planner-summary-row.fat-row td     { color: var(--warning); }
    html[data-theme="dark"] .planner-summary-row.carbs-row td   { color: var(--info); }

    .container-footer,
    html[data-theme="dark"] .container-params {
      background: rgba(255, 255, 255, .03);
      border-top-color: rgba(255, 255, 255, .08);
    }

    .container-body.drop-target,
    .planner-cell.drop-over,
    html[data-theme="dark"] .unassigned-zone.drop-target {
      background: var(--accent-soft-2);
      outline-color: var(--accent);
    }

    html[data-theme="dark"] .unassigned-zone {
      border-color: var(--border-strong);
      background: rgba(255, 255, 255, .02);
    }

    html[data-theme="dark"] .container-add-bar {
      background: rgba(255,255,255,.03);
      border-top-color: var(--border);
      color: var(--text-soft);
    }
    html[data-theme="dark"] .container-add-bar:hover { background: var(--surface-hover); color: var(--accent); }
    html[data-theme="dark"] .container-add-form {
      background: rgba(255,255,255,.03);
      border-top-color: var(--border);
    }
    html[data-theme="dark"] .ingredient-chip.selected {
      outline-color: var(--accent);
      background: var(--accent-soft);
    }
    html[data-theme="dark"] .multi-select-badge {
      background: var(--accent); color: #08110d;
    }
    html[data-theme="dark"] .copy-badge {
      background: #2a1f40; color: #c4b5fd;
      border-color: #5b4a8a;
    }

    html[data-theme="dark"] .recipe-container {
      border-color: var(--border);
    }

    html[data-theme="dark"] .recipe-container.type-container { border-color: var(--warning-border); }
    html[data-theme="dark"] .recipe-container.type-tool      { border-color: var(--info-border); }
    html[data-theme="dark"] .recipe-container.type-appliance { border-color: var(--danger-border); }

    html[data-theme="dark"] .type-container .container-header { background: var(--warning-soft); }
    html[data-theme="dark"] .type-tool .container-header      { background: var(--info-soft); }
    html[data-theme="dark"] .type-appliance .container-header { background: var(--danger-soft); }

    html[data-theme="dark"] .macro-kcal    { color: #ffb86b; }
    html[data-theme="dark"] .macro-protein { color: var(--accent); }
    html[data-theme="dark"] .macro-fat     { color: var(--warning); }
    html[data-theme="dark"] .macro-carbs   { color: var(--info); }
    html[data-theme="dark"] .macro-partial { color: var(--warning); }

    html[data-theme="dark"] .planner-tooltip {
      background: #0b1117;
      color: var(--text);
      border: 1px solid var(--border-strong);
      box-shadow: 0 10px 24px var(--shadow);
    }

    html[data-theme="dark"] .planner-tooltip::before { border-bottom-color: #0b1117; }

    html[data-theme="dark"] .recipe-picker {
      background: var(--surface);
      border-color: var(--border);
    }
    html[data-theme="dark"] .recipe-picker.expanded { background: var(--bg); }
    html[data-theme="dark"] .recipe-picker-heading { color: var(--text-muted); }
    html[data-theme="dark"] .picker-expand-btn {
      background: var(--surface-2);
      color: var(--text);
      border-color: var(--border-strong);
    }
    html[data-theme="dark"] .picker-expand-btn:hover { background: var(--surface-hover); color: var(--accent); border-color: var(--accent-border); }

    html[data-theme="dark"] .sidebar-sort button.active {
      background: var(--accent);
      color: #08110d;
      border-color: var(--accent);
    }

    html[data-theme="dark"] .sidebar-filters button.active {
      background: var(--accent-soft);
      color: var(--accent-strong);
      border-color: var(--accent-border);
    }

    .recipe-card:hover,
    .sidebar-card:hover,
    .planner-chip:hover,
    html[data-theme="dark"] .ingredient-chip:hover {
      box-shadow: 0 8px 24px var(--shadow);
    }

    html[data-theme="dark"] .nutrition-search-dropdown .nsd-name { color: var(--text-strong); }
    html[data-theme="dark"] .form-error, .required { color: var(--danger); }

    .form-input option,
    .container-action-select option,
    html[data-theme="dark"] .container-dest-select option {
      background: var(--surface);
      color: var(--text);
    }
    /* DARK_THEME_END */

    /* ── Foldable macro summary rows ── */
    .planner-summary-toggle {
      background: none; border: 1px solid var(--border,#e5ddd0); border-radius: 4px;
      padding: .05rem .35rem; font-size: .55rem; cursor: pointer;
      color: var(--text-muted,#888); white-space: nowrap;
    }
    .planner-summary-toggle:hover { background: var(--surface-2,#f7f4f0); }
    .planner-summary-row.macro-collapsed { display: none; }

    /* ── Tap-to-place (touch devices) ── */
    .sidebar-card.tap-selected {
      outline: 3px solid var(--accent,#2d6a4f);
      background: var(--accent-soft,#e8f5e9) !important;
      box-shadow: 0 0 0 1px var(--accent-border,#a5d6a7);
    }
    .planner-cell.tap-target {
      background: var(--accent-soft,#e8f5e9);
      outline: 2px dashed var(--accent-border,#a5d6a7);
      outline-offset: -2px;
      cursor: pointer;
    }

    /* ── Embed mode (iframe in browser) ── */
    body.embed-mode { margin: 0; }
    body.embed-mode .container { padding: .5rem .6rem; max-width: none; }

    /* ── Mobile improvements ── */
    /* ── Tablet (iPad) touch improvements — only for large touch screens ── */
    @media (pointer: coarse) and (min-width: 769px) {
      body:has(.planner-page) {
        height: 100dvh;
        height: -webkit-fill-available;
        padding-top: env(safe-area-inset-top, 0);
      }
      .site-header { flex-shrink: 0; }
      .planner-page {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .sidebar-card {
        padding: .6rem .7rem .6rem 1.5rem;
        min-height: 52px;
        align-items: center;
        position: relative;
        overflow: hidden;
      }
      .sidebar-card-add-hint {
        display: flex;
        opacity: .45;
        position: absolute;
        left: .3rem;
        top: 50%;
        transform: translateY(-50%);
        width: 14px; height: 14px;
        font-size: .5rem;
      }
      .planner-chip-remove {
        font-size: 1.2rem;
        padding: .15rem .3rem;
        min-width: 32px;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .recipe-picker-list {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: .5rem;
      }
    }

    @media (max-width: 768px) {
      .container { padding: .5rem .25rem; }
      body:has(.planner-page) {
        height: 100dvh; height: -webkit-fill-available;
        overflow: hidden;
      }
      body:has(.planner-page) main > .container {
        padding: .15rem .1rem;
        overflow: hidden;
      }
      .site-header { padding: .3rem 0; }
      .site-header .inner { padding: 0 .3rem; gap: .2rem; }
      .planner-table-wrap {
        overflow: auto; -webkit-overflow-scrolling: touch;
        flex: 0 0 auto;
        height: 47vh;
      }
      .planner-table {
        height: 100%; font-size: .5rem; table-layout: auto;
      }
      .planner-table th { padding: .1rem .02rem; font-size: .45rem; }
      .planner-table th:first-child { width: 22px; }
      .planner-table td {
        padding: 1px; height: auto;
        vertical-align: top; position: relative;
      }
      .planner-table td.meal-label {
        font-size: .38rem; width: 22px; padding: .02rem;
        letter-spacing: 0; text-align: center;
        vertical-align: middle;
      }
      .planner-chip {
        display: flex; align-items: center;
        font-size: .48rem; padding: .1rem .12rem;
        margin-bottom: 1px; border-radius: 2px;
        overflow: hidden; gap: .1rem;
      }
      .planner-chip-name {
        font-size: .48rem; line-height: 1.2;
        writing-mode: horizontal-tb;
        white-space: normal; word-break: break-word;
        flex: 1; min-width: 0;
        max-height: none;
      }
      .planner-chip-cart { font-size: .5rem; padding: 0 .05rem; flex-shrink: 0; }
      .planner-chip-remove { font-size: .55rem; padding: 0 .05rem; flex-shrink: 0; }
      .planner-summary-row td { font-size: .4rem; padding: .02rem; }
      .recipe-picker {
        min-height: 0; padding: .15rem .25rem .1rem;
        flex: 1 1 auto; overflow: hidden;
        margin: 0;
        display: flex; flex-direction: column;
      }
      .recipe-picker .recipe-picker-list {
        flex: 1; overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .recipe-picker-controls {
        gap: .15rem; margin-bottom: .1rem;
        flex-wrap: wrap; flex-shrink: 0;
      }
      .recipe-picker-heading { display: none; }
      .recipe-picker-controls .sidebar-search {
        min-width: 0; max-width: none; font-size: .65rem;
        padding: .15rem .3rem; flex: 1;
      }
      .recipe-picker-list {
        grid-template-columns: repeat(2, 1fr);
        gap: .12rem;
      }
      .picker-expand-btn { display: none; }
      .sidebar-sort { display: none; }
      .sidebar-card {
        padding: .2rem .3rem; gap: .05rem .15rem;
        flex-wrap: nowrap; align-items: center;
        min-height: 1.5em; line-height: 1.5;
      }
      .sidebar-card-title {
        font-size: .65rem; line-height: 1.5;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      }
      .sidebar-card-tag { display: none; }
      .sidebar-card-kcal { display: none; }
      .sidebar-card-add-hint {
        display: flex;
        width: 12px; height: 12px; font-size: .45rem;
        opacity: .5; position: static; transform: none;
      }
      .sidebar-filters {
        display: flex; gap: .15rem; margin-bottom: 0;
        overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
      }
      .sidebar-filters button {
        font-size: .55rem; padding: .05rem .3rem;
        white-space: nowrap; flex-shrink: 0;
      }
      .planner-week-label { font-size: .68rem; min-width: 80px; }
      /* Show short title on mobile */
      .site-title-full { display: none; }
      .site-title-short { display: inline; }
      .site-title { font-size: .95rem; flex-shrink: 0; }
      /* Header must not overflow on narrow phones */
      .site-header .inner { overflow: hidden; flex-wrap: nowrap; }
      /* Hide button labels, people count and Dziś on mobile */
      .btn-label { display: none; }
      .planner-only-btn { margin-right: .15rem !important; padding: .15rem .3rem !important; font-size: .75rem !important; }
      .people-count-wrap { display: none !important; }
      #week-today { display: none; }
      .planner-week-nav { min-width: 0; }
      /* Hamburger: ensure visible & tappable on iPhones */
      .site-mobile-menu-btn {
        font-size: 1.2rem; padding: .15rem .4rem;
        min-width: 36px; min-height: 36px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; -webkit-appearance: none;
      }
      .planner-week-nav button { padding: .15rem .4rem; font-size: .8rem; }
      .browser-layout { height: auto; min-height: auto; }
      .browser-sidebar { max-height: 40vh; }
      .browser-content { -webkit-overflow-scrolling: touch; }
      .browser-sidebar-list { -webkit-overflow-scrolling: touch; }
    }
    /* Landscape phone: same compact layout as portrait */
    @media (max-height: 500px) {
      .planner-table-wrap { height: 47vh; }
    }


/* ── Login page ─────────────────────────────────────────── */
.login-page { max-width: 340px; margin: 12vh auto 0; }
.login-title { text-align: center; margin-bottom: 1.5rem; }
.login-form { display: flex; flex-direction: column; gap: .5rem; }
.login-form input[type="text"],
.login-form input[type="password"] {
  padding: .6rem .7rem; font-size: 1rem; border-radius: 8px;
  border: 1px solid var(--border, #d0c8be); background: var(--surface, #fff); color: inherit;
}
.login-form button { margin-top: .75rem; padding: .65rem; font-size: 1rem; justify-content: center; text-align: center; }
.login-error {
  padding: .6rem .75rem; border-radius: 8px; font-size: .9rem;
  background: rgba(200, 50, 50, .12); color: #e5534b; border: 1px solid rgba(200, 50, 50, .35);
}

    /* ── Generate meal plan dialog (planner) ── */
    .gen-overlay {
      position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.35);
      display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px;
      overflow-y: auto;
    }
    .gen-dialog {
      background: var(--surface, #fbf9f6); color: var(--text, #222);
      border: 1px solid var(--border, #d0c8be); border-radius: 10px;
      box-shadow: 0 8px 32px var(--shadow, rgba(0,0,0,.25));
      width: 100%; max-width: 560px; padding: 1rem 1.1rem; font-size: .85rem;
    }
    .gen-dialog h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
    .gen-dialog fieldset { border: none; padding: 0; margin: 0 0 .7rem; }
    .gen-dialog legend { font-weight: 600; font-size: .78rem; color: var(--text-muted, #555); margin-bottom: .25rem; }
    .gen-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
    .gen-chips label {
      display: inline-flex; align-items: center; gap: .25rem; cursor: pointer;
      border: 1px solid var(--border, #d0c8be); border-radius: 14px; padding: .15rem .55rem;
      background: var(--surface-2, #f5f2ed);
    }
    .gen-option { display: flex; align-items: center; gap: .4rem; margin: .25rem 0; }
    .gen-option input[type=number] {
      width: 80px; padding: .15rem .3rem; border: 1px solid var(--border, #d0c8be);
      border-radius: 4px; background: var(--surface-2, #f5f2ed); color: inherit;
    }
    .gen-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; margin-top: .8rem; }
    .gen-warning {
      background: var(--warning-soft, #fff4dc); border: 1px solid var(--warning-border, #e3c27a);
      border-radius: 6px; padding: .3rem .5rem; margin-bottom: .5rem; font-size: .78rem;
    }
    .gen-preview { max-height: 55vh; overflow-y: auto; }
    .gen-day { margin-bottom: .5rem; }
    .gen-day-title { font-weight: 700; font-size: .78rem; margin-bottom: .15rem; }
    .gen-day-title .gen-kcal { font-weight: 400; color: var(--text-muted, #666); }
    .gen-row {
      display: flex; align-items: baseline; gap: .4rem; padding: .2rem .3rem;
      border-radius: 5px; background: var(--surface-2, #f5f2ed); margin-bottom: .15rem;
    }
    .gen-row .gen-meal { flex: 0 0 72px; color: var(--text-muted, #666); font-size: .75rem; }
    .gen-row .gen-title { flex: 1; min-width: 0; }
    .gen-row .gen-meta { font-size: .7rem; color: var(--text-muted, #666); white-space: nowrap; }
    .gen-row .gen-reason { display: block; font-size: .7rem; color: var(--text-soft, #888); }
    .gen-row button { background: none; border: none; cursor: pointer; color: var(--text-muted, #888); padding: 0 .2rem; }
    .gen-undo-bar {
      position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 1500;
      background: var(--accent, #2d6a4f); color: #fff; padding: .45rem .6rem .45rem 1rem;
      border-radius: 20px; font-size: .82rem; box-shadow: 0 4px 16px rgba(0,0,0,.2);
      display: flex; align-items: center; gap: .6rem; max-width: calc(100vw - 32px);
    }
    .gen-undo-bar button {
      background: rgba(255,255,255,.2); border: none; color: inherit; cursor: pointer;
      padding: .15rem .6rem; border-radius: 12px; font-size: .78rem;
    }
    html[data-theme="dark"] .gen-undo-bar { color: #10261d; }