body {
        background: #f9fafd;
        font-family: "Segoe UI", Arial, sans-serif;
        margin: 0;
      }
      .container {
        max-width: 420px;
        margin: 32px auto 0 auto;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 4px 16px #36c1e420;
        padding: 18px 10px 22px 10px;
      }
      .logo {
        font-size: 1.23em;
        font-weight: bold;
        color: #1f7cb8;
        text-align: center;
        margin-bottom: 8px;
      }
      .desc {
        color: #22888a;
        text-align: center;
        margin-bottom: 15px;
        font-size: 1.05em;
      }
      .input-label {
        font-size: 1.07em;
        color: #246;
        margin-bottom: 6px;
        margin-top: 7px;
        display: block;
      }
      .ingredient-input-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        background: #f2f8fe;
        border-radius: 8px;
        border: 1.5px solid #bae1f6;
        padding: 7px 6px;
        min-height: 38px;
        position: relative;
      }
      .ingredient-chip {
        background: #e2eafd;
        color: #1761a8;
        border-radius: 11px;
        padding: 5px 12px;
        font-size: 1em;
        margin: 3px 3px 0 0;
        display: flex;
        align-items: center;
      }
      .chip-remove {
        margin-left: 6px;
        cursor: pointer;
        color: #f54a4a;
        font-weight: bold;
      }
      .ingredient-input {
        border: none;
        outline: none;
        background: transparent;
        font-size: 1em;
        min-width: 85px;
        flex: 1;
      }
      .autocomplete-box {
        position: absolute;
        left: 0;
        right: 0;
        top: 44px;
        background: #fff;
        z-index: 100;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 4px 12px #1f7cb820;
        border: 1px solid #bae1f6;
        font-size: 1em;
        max-height: 150px;
        overflow-y: auto;
        display: none;
      }
      .autocomplete-item {
        padding: 9px 15px;
        cursor: pointer;
        color: #2c5b7d;
      }
      .autocomplete-item.active,
      .autocomplete-item:hover {
        background: #e5f5ff;
        color: #1761a8;
      }
      .search-btn {
        background: #1f7cb8;
        color: #fff;
        font-size: 1.18em;
        border: none;
        border-radius: 10px;
        padding: 10px 0;
        width: 100%;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0 2px 8px #9edbfc33;
        margin: 10px 0 14px 0;
      }
      .recipes-list {
        margin-top: 9px;
      }
      .recipe-card {
        background: #f1fcff;
        border-radius: 10px;
        margin-bottom: 15px;
        padding: 13px 10px;
        box-shadow: 0 2px 7px #22888a12;
      }
      .recipe-title {
        font-weight: bold;
        color: #1f7cb8;
        font-size: 1.13em;
      }
      .match-info {
        font-size: 1em;
        color: #1ea07a;
        margin-top: 4px;
      }
      .all-ings {
        color: #757;
        font-size: 0.96em;
        margin-top: 3px;
      }
      .yt-link-btn {
        background: #eb4437;
        color: #fff;
        border: none;
        border-radius: 9px;
        font-size: 1em;
        padding: 7px 16px;
        font-weight: bold;
        margin-top: 9px;
        cursor: pointer;
        box-shadow: 0 1px 7px #eb443726;
      }
      .footer {
        color: #789;
        text-align: center;
        font-size: 0.95em;
        margin-top: 19px;
      }
      #backBtn {
        position: fixed;
        left: 50%;
        bottom: 22px;
        transform: translateX(-50%);
        background: #1761a8;
        color: #fff;
        font-weight: 700;
        border: none;
        border-radius: 2rem;
        padding: 0.52em 1.28em;
        font-size: 1em;
        text-decoration: none;
        cursor: pointer;
        letter-spacing: 0.01em;
        transition:
          background 0.15s,
          transform 0.12s;
        z-index: 2000;
      }
      #backBtn:hover {
        background: #0e8078;
        transform: translateX(-50%) scale(1.04);
      }
      @media (max-width: 600px) {
        .container {
          max-width: 99vw;
          padding: 7px 2vw 10px 2vw;
        }
        .logo {
          font-size: 1em;
        }
        #backBtn {
          bottom: 11px;
          font-size: 0.93em;
          padding: 0.41em 0.85em;
        }
      }