/* Homepage and ingredient recipe results */
.content {
  width: calc(100% - var(--nk-sidebar));
  height: 100dvh;
  margin-left: var(--nk-sidebar);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.hero {
  min-height: 100dvh;
  padding: 10px 12px;
}

.hero-bg {
  display: grid;
  height: calc(100dvh - 20px);
  grid-template-columns: minmax(0, 2.35fr) minmax(280px, 0.95fr);
  gap: 12px;
}

.hero-main-card,
.hero-side-images img {
  border-radius: 30px;
  box-shadow: var(--nk-shadow-soft);
}

.hero-main-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #1b271f;
}

.hero-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-dark {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9,20,13,0.86) 0%, rgba(9,20,13,0.52) 37%, transparent 67%),
    linear-gradient(0deg, rgba(9,20,13,0.38), transparent 46%);
  pointer-events: none;
}

.world-search-launcher {
  position: absolute;
  z-index: 8;
  top: 18px;
  right: 18px;
  left: 18px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 12px;
}

.world-search-open,
.world-flag-row {
  min-height: 44px;
  height: 44px;
  border: 1px solid rgba(215,170,82,0.52);
  border-radius: 999px;
  background: rgba(25,45,32,0.94);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  color: #fff;
  backdrop-filter: blur(10px);
}

.world-search-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.world-search-open-icon { color: var(--nk-gold); }
.world-flag-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  align-items: center;
  padding: 6px 12px;
}
.world-flag-row button,
.mobile-world-flags button {
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.world-flag-row img,
.mobile-world-flags img {
  width: 29px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 3px 7px rgba(0,0,0,0.2);
}

.hero-content {
  position: absolute;
  z-index: 5;
  right: 42%;
  bottom: 126px;
  left: 48px;
  color: #fff;
}

.hero-badge-text {
  display: inline-flex;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  background: linear-gradient(90deg, #e58444, #d44e58);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.hero-kicker {
  max-width: 560px;
  margin: 14px 0 8px;
  color: rgba(255,255,255,0.84);
  font-size: clamp(0.75rem, 0.95vw, 0.94rem);
  font-weight: 600;
  line-height: 1.55;
}

.hero-title-text {
  max-width: 740px;
  margin: 0;
  color: #fff;
  font-family: var(--nk-font-display);
  font-size: clamp(2.7rem, 4.25vw, 5.1rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.96;
  text-wrap: balance;
  text-shadow: 0 3px 18px rgba(0,0,0,0.34);
}

.hero-desc-text {
  max-width: 580px;
  margin: 15px 0 0;
  color: rgba(255,255,255,0.88);
  font-size: clamp(0.88rem, 1.1vw, 1.08rem);
  font-weight: 700;
  line-height: 1.5;
}

.hero-floating-strip {
  position: absolute;
  z-index: 7;
  right: 20px;
  bottom: 18px;
  left: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.hero-strip-item {
  display: grid;
  min-height: 82px;
  align-content: center;
  gap: 5px;
  padding: 14px 18px;
  border: 1px solid var(--nk-button-border);
  border-radius: 20px;
  background: rgba(41,74,54,0.96);
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
  color: var(--nk-button-text);
  backdrop-filter: blur(10px);
  transition: transform 160ms ease, background 160ms ease;
}
.hero-strip-item:hover,
.hero-strip-item:active { transform: translateY(-2px); background: rgba(32,61,44,0.98); color: var(--nk-button-text); }
.hero-strip-label { color: var(--nk-button-accent); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.hero-strip-item strong { color: var(--nk-button-text); font-size: 0.82rem; line-height: 1.35; }

.hero-side-images {
  display: grid;
  min-width: 0;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}
.hero-side-images img { width: 100%; height: 100%; object-fit: cover; }

.mobile-world-search-bar { display: none; }

/* Recipe results page */
.recipe-page-header,
.grid,
.recipe-result-actions { display: none; }

body.show-recipes-page .content {
  min-height: 100dvh;
  height: auto;
  padding: 26px 28px 34px;
  overflow: visible;
  background:
    radial-gradient(circle at 12% 0, rgba(215,170,82,0.13), transparent 26%),
    linear-gradient(145deg, #f7f0e6, #eee5d9);
}

body.show-recipes-page .hero { display: none; }
body.show-recipes-page .recipe-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.recipe-page-heading span {
  color: var(--nk-gold-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.recipe-page-heading h2 {
  margin: 4px 0 0;
  color: var(--nk-green-deep);
  font-family: var(--nk-font-display);
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  line-height: 1;
}
.recipe-page-summary {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(215,170,82,0.4);
  border-radius: 999px;
  background: rgba(255,250,243,0.82);
  color: var(--nk-ink-soft);
  font-size: 0.8rem;
  font-weight: 800;
}
.recipe-summary-mark { color: var(--nk-gold-deep); }

body.show-recipes-page .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
}

.recipe-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
  border: 1px solid rgba(140,101,58,0.2);
  border-radius: 26px;
  background: var(--nk-paper);
  box-shadow: var(--nk-shadow-soft);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.recipe-card:hover { transform: translateY(-5px); box-shadow: var(--nk-shadow); }
.recipe-card-title {
  display: grid;
  min-height: 66px;
  place-items: center;
  margin: 0;
  padding: 13px 50px;
  color: var(--nk-green-deep);
  font-family: var(--nk-font-display);
  font-size: clamp(1.05rem, 1.2vw, 1.32rem);
  line-height: 1.15;
  text-align: center;
}
.recipe-card-image-wrap {
  position: relative;
  aspect-ratio: 16 / 8.2;
  overflow: hidden;
  margin: 0 12px;
  border-radius: 19px;
  background: var(--nk-cream);
}
.recipe-card-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.recipe-card:hover .recipe-card-image-wrap img { transform: scale(1.035); }
.favorite-btn {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 13px;
  background: rgba(255,250,243,0.92);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  cursor: pointer;
}
.recipe-card-body { display: grid; align-content: start; gap: 11px; padding: 14px 16px 18px; }
.recipe-card-country-wrap,
.recipe-card-cuisine { display: flex; justify-content: center; color: var(--nk-gold-deep); font-size: 0.72rem; font-weight: 800; }
.recipe-card-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.recipe-meta-pill,
.recipe-detail-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid rgba(88,66,43,0.12);
  border-radius: 999px;
  background: #fff;
  color: #4d564f;
  font-size: 0.65rem;
  font-weight: 800;
}
.recipe-card-ingredients-panel { padding-top: 10px; border-top: 1px solid var(--nk-line); }
.recipe-card-ingredients-title { margin-bottom: 8px; color: var(--nk-green-deep); font-size: 0.76rem; font-weight: 800; }
.recipe-ingredients-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 12px; margin: 0; padding: 0; list-style: none; }
.recipe-ingredient-row { display: flex; min-width: 0; gap: 7px; color: #59615c; font-size: 0.66rem; line-height: 1.35; }
.recipe-ingredient-bullet { color: var(--nk-gold-deep); }

body.show-recipes-page .recipe-result-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px 0 0;
}
.recipe-back-btn,
.recipe-next-btn,
.recipe-home-btn,
.show-more-recipes-btn { min-width: 146px; padding: 9px 20px; }

.recipe-home-btn {
  border: 1px solid #d4a84f;
  border-radius: 999px;
  background: #294a36;
  color: #f4cf80;
  font-weight: 800;
  cursor: pointer;
}

/* 9:16 recipe detail: only the instruction section scrolls. */
.modal { display: none; }
.modal[style*="display: flex"] { display: flex; }
.modal-content.recipe-portrait-modal {
  position: relative;
  width: min(520px, calc(90dvh * 0.5625), 94vw);
  height: min(90dvh, 920px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid rgba(215,170,82,0.64);
  border-radius: 30px;
  background: var(--nk-paper);
  box-shadow: 0 30px 90px rgba(0,0,0,0.42);
}
.modal-content.recipe-portrait-modal > .close {
  position: absolute;
  z-index: 30;
  top: 14px;
  right: 14px;
  float: none;
}
.modal-content.recipe-portrait-modal #modalBody { height: 100%; }
.recipe-detail-shell { height: 100%; }
.recipe-detail-portrait {
  display: grid;
  grid-template-rows: minmax(0, 68%) minmax(0, 32%);
  padding: 14px;
  background:
    linear-gradient(rgba(255,250,243,0.94), rgba(255,250,243,0.98)),
    radial-gradient(circle at 100% 0, rgba(215,170,82,0.18), transparent 32%);
}
.recipe-detail-fixed {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(120px, 1fr) auto minmax(92px, auto);
  gap: 8px;
  overflow: hidden;
}
.recipe-detail-heading { padding: 0 52px 0 4px; text-align: center; }
.recipe-detail-heading h1 {
  margin: 0;
  color: var(--nk-green-deep);
  font-family: var(--nk-font-display);
  font-size: clamp(1.45rem, 4vh, 2.25rem);
  line-height: 1.02;
}
.recipe-detail-subtitle { margin: 3px 0 0; color: var(--nk-gold-deep); font-size: 0.68rem; font-weight: 800; }
.recipe-detail-country { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; padding: 4px 10px; border-radius: 999px; background: var(--nk-green); color: #fff; font-size: 0.65rem; font-weight: 800; }
.recipe-detail-country-flag { width: 20px; height: 14px; border-radius: 3px; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.recipe-detail-hero { min-height: 0; overflow: hidden; border-radius: 18px; }
.recipe-detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.recipe-detail-meta { display: flex; justify-content: center; gap: 8px; }
.recipe-detail-ingredients-panel { min-height: 0; overflow: hidden; padding: 9px 11px; border: 1px solid var(--nk-line); border-radius: 15px; background: rgba(255,255,255,0.72); }
.recipe-detail-ingredients-panel h2,
.recipe-detail-content h2 { margin: 0 0 6px; color: var(--nk-green-deep); font-family: var(--nk-font-display); font-size: 0.9rem; }
.recipe-detail-ingredients { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px 10px; margin: 0; padding: 0; list-style: none; }
.recipe-detail-ingredient { display: flex; min-width: 0; gap: 5px; color: #4e5751; font-size: 0.58rem; line-height: 1.24; }
.recipe-detail-bullet { flex: 0 0 auto; font-size: 0.55rem; }
.recipe-detail-content {
  min-height: 0;
  overflow-y: auto;
  margin-top: 9px;
  padding: 11px;
  border: 1px solid rgba(215,170,82,0.38);
  border-radius: 16px;
  background: #fff;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--nk-gold-deep) transparent;
}
.recipe-detail-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.recipe-detail-step { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 8px; color: #424b45; font-size: 0.68rem; line-height: 1.45; }
.recipe-step-number { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--nk-copper); color: #fff; font-size: 0.63rem; font-weight: 800; }

@media (max-width: 1280px) and (min-width: 981px) {
  .hero-bg { grid-template-columns: minmax(0, 2.6fr) minmax(220px, 0.8fr); }
  .hero-content { right: 32%; left: 34px; }
  .hero-title-text { font-size: clamp(2.45rem, 3.8vw, 4.1rem); }
  .world-search-launcher { grid-template-columns: 180px minmax(0,1fr); }
  .world-flag-row { padding-inline: 7px; }
  .world-flag-row img { width: 24px; height: 17px; }
  .hero-strip-item { min-height: 72px; padding: 10px 13px; }
  body.show-recipes-page .grid { gap: 14px; }
}

@media (max-width: 980px) {
  .content { width: 100%; height: auto; margin-left: 0; overflow: visible; }
  .content .hero { display: none; }
  .mobile-world-search-bar {
    display: grid;
    flex: none;
    grid-template-columns: minmax(0,1fr);
    gap: 7px;
    padding: 9px 10px;
    border: 1px solid rgba(215,170,82,0.5);
    border-radius: 22px;
    background: var(--nk-green);
    box-shadow: var(--nk-shadow-soft);
  }
  .mobile-world-search-open {
    min-height: 36px;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
  }
  .mobile-world-flags { display: grid; grid-template-columns: repeat(10,1fr); align-items: center; }
  .mobile-world-flags img { width: 23px; height: 16px; }
  .sidebar-main > .mobile-hero-small { display: none; }
  .sidebar-main > .manual + .mobile-hero-small { display: block; }
  .mobile-hero-big,
  .mobile-hero-small { position: relative; overflow: hidden; border-radius: 26px; box-shadow: var(--nk-shadow-soft); }
  .mobile-hero-big { min-height: min(620px, 73dvh); }
  .mobile-hero-big > img,
  .mobile-hero-small > img { width: 100%; height: 100%; object-fit: cover; }
  .mobile-hero-big::after,
  .mobile-hero-small::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,27,17,0.74), transparent 62%); pointer-events: none; }
  .mobile-hero-text,
  .mobile-hero-small-text { position: absolute; z-index: 2; right: 24px; bottom: 28px; left: 24px; color: #fff; }
  .mobile-hero-text .hero-title-text { font-size: clamp(2.05rem, 10.5vw, 3.55rem); }
  .mobile-hero-text .hero-desc-text { font-size: 0.92rem; }
  .mobile-hero-small { aspect-ratio: 16 / 9; }
  .mobile-hero-small-text h3 { margin: 0; font-family: var(--nk-font-display); font-size: 1.6rem; }
  .mobile-feature-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .mobile-feature-strip > div {
    display: grid;
    min-width: 0;
    min-height: 82px;
    align-content: center;
    gap: 5px;
    padding: 10px 7px;
    border: 1px solid rgba(215,170,82,0.5);
    border-radius: 18px;
    background: linear-gradient(145deg,rgba(255,250,243,0.96),rgba(239,226,207,0.92));
    box-shadow: var(--nk-shadow-soft);
    color: var(--nk-ink);
    text-align: center;
  }
  .mobile-feature-strip strong {
    display: block;
    color: var(--nk-green-deep);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
  }
  .mobile-feature-strip span {
    display: block;
    color: var(--nk-ink-soft);
    font-size: 0.59rem;
    font-weight: 650;
    line-height: 1.3;
  }
  body.show-recipes-page .sidebar-unified { display: none; }
  body.show-recipes-page .content { padding: 20px 12px 30px; }
  body.show-recipes-page .recipe-page-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  body.show-recipes-page .grid { grid-template-columns: 1fr; gap: 16px; }
  .recipe-card-title { min-height: 58px; font-size: 1.25rem; }
  .recipe-card-image-wrap { aspect-ratio: 16 / 9; }
  .recipe-ingredients-list { grid-template-columns: 1fr 1fr; }
  .recipe-result-actions { position: sticky; z-index: 30; bottom: 8px; padding: 8px; border-radius: 999px; background: rgba(247,240,230,0.88); backdrop-filter: blur(10px); }
  .recipe-back-btn, .recipe-next-btn, .recipe-home-btn, .show-more-recipes-btn { min-width: 0; flex: 1; padding-inline: 12px; }
  .modal-content.recipe-portrait-modal { width: min(94vw, calc(90dvh * 0.5625)); height: min(90dvh, calc(94vw * 1.7778)); }
  .recipe-detail-portrait { padding: 10px; grid-template-rows: minmax(0,67%) minmax(0,33%); }
  .recipe-detail-heading h1 { font-size: clamp(1.3rem, 6vw, 1.8rem); }
}

@media (max-width: 430px) {
  .mobile-hero-big { min-height: 560px; }
  .recipe-card-body { padding-inline: 13px; }
  .recipe-ingredient-row { font-size: 0.62rem; }
  .recipe-detail-fixed { grid-template-rows: auto minmax(105px,1fr) auto minmax(86px,auto); }
  .recipe-detail-ingredient { font-size: 0.54rem; }
  .recipe-detail-step { font-size: 0.64rem; }
  .mobile-feature-strip { gap: 6px; }
  .mobile-feature-strip > div { min-height: 78px; padding-inline: 5px; }
  .mobile-feature-strip strong { font-size: 0.66rem; }
  .mobile-feature-strip span { font-size: 0.54rem; }
}

/* Mobile appetite refresh: keep the page useful, but make the first impression feel like food. */
@media (max-width: 980px) {
  body.nili-type-system {
    background:
      radial-gradient(circle at 10% -8%, rgba(241, 165, 79, 0.24), transparent 34%),
      radial-gradient(circle at 92% 8%, rgba(215, 170, 82, 0.18), transparent 30%),
      linear-gradient(180deg, #fff8ed 0%, #f3e6d4 48%, #eadcc8 100%);
  }

  .sidebar-unified {
    padding: 12px 14px 0;
    background: transparent;
  }

  .sidebar-shell,
  .sidebar-main {
    gap: 12px;
  }

  .nk-brand-card {
    position: fixed;
    z-index: 420;
    top: max(8px, env(safe-area-inset-top));
    right: 14px;
    left: 14px;
    width: auto;
    flex-basis: 112px;
    min-height: 112px;
    border: 1px solid rgba(215, 170, 82, 0.28);
    border-radius: 28px;
    background:
      radial-gradient(circle at 88% 28%, rgba(230, 126, 55, 0.15), transparent 34%),
      linear-gradient(135deg, rgba(255, 253, 247, 0.98), rgba(245, 226, 199, 0.95));
    box-shadow: 0 18px 44px rgba(67, 45, 23, 0.12);
  }

  .sidebar-shell {
    padding-top: calc(124px + env(safe-area-inset-top));
  }

  .mobile-nili-picks {
    display: block;
    width: 100%;
  }

  .mobile-nili-picks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 8px;
    border: 1px solid rgba(215, 170, 82, 0.22);
    border-radius: 26px;
    background:
      radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.74), transparent 32%),
      linear-gradient(145deg, rgba(255, 250, 240, 0.98), rgba(238, 226, 206, 0.9));
    box-shadow: 0 14px 28px rgba(70, 45, 23, 0.08);
  }

  .mobile-nili-pick {
    position: relative;
    display: block;
    min-height: 116px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px;
    background: #eef1df;
    box-shadow: 0 8px 16px rgba(72, 51, 28, 0.1);
    cursor: pointer;
  }

  .mobile-nili-pick > img {
    width: 100%;
    height: 100%;
    min-height: 116px;
    display: block;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.01) brightness(1.05);
  }

  .mobile-nili-pick::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(247, 236, 217, 0.38) 0%, rgba(247, 236, 217, 0.08) 42%, rgba(35, 58, 41, 0.38) 100%);
    pointer-events: none;
  }

  .mobile-nili-pick-name {
    position: absolute;
    z-index: 2;
    top: 7px;
    right: 7px;
    left: 7px;
    color: #fffdf4;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.08;
    text-align: center;
    text-shadow: 0 2px 8px rgba(22, 31, 21, 0.46);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mobile-nili-pick-flag {
    position: absolute;
    z-index: 2;
    right: 7px;
    bottom: 7px;
    display: grid;
    min-width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    background: rgba(255, 250, 240, 0.88);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    font-size: 0.9rem;
  }

  .mobile-nili-pick-flag img {
    display: block;
    width: 18px !important;
    height: 18px !important;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
  }

  .mobile-nili-picks-loading {
    grid-column: 1 / -1;
    padding: 18px 10px;
    color: #294a36;
    font-size: 0.78rem;
    font-weight: 900;
    text-align: center;
  }

  .nk-brand-inner {
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    min-height: 104px;
    padding: 10px 18px 10px 13px;
  }

  .nk-logo-shell {
    width: 78px;
    height: 78px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 14px 28px rgba(76, 52, 25, 0.13);
  }

  .nk-logo {
    width: 72px;
    height: 72px;
  }

  .nk-brand-text {
    min-width: 0;
    padding-top: 0;
    text-align: left;
  }

  .nk-title {
    font-size: clamp(2rem, 8.6vw, 2.7rem);
    line-height: 0.9;
    letter-spacing: -0.055em;
  }

  .nk-subtitle {
    margin-top: 7px;
    color: #5c564d;
    font-size: 0.76rem;
    letter-spacing: 0.01em;
  }

  .mobile-world-search-bar {
    gap: 8px;
    padding: 10px;
    border-color: rgba(215, 170, 82, 0.48);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(38, 68, 49, 0.98), rgba(25, 51, 36, 0.98));
    box-shadow: 0 16px 34px rgba(28, 42, 29, 0.18);
  }

  .mobile-world-search-open {
    min-height: 38px;
    color: #fff8e8;
    letter-spacing: -0.01em;
  }

  .mobile-world-flags {
    gap: 5px;
  }

  .mobile-world-flags button {
    min-height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
  }

  .mobile-hero-big {
    min-height: min(560px, 66dvh);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 31px;
    box-shadow: 0 22px 48px rgba(28, 42, 29, 0.2);
  }

  .mobile-hero-big > img {
    filter: saturate(1.07) contrast(1.02);
  }

  .mobile-hero-big::after {
    background:
      linear-gradient(0deg, rgba(11, 27, 17, 0.78) 0%, rgba(11, 27, 17, 0.34) 42%, rgba(11, 27, 17, 0.04) 72%),
      linear-gradient(90deg, rgba(11, 27, 17, 0.18), transparent 62%);
  }

  .mobile-hero-text {
    right: 22px;
    bottom: 25px;
    left: 22px;
  }

  .mobile-hero-text .hero-badge-text {
    padding: 7px 12px;
    background: linear-gradient(90deg, #f08a42, #d84f58);
    color: #fff;
    font-size: 0.68rem;
    box-shadow: 0 10px 22px rgba(112, 44, 26, 0.2);
  }

  .mobile-hero-text .hero-title-text {
    max-width: 92%;
    margin-top: 12px;
    color: #fff9ec;
    font-size: clamp(2.2rem, 10vw, 3.25rem);
    line-height: 0.95;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.44);
  }

  .mobile-hero-text .hero-desc-text {
    max-width: 94%;
    color: rgba(255, 249, 236, 0.94);
    font-size: 0.93rem;
    line-height: 1.45;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.42);
  }

  .upload-card {
    flex-basis: 92px;
    align-content: center;
    justify-items: center;
    padding: 13px 14px 14px;
    border: 1px solid rgba(191, 129, 66, 0.38);
    border-radius: 26px;
    background:
      radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.42), transparent 30%),
      linear-gradient(135deg, #fff4e3, #ead2b5);
    box-shadow: 0 15px 34px rgba(91, 57, 27, 0.12);
    color: #263728;
  }

  .upload-card-text {
    text-align: center;
  }

  .upload-card-text strong {
    color: #263728;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
  }

  .upload-card-text span {
    margin-top: 4px;
    color: #6b5c4e;
    font-size: 0.7rem;
  }

  .upload-card .gallery-mini-btn {
    min-height: 32px;
    margin-top: 9px;
    padding: 7px 15px;
    border: 1px solid rgba(215, 170, 82, 0.55);
    background: #264431;
    color: #fffaf0;
    box-shadow: 0 9px 18px rgba(35, 61, 43, 0.16);
  }

  .manual {
    flex-basis: 56px;
    grid-template-columns: minmax(0, 1fr) 56px;
    border-color: rgba(215, 170, 82, 0.28);
    border-radius: 23px;
    background: rgba(255, 253, 248, 0.95);
    box-shadow: 0 13px 30px rgba(60, 42, 24, 0.1);
  }

  .manual input {
    color: #27382b;
    font-size: 0.92rem;
    font-weight: 800;
  }

  .manual input::placeholder {
    color: #887b6e;
  }

  .manual > button {
    width: 56px;
    min-height: 56px;
    border-radius: 20px;
    background: linear-gradient(135deg, #c9783c, #a65f2e);
    color: #fff;
    font-size: 1.55rem;
    box-shadow: 0 12px 22px rgba(166, 95, 46, 0.2);
  }

  .category-panel {
    padding: 17px 14px 15px;
    border-color: rgba(215, 170, 82, 0.34);
    border-radius: 28px;
    background:
      radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.68), transparent 36%),
      linear-gradient(180deg, #fff7e8, #ecd6b9);
    box-shadow: 0 17px 38px rgba(84, 55, 28, 0.11);
  }

  .panel-title {
    margin-bottom: 13px;
    color: #243729;
    font-family: var(--nk-font-display);
    font-size: 1.35rem;
    line-height: 1;
    text-align: center;
  }

  .category-grid {
    gap: 9px;
  }

  .category-btn {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid rgba(215, 170, 82, 0.25);
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.92);
    box-shadow: 0 7px 16px rgba(68, 44, 22, 0.07);
    color: #2b3a2d;
    font-size: 0.76rem;
    font-weight: 850;
  }

  .category-btn:hover,
  .category-btn.active,
  .category-btn.is-selected {
    border-color: rgba(215, 170, 82, 0.72);
    background: linear-gradient(135deg, #294a36, #1f3829);
    color: #fff8e8;
  }

  .mobile-hero-small {
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 26px;
  }

  .mobile-hero-small::after {
    background: linear-gradient(0deg, rgba(11, 27, 17, 0.7), rgba(11, 27, 17, 0.04) 62%);
  }

  .mobile-hero-small-text {
    right: 18px;
    bottom: 18px;
    left: 18px;
  }

  .mobile-hero-small-text strong {
    display: block;
    color: #fff9ec;
    font-size: 1.05rem;
    line-height: 1.15;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.42);
  }

  .mobile-hero-small-text span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 249, 236, 0.9);
    font-size: 0.76rem;
    font-weight: 750;
  }

  .mobile-feature-strip {
    gap: 9px;
  }

  .mobile-feature-strip > div {
    min-height: 86px;
    border-color: rgba(215, 170, 82, 0.45);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(41, 74, 54, 0.96), rgba(31, 56, 41, 0.98));
    color: #fff8e8;
    box-shadow: 0 13px 26px rgba(28, 42, 29, 0.14);
  }

  .mobile-feature-strip strong {
    color: #f4cf78;
    font-size: 0.74rem;
  }

  .mobile-feature-strip span {
    color: rgba(255, 248, 232, 0.9);
    font-size: 0.58rem;
  }

  .ad-media-box {
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 27px;
    box-shadow: 0 18px 38px rgba(47, 34, 20, 0.13);
  }

  .join-area {
    flex-basis: 72px;
  }

  .join-area .nk-mini-card {
    border-color: rgba(215, 170, 82, 0.26);
    border-radius: 24px;
    background: rgba(255, 253, 248, 0.82);
    box-shadow: 0 12px 28px rgba(69, 44, 22, 0.08);
  }
}

@media (max-width: 430px) {
  .mobile-hero-big {
    min-height: min(520px, 64dvh);
  }

  .mobile-hero-text .hero-title-text {
    font-size: clamp(2rem, 10vw, 2.85rem);
  }

  .category-btn {
    min-height: 38px;
    font-size: 0.72rem;
  }

  .mobile-feature-strip > div {
    min-height: 78px;
  }
}
/* Mobile header controls lock: keep login/language below the logo/title row. */
@media (max-width: 980px) {
  html body:not(.show-recipes-page) .nk-brand-card {
    min-height: 136px !important;
    padding-bottom: 44px !important;
    overflow: visible !important;
  }

  html body:not(.show-recipes-page) .nk-brand-card > .floating-lang {
    position: absolute !important;
    top: auto !important;
    right: 16px !important;
    bottom: 10px !important;
    left: 16px !important;
    z-index: 460 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    pointer-events: none !important;
    transform: none !important;
  }

  html body:not(.show-recipes-page) .nk-brand-card > .floating-lang > * {
    pointer-events: auto !important;
  }

  html body:not(.show-recipes-page) .nk-brand-card .user-menu-btn,
  html body:not(.show-recipes-page) .nk-brand-card .lang-btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 5px 12px !important;
    border-color: rgba(176, 127, 75, 0.24) !important;
    background: rgba(255, 250, 242, 0.96) !important;
    color: #3c352f !important;
    font-size: 0.68rem !important;
    box-shadow: 0 8px 18px rgba(57, 40, 24, 0.12) !important;
  }

  html body:not(.show-recipes-page) .sidebar-shell {
    padding-top: calc(148px + env(safe-area-inset-top)) !important;
  }
}

/* Mobile scan card polish: thinner text and progress line never touches copy. */
@media (max-width: 980px) {
  html body:not(.show-recipes-page) #sidebar.sidebar-unified .upload-card {
    flex-basis: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 14px 10px !important;
    overflow: hidden !important;
  }

  html body:not(.show-recipes-page) #sidebar.sidebar-unified .upload-card-text {
    gap: 1px !important;
    text-align: center !important;
  }

  html body:not(.show-recipes-page) #sidebar.sidebar-unified .upload-card-text strong,
  html body:not(.show-recipes-page) #sidebar.sidebar-unified #scanTitle {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }

  html body:not(.show-recipes-page) #sidebar.sidebar-unified .upload-card-text span,
  html body:not(.show-recipes-page) #sidebar.sidebar-unified #statusText {
    margin-top: 1px !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
  }

  html body:not(.show-recipes-page) #sidebar.sidebar-unified .upload-card .gallery-mini-btn {
    min-height: 24px !important;
    margin: 4px auto 0 !important;
    padding: 3px 12px !important;
    font-size: 0.56rem !important;
    line-height: 1 !important;
  }

  html body:not(.show-recipes-page) #sidebar.sidebar-unified .upload-card .analyze-progress {
    height: 3px !important;
    margin-top: 4px !important;
    flex: 0 0 3px !important;
    opacity: 0.72 !important;
  }
}

/* Bright mobile invitation pass: light surfaces, appetising images, clear actions. */
@media (max-width: 980px) {
  body.nili-type-system:not(.show-recipes-page) {
    background:
      radial-gradient(circle at 8% -4%, rgba(244, 164, 91, 0.2), transparent 30%),
      radial-gradient(circle at 96% 16%, rgba(232, 194, 112, 0.17), transparent 28%),
      linear-gradient(180deg, #fffdf8 0%, #fff5e8 50%, #f5e8d5 100%);
  }

  body:not(.show-recipes-page) .nk-brand-card {
    border-color: rgba(205, 151, 82, 0.25);
    background:
      radial-gradient(circle at 92% 20%, rgba(239, 151, 81, 0.12), transparent 34%),
      linear-gradient(135deg, #fffefa 0%, #fff4e5 100%);
    box-shadow: 0 14px 34px rgba(91, 58, 27, 0.1);
  }

  body:not(.show-recipes-page) .nk-logo-shell {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(112, 71, 30, 0.11);
  }

  body:not(.show-recipes-page) .mobile-nili-picks-grid {
    border-color: rgba(210, 157, 88, 0.2);
    background: linear-gradient(145deg, #fffefa, #f9eddb);
    box-shadow: 0 12px 26px rgba(91, 57, 27, 0.07);
  }

  body:not(.show-recipes-page) .mobile-nili-pick > img {
    filter: saturate(1.14) contrast(1.02) brightness(1.07);
  }

  body:not(.show-recipes-page) .mobile-nili-pick::after {
    background: linear-gradient(180deg, rgba(25, 38, 28, 0.2), transparent 46%, rgba(24, 47, 33, 0.3));
  }

  body:not(.show-recipes-page) .mobile-world-search-bar {
    border-color: rgba(208, 151, 74, 0.42);
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.95), transparent 35%),
      linear-gradient(135deg, #fff9ef, #f3dec2);
    box-shadow: 0 12px 28px rgba(93, 58, 26, 0.1);
  }

  body:not(.show-recipes-page) .mobile-world-search-open {
    color: #294a36;
  }

  body:not(.show-recipes-page) .mobile-world-flags button {
    border: 1px solid rgba(202, 146, 72, 0.24);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 5px 12px rgba(75, 49, 24, 0.08);
  }

  body:not(.show-recipes-page) .mobile-hero-big {
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 16px 36px rgba(52, 42, 27, 0.14);
  }

  body:not(.show-recipes-page) .mobile-hero-big > img {
    filter: saturate(1.13) contrast(1.01) brightness(1.05);
  }

  body:not(.show-recipes-page) .mobile-hero-big::after {
    background:
      linear-gradient(0deg, rgba(17, 39, 26, 0.67) 0%, rgba(17, 39, 26, 0.18) 43%, transparent 73%),
      linear-gradient(90deg, rgba(17, 39, 26, 0.09), transparent 62%);
  }

  body:not(.show-recipes-page) .upload-card {
    border-color: rgba(210, 147, 76, 0.34);
    background:
      radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.86), transparent 32%),
      linear-gradient(135deg, #fff9ef, #f2dcc0);
    box-shadow: 0 11px 26px rgba(91, 56, 24, 0.09);
  }

  body:not(.show-recipes-page) .upload-card .gallery-mini-btn {
    border-color: rgba(180, 91, 43, 0.28);
    background: linear-gradient(135deg, #df7c42, #bd5f31);
    color: #fffdf8;
    box-shadow: 0 8px 17px rgba(174, 86, 41, 0.19);
  }

  body:not(.show-recipes-page) .manual {
    border-color: rgba(210, 151, 80, 0.24);
    background: rgba(255, 255, 252, 0.97);
    box-shadow: 0 10px 24px rgba(75, 48, 24, 0.08);
  }

  body:not(.show-recipes-page) .manual > button {
    background: linear-gradient(135deg, #e18449, #bd6132);
    box-shadow: 0 9px 19px rgba(177, 85, 39, 0.18);
  }

  body:not(.show-recipes-page) .category-panel {
    border-color: rgba(210, 153, 82, 0.27);
    background:
      radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.96), transparent 34%),
      linear-gradient(180deg, #fffaf1, #f5e4cc);
    box-shadow: 0 13px 30px rgba(84, 54, 27, 0.08);
  }

  body:not(.show-recipes-page) .category-btn {
    border-color: rgba(207, 156, 92, 0.22);
    background: rgba(255, 255, 253, 0.96);
    color: #344238;
    box-shadow: 0 5px 12px rgba(70, 46, 23, 0.055);
  }

  body:not(.show-recipes-page) .category-btn:hover,
  body:not(.show-recipes-page) .category-btn.active,
  body:not(.show-recipes-page) .category-btn.is-selected {
    border-color: #d49a54;
    background: linear-gradient(135deg, #e58a4d, #c76934);
    color: #fff;
    box-shadow: 0 7px 16px rgba(185, 92, 42, 0.18);
  }

  body:not(.show-recipes-page) .mobile-feature-strip > div {
    border-color: rgba(208, 154, 82, 0.3);
    background: linear-gradient(145deg, #fffdf8, #f3e2c9);
    color: #294535;
    box-shadow: 0 9px 20px rgba(78, 51, 25, 0.075);
  }

  body:not(.show-recipes-page) .mobile-feature-strip strong {
    color: #b85f31;
  }

  body:not(.show-recipes-page) .mobile-feature-strip span {
    color: #5d655e;
  }

  body:not(.show-recipes-page) .join-area .nk-mini-card {
    border-color: rgba(211, 160, 93, 0.22);
    background: rgba(255, 254, 250, 0.96);
    box-shadow: 0 9px 22px rgba(72, 47, 23, 0.07);
  }
}