:root {
  --bg: #fff3f7;
  --bg-2: #ffe6ef;
  --card: #fffbfc;
  --ink: #6b4256;
  --muted: #a9788e;
  --accent: #f2799e;
  --accent-2: #ffa9c5;
  --accent-dark: #d85c85;
  --line: #f6d3e0;
  --chip-bg: #ffeef4;
  --chip-selected-bg: linear-gradient(135deg, #ff9ec2, #f2799e);
  --chip-selected-ink: #ffffff;
  --shadow: 0 4px 16px rgba(242, 121, 158, 0.14);
  --bunny-fur: #fffaf9;
  --bunny-ear-inner: #ffc3d8;
  --bunny-blush: #ffcede;
  --bunny-eye: #6b4256;
  --bunny-nose: #f2799e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #2b1c24;
    --bg-2: #3a2530;
    --card: #38242e;
    --ink: #fbe4ee;
    --muted: #d5a6bc;
    --accent: #ff9ec2;
    --accent-2: #ffb8d3;
    --accent-dark: #ffc3d8;
    --line: #55374a;
    --chip-bg: #45293a;
    --chip-selected-bg: linear-gradient(135deg, #ff9ec2, #f2799e);
    --chip-selected-ink: #2b1c24;
    --shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    /* Mascot stays a light bunny in both themes — a dark-furred version
       loses its face against a dark background. */
    --bunny-fur: #fffaf9;
    --bunny-ear-inner: #ffc3d8;
    --bunny-blush: #ffcede;
    --bunny-eye: #6b4256;
    --bunny-nose: #f2799e;
  }
}

:root[data-theme="dark"] {
  --bg: #2b1c24;
  --bg-2: #3a2530;
  --card: #38242e;
  --ink: #fbe4ee;
  --muted: #d5a6bc;
  --accent: #ff9ec2;
  --accent-2: #ffb8d3;
  --accent-dark: #ffc3d8;
  --line: #55374a;
  --chip-bg: #45293a;
  --chip-selected-bg: linear-gradient(135deg, #ff9ec2, #f2799e);
  --chip-selected-ink: #2b1c24;
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  --bunny-fur: #fffaf9;
  --bunny-ear-inner: #ffc3d8;
  --bunny-blush: #ffcede;
  --bunny-eye: #6b4256;
  --bunny-nose: #f2799e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at 15% 8%, var(--bg-2), transparent 45%),
    radial-gradient(circle at 85% 92%, var(--bg-2), transparent 45%),
    var(--bg);
  color: var(--ink);
  min-height: 100vh;
  position: relative;
}

h1, h2 {
  font-family: "Baloo 2", "Nunito", sans-serif;
}

/* Softly scattered background critters — decorative, low opacity, ignored by
   screen readers, and never intercept clicks. */
.bg-critters {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.critter {
  position: absolute;
  font-size: 2.4rem;
  opacity: 0.16;
  filter: saturate(0.75) brightness(1.08)
    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.5))
    drop-shadow(0 3px 4px rgba(107, 66, 86, 0.25));
}

.c1 { top: 6%; left: 4%; font-size: 2.8rem; transform: rotate(-12deg); }
.c2 { top: 18%; right: 6%; font-size: 2.2rem; transform: rotate(10deg); }
.c3 { top: 42%; left: 2%; font-size: 1.8rem; transform: rotate(-20deg); }
.c4 { bottom: 20%; right: 4%; font-size: 2.6rem; transform: rotate(8deg); }
.c5 { bottom: 8%; left: 10%; font-size: 1.6rem; transform: rotate(16deg); }
.c6 { top: 66%; right: 14%; font-size: 2.1rem; transform: rotate(-8deg); }
.c7 { top: 52%; right: 2%; transform: rotate(-6deg); }

.critter-axolotl svg {
  width: 2.3rem;
  height: 2.3rem;
  display: block;
}

.critter-axolotl svg circle,
.critter-axolotl svg ellipse {
  stroke: rgba(107, 66, 86, 0.35);
  stroke-width: 1.4;
  stroke-dasharray: 2.5 2.8;
  stroke-linecap: round;
}

/* Little chef hats on every background critter (including the axolotl)
   while on "Add a Recipe" — matches the header bunny's chef mode so the
   whole screen feels like it's cooking, not just the mascot up top. */
.critter::before { content: none; }

body.mode-add-recipe .critter::before {
  content: "";
  position: absolute;
  top: -0.18em;
  left: 50%;
  width: 0.9em;
  height: 0.5em;
  background: #ffffff;
  border: 1px solid rgba(107, 66, 86, 0.4);
  border-radius: 50% 50% 15% 15%;
  transform: translateX(-50%) rotate(-6deg);
  box-shadow: 0 1px 2px rgba(107, 66, 86, 0.25);
  z-index: 1;
}

/* Little shopping trolleys trailing every background critter on the
   Shopping List screen, as if they're all out pushing carts. */
.critter::after { content: none; }

body.mode-shopping .critter::after {
  content: "🛒";
  position: absolute;
  bottom: -0.3em;
  right: -0.75em;
  font-size: 0.6em;
  transform: rotate(4deg);
  z-index: 1;
}

/* Background critters lean and bob as if walking off with their trolleys. */
@keyframes critter-walk {
  0%, 100% { transform: rotate(-14deg) translate(0, 0); }
  50% { transform: rotate(-20deg) translate(-2px, -3px); }
}

body.mode-shopping .critter {
  animation: critter-walk 0.7s ease-in-out infinite;
}

.wrap {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 18px 80px;
  position: relative;
  z-index: 1;
}

header.app-header {
  text-align: center;
  margin-bottom: 24px;
}

.mascot {
  width: 76px;
  height: 76px;
  margin: 0 auto 6px;
}

.bunny-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 5px 8px rgba(242, 121, 158, 0.3)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}

/* Stitched-seam outline on the fur/hat shapes — reads as a stuffed plushie
   rather than a flat icon. Targets shape elements directly (SVG presentation
   properties are valid CSS), so it applies uniformly to both the default and
   chef bunny without touching each shape by hand. */
.bunny-svg circle,
.bunny-svg ellipse,
.bunny-svg rect {
  stroke: rgba(107, 66, 86, 0.35);
  stroke-width: 1.4;
  stroke-dasharray: 2.5 2.8;
  stroke-linecap: round;
}

/* The header mascot/title/subtitle swap per screen — a chef-hatted bunny on
   "Add a Recipe", a bunny rummaging through a drawer on "What's in the
   House" — otherwise every screen shares the exact same header and looks
   interchangeable. Toggled by app.js adding .mode-add-recipe/.mode-pantry
   to <body> on screen change. */
.mascot-chef,
.mascot-fridge,
.mascot-shopping,
.header-title-add-recipe,
.header-title-pantry,
.header-title-shopping,
.header-sub-add-recipe,
.header-sub-pantry,
.header-sub-shopping {
  display: none;
}

body.mode-add-recipe .app-header .mascot-default,
body.mode-add-recipe .app-header .header-title-default,
body.mode-add-recipe .app-header .header-sub-default {
  display: none;
}

body.mode-add-recipe .app-header .mascot-chef,
body.mode-add-recipe .app-header .header-title-add-recipe,
body.mode-add-recipe .app-header .header-sub-add-recipe {
  display: block;
}

body.mode-pantry .app-header .mascot-default,
body.mode-pantry .app-header .header-title-default,
body.mode-pantry .app-header .header-sub-default {
  display: none;
}

body.mode-pantry .app-header .mascot-fridge,
body.mode-pantry .app-header .header-title-pantry,
body.mode-pantry .app-header .header-sub-pantry {
  display: block;
}

body.mode-shopping .app-header .mascot-default,
body.mode-shopping .app-header .header-title-default,
body.mode-shopping .app-header .header-sub-default {
  display: none;
}

body.mode-shopping .app-header .mascot-shopping,
body.mode-shopping .app-header .header-title-shopping,
body.mode-shopping .app-header .header-sub-shopping {
  display: block;
}

/* The shopping bunny leans in and bobs as it walks off, legs pumping,
   trolley trailing behind — sells the "leaving with the cart" feel. */
.mascot-shopping .bunny-svg {
  transform-box: view-box;
  transform-origin: 50px 60px;
}

.bunny-leg-back,
.bunny-leg-front {
  transform-box: view-box;
}

.bunny-leg-back { transform-origin: 28px 74px; }
.bunny-leg-front { transform-origin: 44px 74px; }

@keyframes shopping-walk-bob {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(-6deg) translateY(-2px); }
}

@keyframes leg-swing-back {
  0%, 100% { transform: rotate(18deg); }
  50% { transform: rotate(-18deg); }
}

@keyframes leg-swing-front {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(18deg); }
}

body.mode-shopping .mascot-shopping .bunny-svg {
  animation: shopping-walk-bob 0.55s ease-in-out infinite;
}

body.mode-shopping .bunny-leg-back {
  animation: leg-swing-back 0.55s ease-in-out infinite;
}

body.mode-shopping .bunny-leg-front {
  animation: leg-swing-front 0.55s ease-in-out infinite;
}

/* Pantry cupboard doors swing open on a loop, hinged at their outer edges,
   with the bunny leaning further in to peek at the shelves as they open. */
.pantry-door {
  transform-box: view-box;
}

.pantry-door-left { transform-origin: 14px 49px; }
.pantry-door-right { transform-origin: 86px 49px; }

@keyframes pantry-door-open-left {
  0% { transform: perspective(200px) rotateY(0deg); }
  55% { transform: perspective(200px) rotateY(80deg); }
  100% { transform: perspective(200px) rotateY(125deg); }
}

@keyframes pantry-door-open-right {
  0% { transform: perspective(200px) rotateY(0deg); }
  55% { transform: perspective(200px) rotateY(-80deg); }
  100% { transform: perspective(200px) rotateY(-125deg); }
}

body.mode-pantry .mascot-fridge .pantry-door-left {
  animation: pantry-door-open-left 6.4s cubic-bezier(0.3, 0.7, 0.2, 1) infinite alternate;
}

body.mode-pantry .mascot-fridge .pantry-door-right {
  animation: pantry-door-open-right 6.4s cubic-bezier(0.3, 0.7, 0.2, 1) infinite alternate;
}

.pantry-bunny-head {
  transform-box: view-box;
  transform-origin: 49px 20px;
}

@keyframes pantry-peek {
  0% { transform: translateY(0); }
  55% { transform: translateY(6px); }
  100% { transform: translateY(9px); }
}

body.mode-pantry .mascot-fridge .pantry-bunny-head {
  animation: pantry-peek 6.4s ease-in-out infinite alternate;
}

/* Bright axolotl peeking over a pantry shelf, next to the "Back" button on
   "What's in the House" only — deliberately not dimmed like the background
   critters, since it's meant to read as a foreground character here. */
.pantry-axolotl {
  width: 64px;
  flex-shrink: 0;
}

.pantry-axolotl svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(107, 66, 86, 0.2));
}

/* Old leather recipe book mascot — gives "Add a Recipe" its own identity
   instead of looking like the picker screen with a different heading. */
.cook-mascot {
  width: 128px;
  margin: 4px auto 10px;
}

.book-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(107, 66, 86, 0.3));
}

/* Right cover swings open on its spine like a real book, timed to when the
   "Add a Recipe" screen itself opens (see mode-add-recipe toggle below). */
.book-cover-right {
  transform-box: view-box;
  transform-origin: 50px 41px;
}

/* Starts flat over the page (closed) and swings away on its spine to reveal
   the page underneath (open) — fill-mode forwards keeps it open instead of
   snapping shut the instant the animation ends. */
@keyframes book-open {
  0% { transform: perspective(240px) rotateY(0deg); }
  55% { transform: perspective(240px) rotateY(-100deg); }
  100% { transform: perspective(240px) rotateY(-165deg); }
}

body.mode-add-recipe .cook-mascot .book-cover-right {
  animation: book-open 6.4s cubic-bezier(0.3, 0.7, 0.2, 1) infinite alternate;
}

/* "Secret Recipes" stays hidden until the cover has swung almost all the
   way open, then fades in on the page underneath. */
.book-title-text {
  opacity: 0;
}

@keyframes book-title-fade {
  0% { opacity: 0; }
  65% { opacity: 0; }
  100% { opacity: 1; }
}

body.mode-add-recipe .cook-mascot .book-title-text {
  animation: book-title-fade 6.4s ease-in-out infinite alternate;
}

header.app-header h1 {
  font-size: 1.7rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--accent-dark);
}

header.app-header p {
  color: var(--muted);
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.header-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
}

.refresh-link {
  border: 1.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 999px;
  font-family: inherit;
}

.refresh-link:hover {
  background: color-mix(in srgb, var(--accent) 22%, var(--card));
}

.refresh-link:disabled {
  opacity: 0.5;
  cursor: default;
}

.pantry-activity-status {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 6px 0 0;
  opacity: 0.8;
}

.column {
  margin-bottom: 22px;
}

.column h2 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-dark);
  margin: 0 0 10px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  border: 1.5px solid var(--line);
  background: var(--chip-bg);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 0.88rem;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s, color 0.15s, border-color 0.15s;
}

.chip:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.chip.selected {
  background: var(--chip-selected-bg);
  color: var(--chip-selected-ink);
  border-color: transparent;
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.primary-btn {
  display: block;
  width: 100%;
  padding: 15px;
  margin-top: 8px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: #fff;
  font-family: "Baloo 2", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.12s;
}

.primary-btn:hover { transform: translateY(-1px); }

.primary-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.ghost-btn {
  display: inline-block;
  padding: 10px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
}

.ghost-btn:hover { border-color: var(--accent); }

.cook-log-entry { cursor: default; }
.cook-log-entry:hover { border-color: var(--line); transform: none; }
.cook-log-entry::before { content: none; }

.app-footer {
  text-align: center;
  margin: 28px 0 8px;
}

.screen { display: none; }
.screen.active { display: block; }

.suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0;
}

.suggestion-card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s;
  position: relative;
}

.suggestion-card::before {
  content: "🐾";
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 1rem;
  opacity: 0.5;
}

.suggestion-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.suggestion-card h3 {
  margin: 0 4px 4px 0;
  font-size: 1.08rem;
  font-family: "Baloo 2", sans-serif;
  color: var(--ink);
  padding-right: 22px;
}

.suggestion-card .style-tag {
  color: var(--muted);
  font-size: 0.88rem;
}

.suggestion-card .match-note {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--accent-dark);
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 8px;
}

.selection-summary {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 30px 10px;
}

.recipe-detail h2 {
  margin: 4px 0 2px;
  color: var(--accent-dark);
  font-size: 1.4rem;
}

.recipe-detail .style-tag {
  color: var(--muted);
  margin-bottom: 18px;
  display: block;
}

.stat-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.stat-pill {
  background: var(--chip-bg);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--ink);
  min-width: 110px;
}

.stat-pill strong {
  display: block;
  font-size: 1.05rem;
  color: var(--accent-dark);
  font-family: "Baloo 2", sans-serif;
}

.recipe-detail h4 {
  margin: 18px 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-dark);
}

.recipe-detail ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}

.missing-list {
  color: var(--accent-dark);
}

.pantry-caveat {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.recipe-detail .notes {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--muted);
  font-style: italic;
}

#log-cooked-btn {
  margin-top: 24px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--accent-dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  box-shadow: var(--shadow);
  z-index: 10;
  max-width: calc(100% - 40px);
  text-align: center;
}

.install-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card);
  border-top: 1.5px solid var(--line);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 15;
}

.install-banner span {
  font-size: 0.9rem;
  color: var(--ink);
  max-height: 4.5em;
  overflow-y: auto;
}

.install-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.install-banner-actions button {
  margin: 0;
  padding: 8px 14px;
  font-size: 0.85rem;
}

.toast.toast-action {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 999px;
  text-align: left;
}

.toast-undo-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  font-size: 0.9rem;
  padding: 0;
  cursor: pointer;
}

.add-item-row {
  display: flex;
  gap: 8px;
  margin: 14px 0 20px;
}

.add-item-row input {
  flex: 1;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.92rem;
  font-family: inherit;
}

.autocomplete-wrap {
  position: relative;
  flex: 1;
}

.autocomplete-wrap input {
  width: 100%;
  box-sizing: border-box;
}

.autocomplete-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
}

.autocomplete-list.open {
  display: block;
}

.autocomplete-option {
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.9rem;
  cursor: pointer;
}

.autocomplete-option:hover,
.autocomplete-option.active {
  background: var(--accent-2);
}

.shopping-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shopping-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
}

.category-heading {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 18px 0 6px;
}

.category-heading:first-child {
  margin-top: 0;
}

.category-group {
  margin-bottom: 2px;
}

.category-group > summary.category-heading {
  cursor: pointer;
  user-select: none;
}

.category-group > summary.category-heading::-webkit-details-marker {
  color: var(--accent-dark);
}

.shopping-total {
  font-size: 0.9rem;
  color: var(--accent-dark);
  font-weight: 700;
  margin: -6px 0 12px;
}

.item-name.low-stock {
  color: var(--accent-dark);
  font-weight: 700;
}

.shopping-item .check-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  flex-shrink: 0;
}

.shopping-item .item-name {
  flex: 1;
  font-size: 0.95rem;
}

.qty-badge {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 2px 9px;
  line-height: 1.5;
}

.shopping-item .item-source {
  font-size: 0.75rem;
  color: var(--muted);
}

.list-row-highlight {
  animation: list-row-flash 1.5s ease;
}

@keyframes list-row-flash {
  0%, 100% { background: var(--card); }
  25% { background: var(--accent-2); }
}

.stock-row {
  cursor: default;
  flex-wrap: wrap;
}

.stock-freq-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.stock-freq-field label {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}

.stock-freq-field input {
  width: 56px;
  flex: none;
  padding: 8px 6px;
  text-align: center;
}

.stock-freq-input {
  width: 52px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  font: inherit;
  text-align: center;
}

.field-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin: 18px 0 8px;
}

.field-hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: -4px 0 8px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0;
}

.checkbox-row input[type="checkbox"] {
  width: auto;
}

.checkbox-row label {
  font-size: 0.9rem;
  color: var(--ink);
}

.detail-secondary-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.detail-secondary-actions .ghost-btn {
  flex: 1;
  text-align: center;
}
.danger-btn {
  color: #c0392b;
  border-color: #e6b3ac;
}

.row-delete-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.row-delete-btn:hover {
  color: #c0392b;
}

.text-input {
  width: 100%;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.92rem;
  font-family: inherit;
  resize: vertical;
}

#add-recipe-form .column {
  margin-bottom: 14px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 28, 36, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 20;
}

.modal-card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow);
  max-width: 360px;
  width: 100%;
  text-align: center;
}

.modal-card p {
  margin: 0 0 18px;
  font-size: 0.95rem;
  color: var(--ink);
  white-space: pre-line;
}

.modal-card .text-input {
  margin-bottom: 18px;
  text-align: left;
}

.add-option-btn {
  margin-top: 8px;
  font-size: 0.82rem;
  padding: 7px 12px;
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}

.add-option-btn:hover {
  background: color-mix(in srgb, var(--accent) 22%, var(--card));
}

.modal-actions {
  display: flex;
  gap: 10px;
}

.modal-actions button {
  flex: 1;
  margin: 0;
}

.modal-actions.modal-actions-stack {
  flex-direction: column;
}

.modal-actions.modal-actions-stack button {
  flex: none;
  width: 100%;
}