@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&display=swap");

:root {
  --ice-1: #f4fbff;
  --ice-2: #e6f1ff;
  --ice-3: #cfe9ff;
  --accent: #1b6fd8;
  --muted: #6b7c93;
  --primary-navy: #083463;
  --primary-blue: #1b6fd8;
  --bg-body: linear-gradient(180deg, #f4fbff, #e6f1ff 40%, #f0f7ff 100%);
  --bg-card: rgba(255, 255, 255, 0.86);
  --border-subtle: rgba(200, 215, 235, 0.6);
  --text-main: #05223a;
  --text-header: #083463;
  --shadow-soft: 0 8px 30px rgba(11, 45, 80, 0.12);
}

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

html,
body {
  height: 100%;
}

html {
  height: -webkit-fill-available;
}

body {
  background: var(--bg-body);
  color: var(--text-main);
  font-family:
    "Nunito",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
}

body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at top center,
    rgba(255, 255, 255, 0.2),
    transparent 30%
  );
  mix-blend-mode: overlay;
  z-index: -1;
}

/* Library Container */
.library-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  height: -webkit-fill-available;
  background: transparent;
  font-family: inherit;
  overflow: hidden;
}

.hidden {
  display: none !important;
}

/* Toast Animation */
@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

/* Meal Type Tabs */
.meal-type-tabs {
  display: flex;
  gap: 10px;
  padding: 0;
  margin-top: 8px;
  padding-top: 8px;
  flex-wrap: wrap;
}

.meal-type-btn {
  background: #eef5ff;
  border: 1px solid #d3e3f7;
  color: var(--text-header);
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.meal-type-btn:hover {
  background: #e1eeff;
  border-color: #b9d4f6;
}

.meal-type-btn.active {
  background: var(--primary-blue);
  color: white;
  border-color: var(--primary-blue);
}

/* Header */
.library-header {
  background: #ffffff;
  color: var(--text-main);
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}

.header-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.header-identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.library-title {
  margin: 0;
  font-size: clamp(1.55rem, 2vw, 1.95rem);
  line-height: 1.05;
  font-weight: 900;
  color: var(--primary-blue);
  letter-spacing: -0.02em;
}

.library-subtitle {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.header-utility-actions,
.header-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.back-btn {
  background: #f4f9ff;
  color: var(--text-header);
  text-decoration: none;
  border: 1px solid #c7dcf2;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  line-height: 1;
  white-space: nowrap;
}

.back-btn:hover {
  background-color: #eaf4ff;
  border-color: #b4d0ef;
}

#back-btn {
  background-color: #f6fbff;
  color: #0b4f9d;
  border-color: #c7dcf2;
}

#back-btn:hover {
  background-color: #eaf4ff;
  border-color: #b4d0ef;
}

#open-add-own-meal-btn {
  background: var(--primary-blue);
  color: #fff;
  border-color: var(--primary-blue);
}

#open-add-own-meal-btn:hover {
  background: #1662c1;
  border-color: #1662c1;
}

.header-secondary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.user-section {
  display: flex;
  gap: 10px;
  align-items: center;
}

.user-display {
  font-size: 14px;
  font-weight: 600;
}

#sign-out-btn {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

#sign-out-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Search Container */
.library-controls-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.search-container {
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #b7d3ef;
  border-radius: 10px;
  background: #f8fbff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-field i {
  color: #6c8cae;
  font-size: 15px;
}

.search-field:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(27, 111, 216, 0.3));
}

.search-input {
  width: 100%;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: 14px;
  background-color: transparent;
  color: var(--text-main);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.search-input:focus {
  outline: none;
}

.search-input::placeholder {
  color: #8a97ab;
}

.header-control-buttons {
  display: flex;
  align-items: stretch;
  align-self: center;
  gap: 0;
  flex-shrink: 0;
  min-height: 40px;
  padding: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  background: rgba(27, 111, 216, 0.07);
  overflow: hidden;
}

.filter-toggle-btn,
.view-toggle-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-header);
  width: 28px;
  padding: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
}

.filter-toggle-btn i,
.view-toggle-btn i {
  font-size: 12px;
}

#filter-toggle-btn .mobile-control-label,
#view-toggle-btn .mobile-control-label {
  display: none;
}

.mobile-control-label {
  display: inline;
}

.filter-toggle-btn:hover,
.view-toggle-btn:hover {
  background: #edf5ff;
}

.filter-toggle-btn.active {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #fff;
}

.filter-toggle-btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.view-toggle-btn {
  margin-left: 1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.active-filter-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 0;
  background: #eef5ff;
  border: 1px solid #d6e6f9;
  border-radius: 999px;
  padding: 4px 10px;
  align-self: flex-start;
}

.summary-label {
  font-weight: 700;
  color: var(--text-header);
}

.summary-divider {
  opacity: 0.7;
}

.filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(760px, calc(100vw - 32px));
  z-index: 55;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: #fff;
  padding: 10px;
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
  box-shadow: var(--shadow-modal, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
}

.filter-panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.filter-panel::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 42px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: #fff;
  border-top: 1px solid var(--border-subtle);
  border-left: 1px solid var(--border-subtle);
}

.filter-group {
  background: #f7fbff;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 0;
}

.filter-group-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.active-filter-summary,
.filter-inline-row,
.ingredient-filter-section,
.filter-actions-row {
  grid-column: 1 / -1;
}

.filter-inline-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.filter-inline-row .numeric-filter-section {
  flex: 1 1 220px;
  min-width: 0;
}

.filter-inline-row .tag-filter-section {
  flex: 1 1 240px;
  min-width: 0;
}

.filter-actions-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
}

.numeric-filter-section {
  margin-top: 0;
  padding-top: 8px;
}

.numeric-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 6px;
}

.numeric-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.numeric-filter-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-header);
}

.numeric-filter-input {
  min-height: 36px;
  border: 1.5px solid #d7e1ee;
  border-radius: 10px;
  padding: 0 11px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-main);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.numeric-filter-input:hover {
  border-color: #becdde;
}

.numeric-filter-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(27, 111, 216, 0.3));
}

.reset-filters-btn {
  margin-top: 0;
  min-height: 34px;
  border: 1px solid #c8dced;
  border-radius: 9px;
  background: #fdfefe;
  color: var(--text-header);
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.18s ease;
}

.reset-filters-btn:hover {
  background: #f0f7ff;
  border-color: #b6d0ea;
}

.back-btn:focus-visible,
.manage-tags-btn:focus-visible,
.filter-toggle-btn:focus-visible,
.view-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.16);
}

/* Tabs */
.tabs-container {
  display: flex;
  gap: 10px;
  border-bottom: none;
  padding-bottom: 0;
}

.tab-btn {
  background: #eef5ff;
  border: 1px solid #d3e3f7;
  color: var(--text-header);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn.active {
  background: var(--primary-blue);
  color: white;
  border-color: var(--primary-blue);
}

.tab-btn:hover:not(.active) {
  background: #e1eeff;
  border-color: #b9d4f6;
}

/* Main Content Layout */
.library-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 0;
  background: #f3f9fd;
  min-height: 0;
}

/* Sidebar */
.folders-sidebar {
  width: 250px;
  background-color: var(--bg-card);
  backdrop-filter: blur(6px);
  border-right: 1px solid var(--border-subtle);
  padding: 20px;
  overflow: hidden;
  box-shadow: 2px 0 14px rgba(8, 52, 99, 0.08);
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.sidebar-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-header);
}

.create-folder-btn {
  background-color: var(--primary-blue);
  color: white;
  border: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  text-align: center;
  transition: all 0.3s ease;
  display: inline-grid;
  place-items: center;
}

.create-folder-btn:hover {
  background-color: #1662c1;
  transform: scale(1.1);
}

/* Folders List */
.folders-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

.folder-item {
  padding: 10px 12px;
  background-color: #f7fbff;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.folder-item:hover {
  background-color: #eef5ff;
  border-color: rgba(27, 111, 216, 0.3);
}

.folder-item.active {
  background-color: rgba(27, 111, 216, 0.1);
  color: var(--text-header);
  border-color: rgba(27, 111, 216, 0.45);
  font-weight: 800;
}

.folder-item.active .folder-count {
  color: var(--text-header);
  opacity: 1;
}

.folder-name {
  flex: 1;
}

.folder-count {
  flex-shrink: 0;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(27, 111, 216, 0.08);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
}

.folder-item.active .folder-count {
  background: rgba(27, 111, 216, 0.16);
}

.folder-actions {
  display: none;
  gap: 5px;
}

.folder-item.active .folder-actions {
  display: flex;
}

.folder-edit-btn {
  background-color: rgba(27, 111, 216, 0.16);
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
  margin-left: 5px;
}

.folder-edit-btn:hover {
  background-color: rgba(27, 111, 216, 0.4);
}

.edit-folder-buttons {
  justify-content: space-between;
}

.edit-folder-buttons-right {
  display: flex;
  gap: 10px;
}

.folder-reorder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 4px;
  padding: 12px 14px;
  background: var(--ice-1);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.folder-reorder-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.folder-reorder-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
}

.folder-reorder-hint {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.folder-reorder-buttons {
  display: inline-flex;
  gap: 6px;
}

.folder-reorder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #cddff3;
  border-radius: 10px;
  background: #ffffff;
  color: var(--accent);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, transform 0.05s ease;
}

.folder-reorder-btn:hover:not(:disabled) {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.folder-reorder-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.folder-reorder-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  color: var(--muted);
}

/* Main Content Area */
.meals-main {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
  padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  background: #f3f9fd;
  min-height: 0;
}

/* Group head (mirrors the Nutrition tab's group-head + tinted pill pattern) */
.library-group-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.library-group-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-header);
  margin: 0;
}

.library-group-tag {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(27, 111, 216, 0.1);
  color: #1662c1;
}

/* Meals Grid */
.meals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.meal-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.meal-card:hover {
  box-shadow: 0 8px 20px rgba(8, 52, 99, 0.1);
  transform: translateY(-2px);
  border-color: rgba(27, 111, 216, 0.35);
}

.meal-card-header {
  background: #1b6fd8;
  padding: 15px;
  color: white;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.meal-card-header--side {
  background: #22c55e;
}

.meal-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
}

.meal-favorite-btn {
  background: rgba(255, 255, 255, 0.3);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  flex-shrink: 0;
}

.meal-favorite-btn:hover {
  background: rgba(255, 255, 255, 0.5);
}

.meal-favorite-btn,
.meal-favorite-btn i,
#detail-favorite-btn,
#detail-favorite-btn i {
  cursor: pointer;
}

.meal-favorite-btn.favorited {
  color: #ffc107;
}

/* Meal Type Badge */
.meal-type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0;
  flex-shrink: 0;
}

.meal-type-badge.main {
  background: rgba(27, 111, 216, 0.2);
  color: #1b6fd8;
  border: 1px solid #1b6fd8;
}

.meal-type-badge.side {
  background: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
  border: 1px solid #2ecc71;
}

/* Serving Badge Styles */
.serving-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(155, 89, 182, 0.15);
  color: #9b59b6;
  border: 1px solid #9b59b6;
  white-space: nowrap;
  margin: 4px 0;
}

.serving-badge.unspecified {
  background: rgba(149, 165, 166, 0.15);
  color: #7f8c8d;
  border: 1px solid #95a5a6;
}

/* At-a-glance stat chips on the meal card (prep time + calories). Mirrors the
   serving-badge pill style, one accent colour each. */
.meal-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 2px;
}

.meal-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.meal-stat-time {
  background: rgba(52, 152, 219, 0.13);
  color: #2980b9;
  border: 1px solid #5dade2;
}

.meal-stat-calories {
  background: rgba(127, 140, 141, 0.13);
  color: #5f6a6a;
  border: 1px solid #95a5a6;
}

.meal-stat.meal-stat-empty {
  background: rgba(149, 165, 166, 0.13);
  color: #7f8c8d;
  border: 1px solid #95a5a6;
}

/* Detail Servings Info */
.detail-servings-info {
  display: none;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid #dce8f7;
}

.serving-info-display {
  font-size: 13px;
  color: var(--muted);
}

.serving-info-display strong {
  color: #7a4ea8;
  font-weight: 600;
}

.serving-info-display.unspecified {
  color: var(--muted);
}

.serving-info-display.unspecified strong {
  color: #9aa7b6;
}

.serving-base {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}

.serving-scaled {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8e7cc3;
  font-style: italic;
  padding-left: 10px;
  border-left: 2px solid #c8a8e0;
}

.serving-scaled strong {
  color: #7a4ea8;
  font-weight: 600;
}

/* Meal Detail Modal Content */
/* Compound selector so this reliably wins over the later, equal-specificity
 * .modal-content base rule regardless of source order. */
.modal-content.meal-detail-content {
  max-width: 880px;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0.75rem !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  border: 1px solid var(--border-subtle);
  outline: none;
  box-shadow: var(--shadow-modal);
}

.detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  flex-shrink: 0;
  background: transparent;
  padding: 0.6rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.detail-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.detail-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.detail-fav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #d3e3f7;
  background: #f3f8ff;
  color: #9aa7b6;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.detail-fav-icon-btn:hover {
  background: #e7f1ff;
  border-color: #b8d2f2;
  transform: scale(1.06);
}

.detail-fav-icon-btn.favorited {
  color: #ffc107;
}

.detail-header h2 {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-header);
  word-break: break-word;
  min-width: 0;
}

.detail-header .meal-type-badge {
  order: -1;
  margin: 0;
  align-self: flex-start;
  display: inline-flex;
  width: fit-content;
  padding: 0.18rem 0.6rem;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  border: none;
}

.detail-header .meal-type-badge.main {
  background: rgba(27, 111, 216, 0.1);
  color: #1662c1;
}

.detail-header .meal-type-badge.side {
  background: rgba(40, 167, 69, 0.12);
  color: #1e8035;
}

.close-btn {
  background: #f3f6fb;
  border: 1px solid #d7e3f3;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-header);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.close-btn:hover {
  background: #eaf1fb;
  border-color: #b7cce8;
  transform: scale(1.05);
}

.detail-meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

/* Meta row tiles — mirror the Nutrition .nutri-stat-card look */
.detail-meta-chip {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: #fff;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}

.detail-meta-label {
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}

.detail-meta-value {
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--text-header);
}

/* Folder chip — same tile as Time/Calories/Serves, but interactive: opens the
 * move-to-folder picker. */
.detail-meta-chip.detail-folder-chip {
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.detail-meta-chip.detail-folder-chip:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(27, 111, 216, 0.15);
}

.detail-meta-chip.detail-folder-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.detail-folder-value {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.05rem;
}

.detail-folder-value .fa-folder {
  color: #f4c430;
  font-size: 1rem;
  flex-shrink: 0;
}

#detail-folder-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.detail-folder-edit-icon {
  font-size: 0.65rem;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: auto;
}

.detail-meta-chip.detail-folder-chip:hover .detail-folder-edit-icon {
  color: var(--accent);
}

.detail-scroll-body {
  flex: 1;
  overflow-y: auto;
  /* Never allow sideways scrolling inside the meal detail popup — any child
     that overflows (long words, wide controls) must wrap or shrink instead. */
  overflow-x: hidden;
  min-height: 0;
  padding: 0.625rem 1.5rem 0;
}

.detail-body {
  margin-bottom: 0.75rem;
}

.detail-body section {
  margin-bottom: 16px;
}

.detail-body h3 {
  margin: 0 0 0.9rem 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.detail-section {
  background: #ffffff;
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  line-height: 1.6;
  color: var(--text-main);
}

.detail-scale-section {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  padding: 1.1rem 1.25rem;
}

/* Toolbar row inside the ingredients card — no longer its own boxed
 * sub-panel, just a divider above the ingredient list. */
.scale-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 0.9rem;
  background: transparent;
  border-radius: 0;
  margin-bottom: 0.9rem;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
}

/* The ingredient list already lives inside the .detail-scale-section card,
 * so strip its own card chrome to avoid a box-in-a-box look. */
.detail-scale-section .detail-section {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.scale-control-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scale-control-row > label {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  width: 44px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scale-control-row .unit-system-select {
  /* min-width: 0 lets the select shrink below its long option text ("Imperial
     (oz, lb, cups, tsp, tbsp)") — without it the intrinsic width forces the
     popup wider than the screen on iPhone, making the whole meal detail
     scroll horizontally. */
  flex: 1;
  min-width: 0;
  max-width: 100%;
}

.scale-slider-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.scale-slider-group .scale-slider {
  flex: 1;
  min-width: 0;
}

.unit-system-select {
  padding: 7px 11px;
  border: 1.5px solid #d7e1ee;
  border-radius: 10px;
  background: #ffffff;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.unit-system-select:hover {
  border-color: var(--accent);
}

.unit-system-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.1);
}

.scale-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}

.scale-slider {
  flex: 1;
  min-width: 140px;
  height: 5px;
  border-radius: 999px;
  background: var(--ice-3);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.scale-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(11, 45, 80, 0.3);
  transition: transform 0.15s ease;
}

.scale-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

.scale-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(11, 45, 80, 0.3);
}

.scale-slider::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: var(--ice-3);
}

.scale-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.scale-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  box-sizing: border-box;
  font-weight: 600;
  color: var(--muted);
  font-size: 13px;
  min-width: 46px;
  text-align: center;
  background: white;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid #d0daea;
  flex-shrink: 0;
}

.scale-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  box-sizing: border-box;
  background: white;
  border: 1px solid #d0daea;
  color: var(--muted);
  padding: 0 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.scale-reset-btn:hover {
  background: #f3f7fd;
  border-color: #a0b8d8;
  color: #444;
}

.detail-section ul,
.detail-section ol {
  list-style-position: inside;
  margin-left: 0;
  padding-left: 0.35rem;
}

#detail-instructions,
#detail-ingredients {
  max-height: none;
  overflow-y: visible;
  white-space: normal;
}

.detail-section li {
  margin-bottom: 8px;
}

.detail-section p {
  margin: 0 0 10px 0;
}

.detail-section p:last-child {
  margin-bottom: 0;
}

/* Notes Section */
.notes-section {
  margin-top: 4px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 15px;
}

.notes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.notes-header h3 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}

.edit-notes-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
  font-size: 13px;
  transition: all 0.2s ease;
}

.edit-notes-btn:hover {
  background: rgba(27, 111, 216, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}

.notes-display {
  color: var(--text-main);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.notes-display.hidden {
  display: none;
}

.notes-edit-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
}

.notes-edit-area.hidden {
  display: none;
}

.notes-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #cddff3;
  border-radius: 8px;
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.notes-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.1);
}

.notes-buttons {
  display: flex;
  gap: 10px;
}

.btn-small {
  padding: 8px 14px;
  font-size: 13px;
  flex: 1;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  background: #f5f9ff;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -2px 8px rgba(8, 52, 99, 0.05);
}

#detail-family-actions:not(.hidden) {
  display: contents;
}

/* Every action button reads as one family — same shape, same color. Delete
 * lives here too (not visually singled out as danger) and sits inline with
 * the rest instead of being pushed off to a side. */
.detail-actions button,
.detail-actions .btn-family {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.55rem 1rem;
  border-radius: var(--btn-radius, 10px);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
  background: var(--primary-blue);
  color: #fff;
  border: none;
}

.detail-actions button:hover:not(:disabled),
.detail-actions .btn-family:hover:not(:disabled) {
  background: var(--primary-blue-hover);
  transform: translateY(-1px);
}

.detail-actions button:disabled,
.detail-actions .btn-family:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* Add to Calendar Modal */
#add-calendar-modal label {
  display: block;
  margin: 15px 0 8px 0;
  font-weight: 600;
  color: var(--text-header);
}

#add-calendar-modal input,
#add-calendar-modal select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cddff3;
  border-radius: 8px;
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  box-sizing: border-box;
  margin-bottom: 15px;
  background: #ffffff;
}

#add-calendar-modal input:focus,
#add-calendar-modal select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.1);
}

.meal-card-body {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.meal-folder {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 600;
}

.meal-folder-icon {
  color: #f4c430;
}

.meal-info {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
  line-height: 1.4;
}

.meal-card-footer {
  padding: 12px 15px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 8px;
}

/* Schedule buttons on meal cards — tinted ghost button on the blue palette */
.meal-card-sched-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid var(--border-subtle);
  background: #f7fbff;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #4a688f;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.meal-card-sched-btn:hover {
  background: #eaf4ff;
  border-color: rgba(27, 111, 216, 0.35);
  color: var(--accent);
}
.meal-card-compact .sched-btn-label {
  display: none;
}
.meal-card-compact .meal-card-sched-btn {
  flex: 0 0 auto;
  padding: 5px 8px;
  font-size: 13px;
}

/* Compact View Styles */
.compact-grid {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 9px;
}

.meal-card-compact {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  padding: 8px 9px;
  min-height: 120px;
}

.meal-card-compact:hover {
  box-shadow: 0 6px 14px rgba(8, 52, 99, 0.1);
  transform: translateY(-2px);
  border-color: rgba(27, 111, 216, 0.35);
}

.compact-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.compact-title-row {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.compact-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.meal-card-compact .meal-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.meal-card-compact .meal-type-badge.main {
  background: rgba(27, 111, 216, 0.2);
  color: #1b6fd8;
  border: 1px solid #1b6fd8;
}

.meal-card-compact .meal-type-badge.side {
  background: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
  border: 1px solid #2ecc71;
}

.meal-card-compact .meal-card-title {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  color: #22374d;
}

.meal-card-compact .meal-favorite-btn {
  background: #eef5ff;
  color: #2b69b6;
  width: 22px;
  height: 22px;
  font-size: 12px;
  margin-left: 0;
  flex-shrink: 0;
}

.meal-card-compact .meal-favorite-btn:hover {
  background: #e1efff;
}

.meal-card-compact .meal-favorite-btn.favorited {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.1);
}

.compact-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: 1px;
  padding-top: 6px;
  border-top: 1px solid #edf3fb;
}

.meal-card-compact .meal-folder {
  font-size: 9px;
  color: #6f7f91;
  margin-bottom: 0;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meal-card-compact .compact-folder-icon {
  color: #d2a90e;
  opacity: 0.95;
}

.meal-card-compact .serving-badge {
  margin: 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
}

.meal-card-compact .meal-move-btn {
  margin-top: 0;
  padding-top: 0;
  padding: 3px 8px;
  border: 1px solid #d1e0f2;
  background-color: #f8fbff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  color: #4272b9;
  transition: all 0.2s ease;
  flex-shrink: 0;
  line-height: 1;
}

.meal-card-compact .meal-move-btn:hover {
  background-color: #edf5ff;
  border-color: #b3ccef;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 2rem 0;
  margin: 1rem auto 0;
  max-width: 480px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}

.empty-state-title,
.empty-state-sub,
.empty-state p {
  padding: 0 1.25rem;
}

.empty-state p {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--muted);
}

.empty-state.hidden {
  display: none;
}

.empty-state-title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-header);
}

.empty-state-sub {
  margin: 0 0 1.25rem !important;
}

/* Modals */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

/* Confirm dialog must sit above all other modals, below toasts (10000) */
#confirm-modal {
  z-index: 2000;
}

.confirm-modal-icon-danger {
  color: #d94040;
}

.confirm-modal-icon-info {
  color: #1b6fd8;
}

.modal-content {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border-radius: 16px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(27, 111, 216, 0.14);
}

/* ── "Add a meal" family of popups ──────────────────────────────────────
 * Add A Meal, Add From Text/Link, Import (Photo/PDF), Describe a Meal,
 * Photo of a Dish. Matches the Create Event / Join Event / Create Meal
 * Poll dialog look on /plan (deeper layered shadow, tighter radius, bold
 * header, uppercase micro-labels) instead of the older generic
 * .modal-content look. Scoped to this class only so it doesn't touch
 * unrelated popups (e.g. Edit Meal) that share the same base classes. */
.modal-content.popup-refined {
  border-radius: 18px;
  border-color: var(--border-subtle, rgba(200, 215, 235, 0.6));
  box-shadow:
    0 30px 60px -24px rgba(15, 23, 42, 0.6),
    0 8px 24px -12px rgba(15, 23, 42, 0.35);
}

/* .edit-meal-content also backs unrelated popups (Edit Meal, Meal Detail)
   that don't carry .popup-refined, so the neutral background/border here is
   scoped to the compound class instead of touching the base rule below. */
.popup-refined.edit-meal-content {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
}

/* Flush-divider header, matching the Request Picks / Create Meal Poll
   .modal-header: no header close-X in this family — the escape hatch always
   lives in the footer bar below. */
.popup-refined .edit-meal-header,
.popup-refined .import-modal-header {
  padding: 1.1rem 1.35rem 0.95rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
}

.popup-refined .edit-meal-header h2,
.popup-refined .add-own-meal-header h2,
.popup-refined .import-modal-header h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-header);
}

/* Footer action bar, matching .form-dialog-foot. */
.popup-refined .modal-buttons {
  padding: 0.9rem 1.35rem;
  border-top: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  background: rgba(255, 255, 255, 0.55);
  gap: 0.6rem;
}

.popup-refined .form-group label {
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* ── Add a Meal modal ──
 * Flush icon+title header, mirroring the Create Meal Poll / Nutrition-tab
 * dialogs — replaces the old h2 + subtitle + full-size Cancel pill, which
 * ate a lot of vertical space before the card grid even started. */
.add-own-meal-content {
  max-width: 440px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  padding: 0 !important;
}

/* Close button (.btn-x, same as the dish picker's header) sits top-right,
   opposite the title group — the escape hatch lives in the header, not a
   separate footer bar. */
.add-own-meal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 1.1rem 1.35rem 0.95rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
}

.add-own-meal-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.add-own-meal-title-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(27, 111, 216, 0.12);
  color: #1b6fd8;
}

/* !important: plan.css's generic `h1,h2,h3,h4,h5` rule otherwise wins this
   fight (it sets font-weight/size too, and .lib-scope nesting doesn't
   reliably out-specificity a plain element-list selector in every engine). */
.add-own-meal-header h2 {
  margin: 0 !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: var(--text-header);
}

/* 2×2 card grid */
.add-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px 22px 0;
  margin-bottom: 18px;
}

/* Full-width Discover bar at the bottom of the Add A Meal popup */
.add-meal-discover-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 22px 18px;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid rgba(27, 111, 216, 0.18);
  background: rgba(27, 111, 216, 0.06);
  color: #1b6fd8;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.add-meal-discover-bar:hover {
  background: rgba(27, 111, 216, 0.12);
  border-color: rgba(27, 111, 216, 0.35);
}

.add-method-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 14px;
  border-radius: 14px;
  border: 1px solid rgba(27, 111, 216, 0.15);
  background: #fff;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  cursor: pointer;
  text-align: center;
  font-family: "Nunito", sans-serif;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.add-method-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(27, 111, 216, 0.14);
}

.add-method-card .method-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: background 0.22s ease;
}

.add-method-card .method-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.add-method-card .method-card-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-header);
  line-height: 1.2;
}

.add-method-card .method-card-subtitle {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}

/* Coming Soon badge */
.method-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #f0f4fa;
  color: #7a90ad;
  border: 1px solid #d6e4f5;
}

/* Disabled card */
.add-method-card.disabled {
  opacity: 0.52;
  cursor: not-allowed;
  pointer-events: none;
}

/* Color variants — Text (blue) */
.add-method-card.text .method-card-icon {
  background: rgba(27, 111, 216, 0.12);
  color: #1b6fd8;
}
.add-method-card.text:hover {
  border-color: rgba(27, 111, 216, 0.35);
  background: rgba(27, 111, 216, 0.03);
}

/* Color variants — Link (purple, matches the "special source" tint) */
.add-method-card.link .method-card-icon {
  background: rgba(124, 92, 214, 0.14);
  color: #6b46c1;
}
.add-method-card.link:hover {
  border-color: rgba(124, 92, 214, 0.35);
  background: rgba(124, 92, 214, 0.04);
  box-shadow: 0 12px 28px rgba(124, 92, 214, 0.14);
}

/* Color variants — Photo (amber, matches the "warning" tint) */
.add-method-card.photo .method-card-icon {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}
.add-method-card.photo:hover {
  border-color: rgba(217, 119, 6, 0.4);
  background: rgba(217, 119, 6, 0.04);
  box-shadow: 0 12px 28px rgba(217, 119, 6, 0.12);
}

/* Color variants — PDF (red, matches the "danger" tint) */
.add-method-card.pdf .method-card-icon {
  background: rgba(211, 47, 47, 0.1);
  color: var(--danger);
}
.add-method-card.pdf:hover {
  border-color: rgba(211, 47, 47, 0.35);
  background: rgba(211, 47, 47, 0.04);
  box-shadow: 0 12px 28px rgba(211, 47, 47, 0.12);
}

/* Color variants — Describe a Meal (emerald, "AI writes it for you") */
.add-method-card.describe .method-card-icon {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.add-method-card.describe:hover {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.04);
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.12);
}

/* Color variants — Photo of a Dish (pink, "AI recreates the plate") */
.add-method-card.dishphoto .method-card-icon {
  background: rgba(236, 72, 153, 0.12);
  color: #db2777;
}
.add-method-card.dishphoto:hover {
  border-color: rgba(236, 72, 153, 0.35);
  background: rgba(236, 72, 153, 0.04);
  box-shadow: 0 12px 28px rgba(236, 72, 153, 0.12);
}

/* ── AI quick-create modals (Describe a Meal / Photo of a Dish) ── */
.ai-accuracy-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0.25rem 0 0;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(217, 119, 6, 0.3);
  background: rgba(217, 119, 6, 0.07);
  color: #92400e;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
}
.ai-accuracy-note i {
  margin-top: 2px;
  flex-shrink: 0;
}

.dishphoto-capture-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 1.6rem 1rem;
  border: 2px dashed #c6d8ef;
  border-radius: 14px;
  background: #f7fbff;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dishphoto-capture-zone:hover {
  border-color: var(--accent);
  background: #f0f7ff;
}
.dishphoto-zone-icon {
  font-size: 1.6rem;
  color: var(--accent);
}
.dishphoto-zone-title {
  font-weight: 800;
  color: var(--text-header);
  font-size: 0.95rem;
}
.dishphoto-zone-sub {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
}

.dishphoto-preview {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0.75rem 0;
}
.dishphoto-preview:empty {
  margin: 0;
}
.dishphoto-thumb {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.08);
}
.dishphoto-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dishphoto-thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.65);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dishphoto-thumb-remove:hover {
  background: rgba(211, 47, 47, 0.9);
}

/* ── Import Media (Photo / PDF) modal ── */
.import-modal-content {
  position: relative;
  max-width: 620px;
}

.import-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}


/* Photo drop zone (scoped copy of upload.css .meal-drop-zone) */
.import-modal .meal-drop-zone {
  border: 2px dashed #7fb2f4;
  border-radius: 12px;
  padding: 26px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(180deg, #f9fcff 0%, #f2f8ff 100%);
  transition: background 0.2s ease, border-color 0.2s ease;
  color: #6b7c93;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.import-modal .meal-drop-zone:hover,
.import-modal .meal-drop-zone.drag-over {
  background: #edf5ff;
  border-color: #1b6fd8;
}

.import-modal .meal-drop-zone .fa-camera {
  font-size: 1.5rem;
  color: #1b6fd8;
}

/* Photo meal queue (scoped copy of upload.css queue styles) */
.import-modal .meal-queue-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0 0;
}

.import-modal .meal-queue-card {
  border: 1px solid #cde2ff;
  border-radius: 16px;
  padding: 14px 16px;
  background: #f8fbff;
}

.import-modal .meal-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.import-modal .meal-queue-label {
  font-weight: 800;
  font-size: 0.95rem;
  color: #083463;
}

.import-modal .remove-meal-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(12, 45, 84, 0.12);
  color: #355580;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.import-modal .remove-meal-btn:hover {
  background: rgba(180, 30, 50, 0.14);
  color: #8b1f2d;
}

.import-modal .meal-drop-zone--full {
  cursor: default;
  opacity: 0.55;
}

.import-modal .meal-drop-zone--full:hover {
  background: linear-gradient(180deg, #f9fcff 0%, #f2f8ff 100%);
  border-color: #7fb2f4;
}

.import-modal .meal-photo-grid {
  margin-bottom: 8px;
}

.import-modal .add-meal-btn {
  width: 100%;
  margin: 14px 0 0;
  padding: 13px;
  border: 2px dashed #7fb2f4;
  border-radius: 14px;
  background: transparent;
  color: #1b6fd8;
  font-family: "Nunito", sans-serif;
  font-size: 0.96rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.import-modal .add-meal-btn:hover:not(:disabled) {
  background: #edf5ff;
  border-color: #1b6fd8;
}

.import-modal .add-meal-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* PDF drop zone (scoped copy of upload.css .drop-zone) */
.import-modal .drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px dashed #7fb2f4;
  border-radius: 14px;
  padding: 40px 24px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  text-align: center;
  background: linear-gradient(180deg, #f9fcff 0%, #f2f8ff 100%);
  margin-bottom: 10px;
}

.import-modal .drop-zone:hover,
.import-modal .drop-zone.drag-over {
  background: #edf5ff;
  border-color: #1b6fd8;
}

.import-modal .import-pdf-drop .fa-file-pdf {
  font-size: 2.6rem;
  color: #c62828;
}

.import-modal .import-pdf-drop .drop-label {
  font-weight: 800;
  font-size: 1rem;
  color: #1a3558;
}

.import-modal .import-pdf-drop .drop-hint {
  font-size: 0.82rem;
  color: #6b7c93;
}

/* Photo previews */
.import-modal .preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.import-modal .preview-grid:empty {
  display: none;
}

.import-modal .preview-item {
  position: relative;
  border-radius: 10px;
  border: 1px solid #d8e8ff;
  background: #fff;
  overflow: hidden;
}

.import-modal .preview-item img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
}

.import-modal .preview-meta {
  font-size: 0.74rem;
  color: #476793;
  padding: 5px 8px;
  border-top: 1px solid #e6f0ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.import-modal .preview-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(10, 33, 61, 0.88);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.import-modal .preview-remove-btn:hover {
  background: rgba(8, 26, 49, 0.95);
}

.import-modal .meal-photo-count {
  font-size: 0.82rem;
  color: #6b7c93;
  margin-top: 4px;
}

.import-modal .meal-photo-count:empty {
  display: none;
}

/* Selected PDF chip */
.import-pdf-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f0f7ff;
  border: 1.5px solid #a8d0f5;
  border-radius: 12px;
}

.import-pdf-selected .fa-file-pdf {
  font-size: 2rem;
  color: #c62828;
  flex-shrink: 0;
}

.import-pdf-info {
  flex: 1;
  min-width: 0;
}

.import-pdf-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: #1a3558;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.import-pdf-size {
  font-size: 0.8rem;
  color: #6b7c93;
  margin-top: 2px;
}

.import-pdf-clear {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(12, 45, 84, 0.1);
  color: #355580;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.import-pdf-clear:hover {
  background: rgba(180, 30, 50, 0.14);
  color: #8b1f2d;
}

/* Inline error banner */
.import-error {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: #b3261e;
  font-size: 0.9rem;
  font-weight: 700;
}

/* "An import is already in progress" note + disabled submit (one at a time) */
.import-busy-note {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.25);
  color: #b45309;
  font-size: 0.9rem;
  font-weight: 700;
}

#import-submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Meal picker (multi-recipe PDFs) */
.import-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.import-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(27, 111, 216, 0.18);
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--text-header);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.import-picker-item:hover {
  background: rgba(27, 111, 216, 0.05);
  border-color: rgba(27, 111, 216, 0.4);
  transform: translateY(-1px);
}

.import-picker-item i {
  color: var(--primary-blue);
}

/* Review step field rows */
.import-review-card .field-row {
  display: flex;
  gap: 14px;
}

.import-review-card .field-row .form-group {
  flex: 1;
  min-width: 0;
}

/* Spinner overlay scoped to the modal */
.import-spinner {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(2px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.import-spinner .loading-popup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1px solid #d7e9ff;
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(8, 52, 99, 0.2);
  color: #1b6fd8;
  font-weight: 800;
  font-size: 1.02rem;
  padding: 16px 22px;
}

@media (max-width: 600px) {
  .import-review-card .field-row {
    flex-direction: column;
    gap: 0;
  }
}


/* ── Create Recipe modal — unified controls strip ── */
.create-recipe-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 10px 20px;
  background: #f7faff;
  border-top: 1px solid rgba(200, 215, 235, 0.7);
  border-bottom: 1px solid rgba(200, 215, 235, 0.7);
  flex-shrink: 0;
}

.create-recipe-type-group,
.type-select-group {
  display: flex;
  gap: 6px;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.create-recipe-type-group.type-group--irrelevant {
  opacity: 0.28;
  pointer-events: none;
  filter: grayscale(0.7);
}

.type-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1.5px solid #cddff3;
  background: #fff;
  color: #4a6080;
  font-size: 12px;
  font-weight: 700;
  font-family: "Nunito", sans-serif;
  cursor: pointer;
  transition: all 0.18s ease;
}

.type-select-btn:hover {
  border-color: #1b6fd8;
  color: #1b6fd8;
}

.type-select-btn.active {
  background: #1b6fd8;
  border-color: #1b6fd8;
  color: #fff;
  box-shadow: 0 3px 10px rgba(27, 111, 216, 0.2);
}

.modal-content h2 {
  margin: 0 0 20px 0;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text-header);
}

.modal-content p {
  margin: 0 0 20px 0;
  color: var(--text-main);
  font-size: 14px;
}

.folder-input {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid #d7e1ee;
  border-radius: 10px;
  font-size: 14px;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
  background: #ffffff;
  color: var(--text-main);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Create / Edit Folder modals — compact icon-led header, mirrors the
 * .add-own-meal-header / .manage-tags-header flush-header pattern. */
.folder-modal-content {
  max-width: 420px;
}

.folder-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.folder-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(27, 111, 216, 0.1);
  color: var(--accent);
  font-size: 18px;
}

.folder-modal-header-text h2 {
  margin: 0 0 2px;
  font-size: 1.2rem;
}

.folder-modal-content .folder-modal-subtitle {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.folder-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.folder-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.folder-modal-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.folder-modal-body .folder-reorder-row {
  margin: 0;
}

.folder-input:hover {
  border-color: #becdde;
}

.folder-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(27, 111, 216, 0.3));
}

.folder-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  max-height: 300px;
  overflow-y: auto;
}

.folder-option {
  padding: 10px 12px;
  border: 1px solid #d6e6fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #f8fbff;
  text-align: left;
  font-size: 14px;
  color: var(--text-main);
}

.folder-option:hover {
  background-color: #e9f3ff;
  border-color: #bfd8f4;
}

.folder-option.selected {
  background-color: var(--primary-blue);
  color: white;
  border-color: var(--primary-blue);
}

.modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

/* .btn-primary / .btn-secondary / .btn-danger now live in global.css
 * (single source of truth). The dead .btn-green placeholder was removed. */

/* Scrollbar Styling — subtle, tokenized to the blue palette */
.folders-sidebar::-webkit-scrollbar,
.meals-main::-webkit-scrollbar,
.folder-options::-webkit-scrollbar,
.detail-scroll-body::-webkit-scrollbar,
.edit-meal-body::-webkit-scrollbar,
.create-recipe-body::-webkit-scrollbar,
.manage-tags-scroll-area::-webkit-scrollbar {
  width: 8px;
}

.folders-sidebar::-webkit-scrollbar-track,
.meals-main::-webkit-scrollbar-track,
.folder-options::-webkit-scrollbar-track,
.detail-scroll-body::-webkit-scrollbar-track,
.edit-meal-body::-webkit-scrollbar-track,
.create-recipe-body::-webkit-scrollbar-track,
.manage-tags-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}

.folders-sidebar::-webkit-scrollbar-thumb,
.meals-main::-webkit-scrollbar-thumb,
.folder-options::-webkit-scrollbar-thumb,
.detail-scroll-body::-webkit-scrollbar-thumb,
.edit-meal-body::-webkit-scrollbar-thumb,
.create-recipe-body::-webkit-scrollbar-thumb,
.manage-tags-scroll-area::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 999px;
}

.folders-sidebar::-webkit-scrollbar-thumb:hover,
.meals-main::-webkit-scrollbar-thumb:hover,
.folder-options::-webkit-scrollbar-thumb:hover,
.detail-scroll-body::-webkit-scrollbar-thumb:hover,
.edit-meal-body::-webkit-scrollbar-thumb:hover,
.create-recipe-body::-webkit-scrollbar-thumb:hover,
.manage-tags-scroll-area::-webkit-scrollbar-thumb:hover {
  background: rgba(27, 111, 216, 0.4);
}

/* Edit Meal Modal Content */
.edit-meal-content {
  max-width: 600px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid rgba(27, 111, 216, 0.14);
}

.edit-meal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.edit-meal-header h2 {
  margin: 0;
  color: var(--text-header);
  font-size: 1.25rem;
}

/* Create Recipe modal overrides the shared header */
#create-recipe-modal .edit-meal-content {
  height: 84vh;
}

#create-recipe-modal .edit-meal-header {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 0;
  padding: 1.1rem 1.35rem 0.95rem;
  flex-shrink: 0;
  /* No border here — .create-recipe-controls right below already supplies a
     top divider, so this avoids a doubled line. */
  border-bottom: none;
}

#create-recipe-modal .edit-meal-header h2 {
  font-size: 1.2rem;
}

/* Icon + title, close button — mirrors the .add-own-meal-header pattern so
 * the modal reads as a complete header instead of a lone left-aligned h2. */
.create-recipe-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Two labeled button clusters (meal type / add method) instead of two
 * unlabeled pill rows — same micro-label treatment as .filter-group-label. */
.create-recipe-control-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.create-recipe-control-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.create-recipe-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
}

.modal-back-btn {
  background: #f3f6fb;
  border: 1px solid #d7e3f3;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  color: var(--text-header);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.modal-back-btn:hover {
  background: #eaf1fb;
  border-color: #b7cce8;
  transform: scale(1.05);
}

.edit-meal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  margin-bottom: 0;
}

/* ── Edit Meal modal ─────────────────────────────────────────────────────
 * Sized and framed to match .meal-detail-content exactly (via the shared
 * class added in the markup) so editing a meal feels like the same surface
 * as viewing it, not a smaller popup stacked on top of it. Only the header/
 * body chrome is retuned here to match the detail view's proportions. */
#edit-meal-modal {
  /* The detail modal underneath already supplies the dim/blurred backdrop —
   * stacking a second one made the background read as double-darkened. */
  background: transparent;
  backdrop-filter: none;
}

#edit-meal-modal .edit-meal-header {
  padding: 0.6rem 1.25rem 0.75rem;
}

#edit-meal-modal .edit-meal-header h2 {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

#edit-meal-modal .edit-meal-body {
  padding: 0.75rem 1.5rem 1.1rem;
}

#edit-meal-modal .modal-buttons {
  background: #f5f9ff;
  box-shadow: 0 -2px 8px rgba(8, 52, 99, 0.05);
}

.ing-label-row {
  margin-bottom: 0.9rem;
}

.ing-label-row h3 {
  margin: 0;
}

.edit-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.edit-fields-grid .form-group {
  margin-bottom: 0;
}

.edit-fields-grid + #edit-nutrient-group {
  margin-top: 16px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--text-header);
  font-size: 14px;
}

.edit-input,
.edit-textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid #d7e1ee;
  border-radius: 10px;
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  box-sizing: border-box;
  resize: none;
  background: #ffffff;
  color: var(--text-main);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.edit-input:hover,
.edit-textarea:hover {
  border-color: #becdde;
}

.edit-input:focus,
.edit-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(27, 111, 216, 0.3));
}

.edit-textarea {
  line-height: 1.5;
  color: var(--text-main);
}

/* ── Ingredient row editor ─────────────────────────────────────────────── */

.ing-row-header {
  display: flex;
  gap: 8px;
  padding: 0 0 4px 0;
  align-items: center;
}

.ing-col-label {
  width: 72px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ing-col-label:nth-child(2) {
  width: 100px;
}

.ing-col-label.ing-col-item {
  flex: 1;
  width: auto;
}

.edit-ingredients-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.ing-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ing-row .ing-qty {
  width: 72px;
  flex-shrink: 0;
  padding: 9px 8px;
  min-width: 0;
  resize: none;
}

.ing-row .ing-unit {
  width: 100px;
  flex-shrink: 0;
  padding: 9px 8px;
  min-width: 0;
  resize: none;
}

.ing-row .ing-item {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  resize: none;
}

/* Read-only nutrient breakdown chips in the meal detail view */
.detail-nutrients {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.detail-nutrient-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(27, 111, 216, 0.16);
  border-radius: 999px;
  background: rgba(27, 111, 216, 0.05);
  font-size: 13px;
}

.detail-nutrient-chip .detail-nutrient-name {
  color: var(--muted);
  font-weight: 700;
}

.detail-nutrient-chip .detail-nutrient-val {
  font-weight: 800;
  color: var(--text-header);
}

/* Nutrient breakdown editor (shared by create + edit meal forms) */
.nutrient-fields-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 4px 0 6px;
}

.nutrient-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.nutrient-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nutrient-row .nutrient-label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #2c2c2c);
}

.nutrient-row .nutrient-value {
  width: 96px;
  flex-shrink: 0;
  padding: 9px 8px;
  min-width: 0;
  text-align: right;
}

.nutrient-row .nutrient-unit {
  width: 40px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--muted);
}

.nutrient-add-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}

.nutrient-add-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nutrient-add-form .nutrient-add-name {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
}

.nutrient-add-form .nutrient-add-unit {
  width: 72px;
  flex-shrink: 0;
  padding: 9px 6px;
}

.nutrient-add-form .nutrient-add-confirm {
  flex-shrink: 0;
  padding: 9px 16px;
}

.edit-instructions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.step-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.step-number {
  flex-shrink: 0;
  min-width: 58px;
  padding: 9px 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  font-family: "Nunito", sans-serif;
  line-height: 1.4;
}

.step-row .step-text {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  resize: none;
  overflow: hidden;
  line-height: 1.4;
}

.ing-delete-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #e5d5d5;
  border-radius: 50%;
  background: #fff8f8;
  color: #b94040;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ing-delete-btn:hover {
  background: #fde8e8;
  border-color: #c0392b;
  color: #c0392b;
}

.add-ingredient-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px dashed #a8c8f0;
  border-radius: 8px;
  background: #f3f8ff;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  font-family: "Nunito", sans-serif;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.add-ingredient-btn:hover {
  background: #e8f1fb;
  border-color: var(--accent);
}

/* ── Estimate Calories (Edit Meal modal) ─────────────────────────────────── */
.estimate-calories-btn {
  margin-top: 2px;
  align-self: flex-start;
}

.estimate-calories-btn:disabled {
  opacity: 0.7;
  cursor: default;
}

.estimate-calories-btn .spinner {
  margin: 0;
  border-color: var(--accent);
  border-top-color: transparent;
}

/* ── Ingredient scale control ──────────────────────────────────────────── */

.ing-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ing-scale-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--ice-2);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  font-family: "Nunito", sans-serif;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ing-scale-toggle:hover {
  background: var(--ice-3);
  border-color: var(--accent);
}

.ing-scale-toggle[aria-expanded="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.ing-scale-panel {
  margin: 4px 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--ice-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.ing-scale-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.ing-scale-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-header);
  font-family: "Nunito", sans-serif;
}

.ing-scale-title i {
  color: var(--accent);
}

.ing-scale-value {
  min-width: 48px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  font-family: "Nunito", sans-serif;
  text-align: center;
}

.ing-scale-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--ice-3);
  outline: none;
  cursor: pointer;
  margin: 2px 0 12px;
  padding: 0;
  border: none;
}

.ing-scale-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(11, 45, 80, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.ing-scale-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

.ing-scale-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(11, 45, 80, 0.3);
  cursor: pointer;
}

.ing-scale-slider::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: var(--ice-3);
}

.ing-scale-slider:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ing-scale-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.ing-scale-preset {
  flex: 1;
  padding: 6px 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: #fff;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  font-family: "Nunito", sans-serif;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ing-scale-preset:hover {
  background: var(--ice-2);
  border-color: var(--accent);
  color: var(--accent);
}

.ing-scale-note {
  display: flex;
  gap: 7px;
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.ing-scale-note i {
  margin-top: 2px;
  color: var(--accent);
  flex-shrink: 0;
}

.ing-scale-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ing-scale-btn-secondary,
.ing-scale-btn-primary {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: "Nunito", sans-serif;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.ing-scale-btn-secondary {
  border: 1px solid var(--border-subtle);
  background: #fff;
  color: var(--muted);
}

.ing-scale-btn-secondary:hover {
  background: var(--ice-2);
  color: var(--text-main);
}

.ing-scale-btn-primary {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
}

.ing-scale-btn-primary:hover:not(:disabled) {
  background: #155bb5;
  border-color: #155bb5;
}

.ing-scale-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Pending (unconfirmed) scaled quantity highlight */
.ing-row .ing-qty.ing-qty-scaled {
  border-color: var(--accent);
  background: #eef6ff;
  box-shadow: 0 0 0 2px rgba(27, 111, 216, 0.12);
}

@media (max-width: 420px) {
  .library-container {
    height: auto;
    overflow-y: auto;
  }

  .library-content {
    overflow: visible;
  }

  .ing-row-header {
    display: none;
  }

  .ing-row {
    flex-wrap: wrap;
  }

  .ing-row .ing-qty {
    width: calc(50% - 4px);
    flex-shrink: 1;
  }

  .ing-row .ing-unit {
    width: calc(50% - 4px);
    flex-shrink: 1;
  }

  .ing-row .ing-item {
    flex: 1 1 calc(100% - 38px);
  }
}

/* ─────────────────────────────────────────────────────────────────────── */

/* Method Toggle */
.method-toggle-container {
  display: flex;
  padding: 4px;
  background: rgba(27, 111, 216, 0.07);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  gap: 3px;
}

.method-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  font-family: "Nunito", sans-serif;
  color: var(--muted);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.method-toggle-btn:hover {
  color: var(--accent);
}

.method-toggle-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(27, 111, 216, 0.25);
}

.create-method-section {
  display: block;
}

.create-method-section.hidden {
  display: none;
}

.method-description {
  color: var(--muted);
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 1.5;
}

/* Loading Spinner — used by discover.html (which loads this file directly,
   unscoped) for its own self-contained ring divs. Deliberately excluded from
   the .lib-scope copy in build-plan-library-css.js: plan.css defines its own
   incompatible .loading-spinner (a flex container wrapping a nested
   .spinner-icon ring) for #loading-modal, and nothing in the embedded Library
   tab creates a bare .loading-spinner element — scoping this in collided with
   plan.css's version and broke #loading-modal's spinner. */
.loading-spinner {
  border: 4px solid var(--accent);
  border-top-color: #ffffff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.85s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
  .filter-panel {
    left: 0;
    right: 0;
    width: auto;
    transform-origin: top center;
  }

  .filter-panel::before {
    right: 30px;
  }

  .filter-panel.is-open {
    grid-template-columns: 1fr;
    gap: 5px;
    max-height: calc(100dvh - 190px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .library-container {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    overflow-y: auto;
  }

  .library-content {
    flex-direction: column;
    overflow: visible;
  }

  .folders-sidebar {
    flex: 0 0 auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    max-height: none;
    padding: 12px;
    overflow: hidden;
  }

  .sidebar-header {
    margin-bottom: 8px;
  }

  .folders-list {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    min-height: 36px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .create-folder-btn {
    line-height: 1;
  }

  .folder-item {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 13px;
    flex-shrink: 0;
  }

  .meals-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
  }

  .meals-main {
    padding: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .header-top {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 8px;
  }

  .library-header {
    padding: 10px 12px 8px;
  }

  .library-title {
    font-size: 20px;
  }

  .library-subtitle {
    display: none;
  }

  .header-actions {
    width: 100%;
    align-items: center;
    min-width: 0;
    gap: 6px;
  }

  .header-utility-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .header-primary-actions {
    width: 100%;
    justify-content: stretch;
  }

  .back-btn,
  .manage-tags-btn {
    width: 100%;
    text-align: center;
    font-size: 12px;
    min-height: 36px;
    padding: 0 10px;
  }

  .search-container {
    width: 100%;
  }

  .library-controls-row {
    gap: 6px;
  }

  .search-field {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
  }

  .header-control-buttons {
    gap: 0;
    min-height: 38px;
  }

  .filter-toggle-btn,
  .view-toggle-btn {
    font-size: 12px;
  }

  .active-filter-summary {
    margin-bottom: 0;
  }

  .search-input {
    font-size: 14px;
    min-height: 0;
    padding: 0;
  }

  .filter-panel {
    padding: 7px;
  }

  .upload-shortcut {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 6px;
    margin: 0;
    padding: 8px 10px;
  }

  .upload-shortcut-left {
    width: 100%;
    flex: 1;
    min-width: 0;
  }

  .upload-shortcut-btn {
    align-self: flex-start;
    min-height: 36px;
  }

  .upload-shortcut-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .upload-shortcut-text h3 {
    font-size: 15px;
  }

  .upload-shortcut-text p {
    font-size: 12px;
  }

  .upload-shortcut-btn {
    width: auto;
    flex-shrink: 0;
  }

  .tabs-container {
    gap: 8px;
    padding: 0 0 8px;
    margin-bottom: 0;
  }

  .tab-btn {
    padding: 8px 12px;
    font-size: 14px;
  }

  .meal-type-tabs {
    gap: 6px;
    padding: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .meal-type-btn {
    padding: 6px 12px;
    font-size: 12px;
    margin-bottom: 8px;
    flex-shrink: 0;
  }

  .meal-card {
    border-radius: 8px;
  }

  .meal-card-header {
    padding: 12px;
    min-height: 50px;
  }

  .meal-card-title {
    font-size: 14px;
  }

  .meal-card-body {
    padding: 12px;
  }

  .meal-card-footer {
    padding: 10px 12px;
    gap: 6px;
  }

  .meal-action-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .modal-content {
    max-width: 90%;
    padding: 20px;
  }

  .modal-content.meal-detail-content {
    max-width: 90vw;
    max-height: 95vh;
  }

  .detail-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding: 0.65rem 1.1rem 0.4rem;
  }

  .detail-scroll-body {
    padding: 0.625rem 1.25rem 0;
  }

  .detail-title-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .detail-actions {
    padding: 0.7rem 1rem;
  }

  /* Compact view optimizations for tablet */
  .compact-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .meal-card-compact {
    padding: 8px;
    min-height: 114px;
  }

  .compact-header {
    gap: 6px;
  }

  .compact-meta-row {
    gap: 6px;
  }

  .compact-footer {
    gap: 6px;
  }

  .meal-card-compact .meal-move-btn {
    padding: 5px 8px;
    font-size: 10px;
  }
}

@media (max-width: 640px) {
  .header-actions {
    gap: 6px;
  }

  .back-btn,
  .manage-tags-btn {
    font-size: 12px;
    padding: 6px 10px;
  }

  .meal-type-tabs {
    padding: 0;
    gap: 4px;
  }

  .meal-type-btn {
    padding: 5px 10px;
    font-size: 11px;
  }

  .meals-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .compact-grid {
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  }

  .meal-card {
    border-radius: 6px;
  }

  .meal-card-header {
    padding: 10px;
    min-height: 45px;
  }

  .meal-favorite-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  .meal-card-body {
    padding: 10px;
  }

  .meal-info {
    font-size: 12px;
  }

  .meal-folder {
    font-size: 11px;
  }

  .meal-card-footer {
    padding: 8px 10px;
  }

  .meal-action-btn {
    padding: 5px 8px;
    font-size: 11px;
  }

  .meal-card-compact {
    padding: 7px;
  }

  .meal-card-compact .meal-card-title {
    font-size: 11px;
  }

  .meal-card-compact .meal-folder {
    font-size: 8px;
  }

  .serving-badge {
    padding: 4px 10px;
    font-size: 11px;
  }

  .serving-info-display {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .library-container {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    height: -webkit-fill-available;
  }

  .library-header {
    padding: 6px 8px 5px;
  }

  .library-title {
    font-size: 16px;
  }

  .header-top {
    gap: 4px;
    margin-bottom: 4px;
  }

  .header-actions {
    width: 100%;
    gap: 4px;
  }

  .header-utility-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .header-primary-actions {
    width: 100%;
    justify-content: stretch;
  }

  .back-btn,
  .manage-tags-btn {
    width: auto;
    min-height: 34px;
    padding: 0 8px;
    font-size: 11px;
  }

  .header-primary-actions .back-btn {
    width: 100%;
    min-height: 34px;
    font-size: 11px;
    padding: 0 10px;
  }

  .header-secondary,
  .library-controls-row {
    gap: 4px;
  }

  #back-btn,
  #manage-tags-btn {
    justify-content: center;
    gap: 0;
    min-height: 34px;
    padding-left: 0;
    padding-right: 0;
  }

  #back-btn .mobile-control-label,
  #manage-tags-btn .mobile-control-label,
  #filter-toggle-btn .mobile-control-label,
  #view-toggle-btn .mobile-control-label {
    display: none;
  }

  #back-btn i,
  #manage-tags-btn i,
  #filter-toggle-btn i,
  #view-toggle-btn i {
    font-size: 14px;
    margin: 0;
  }

  .search-container {
    margin-bottom: 0;
  }

  .search-field {
    min-height: 36px;
    padding: 0 10px;
    gap: 8px;
    border-radius: 10px;
  }

  .search-input {
    font-size: 13px;
    min-height: 0;
    padding: 0;
  }

  .header-control-buttons {
    gap: 0;
    min-height: 36px;
  }

  .filter-toggle-btn,
  .view-toggle-btn {
    font-size: 11px;
  }

  .active-filter-summary {
    display: none;
  }

  .filter-panel {
    padding: 6px;
    width: calc(100vw - 16px);
    right: 0;
    left: 0;
    border-radius: 12px;
  }

  .filter-panel.is-open {
    padding: 6px;
    gap: 4px;
    max-height: calc(100dvh - 170px);
  }

  .filter-panel::before {
    right: 22px;
  }

  .upload-shortcut {
    display: none;
  }

  .add-own-upload-link {
    display: inline-flex;
  }

  .tabs-container {
    gap: 6px;
    padding: 0 0 6px;
    margin-bottom: 0;
  }

  .tab-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .meal-type-tabs {
    padding: 0;
    gap: 4px;
    overflow-x: auto;
  }

  .meal-type-btn {
    padding: 4px 8px;
    font-size: 10px;
    margin-bottom: 6px;
    flex-shrink: 0;
  }

  .folders-sidebar {
    max-height: none;
    padding: 8px;
  }

  .sidebar-header {
    margin-bottom: 8px;
  }

  .sidebar-header h2 {
    font-size: 14px;
  }

  .create-folder-btn {
    width: 24px;
    height: 24px;
    font-size: 16px;
  }

  .folder-item {
    padding: 6px 10px;
    font-size: 12px;
  }

  .meals-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .compact-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .meals-main {
    padding: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .meal-card {
    border-radius: 6px;
  }

  .meal-card-header {
    padding: 10px;
    min-height: 50px;
    flex-direction: row;
    gap: 8px;
  }

  .meal-card-title {
    font-size: 13px;
  }

  .meal-favorite-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
    margin-left: auto;
  }

  .meal-type-badge {
    padding: 3px 8px;
    font-size: 10px;
    margin: 0 4px;
  }

  .meal-card-body {
    padding: 10px;
  }

  .meal-info {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .meal-folder {
    font-size: 10px;
    margin-bottom: 8px;
  }

  .meal-card-footer {
    padding: 8px 10px;
    gap: 4px;
  }

  .meal-action-btn {
    padding: 5px 6px;
    font-size: 10px;
  }

  .meal-card-compact {
    padding: 6px;
  }

  .compact-header {
    gap: 6px;
  }

  .compact-title-row {
    gap: 6px;
  }

  .compact-meta-row {
    gap: 4px;
    align-items: center;
  }

  .meal-card-compact .meal-card-title {
    font-size: 10px;
  }

  .meal-card-compact .meal-type-badge {
    padding: 2px 5px;
    font-size: 8px;
    margin: 0;
  }

  .meal-card-compact .meal-favorite-btn {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .compact-footer {
    gap: 6px;
  }

  .meal-card-compact .meal-folder {
    font-size: 7px;
  }

  .meal-card-compact .meal-move-btn {
    width: auto;
    padding: 3px 5px;
    font-size: 8px;
  }

  .modal-content {
    max-width: 95%;
    width: 100%;
    padding: 15px;
  }

  .modal {
    padding: 10px;
  }

  .modal-content h2 {
    font-size: 16px;
  }

  .modal-content p {
    font-size: 13px;
  }

  .btn-primary,
  .btn-secondary,
  .btn-danger {
    padding: 8px 12px;
    font-size: 12px;
  }

  .modal-buttons {
    gap: 6px;
  }

  .modal-content.meal-detail-content {
    max-width: 100vw;
    max-height: 95vh;
  }

  .detail-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    padding: 0.5rem 0.85rem 0.35rem;
  }

  .detail-scroll-body {
    padding: 0.5rem 1rem 0;
  }

  .detail-title-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .detail-header h2 {
    font-size: 16px;
  }

  /* Two-per-row instead of one long stack — keeps the footer compact on
   * phones no matter how many action buttons are visible. */
  .detail-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 0.6rem 0.75rem;
  }

  .detail-actions button,
  .detail-actions .btn-family {
    width: 100%;
    padding: 0.5rem 0.5rem;
    font-size: 12px;
  }

  .serving-badge {
    padding: 3px 8px;
    font-size: 10px;
  }

  .serving-info-display {
    font-size: 12px;
    gap: 4px;
  }

  .serving-base {
    font-size: 12px;
  }

  .serving-scaled {
    font-size: 11px;
    padding-left: 6px;
    border-left: 2px solid #d4a5e0;
  }

  .empty-state {
    padding: 40px 15px;
    font-size: 14px;
  }
}

/* View Toggle Button */
.view-toggle-btn {
  margin-left: 0;
}

button#view-toggle-btn {
  position: relative;
  top: unset;
  right: unset;
  cursor: pointer;
  border: 1px solid transparent;
}

/* ==============================
   TAG SYSTEM STYLES
   ============================== */

/* Fixed palette colors for tags (see TAG_COLORS in tag-controller.js, mirrors
   window.AvatarStandard.COLORS) — tag.color is always one of these 8 hex
   values, so background+text can be static classes instead of style="". */
.tag-color-6366f1 { background: #6366f1; color: #ffffff; }
.tag-color-0ea5e9 { background: #0ea5e9; color: #ffffff; }
.tag-color-10b981 { background: #10b981; color: #ffffff; }
.tag-color-f59e0b { background: #f59e0b; color: #1a1a2e; }
.tag-color-ef4444 { background: #ef4444; color: #ffffff; }
.tag-color-8b5cf6 { background: #8b5cf6; color: #ffffff; }
.tag-color-ec4899 { background: #ec4899; color: #ffffff; }
.tag-color-14b8a6 { background: #14b8a6; color: #ffffff; }

/* Tag Pills (used on cards, detail modal, filter panel) */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.4;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.tag-pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.15);
  color: inherit;
  font-size: 10px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.15s ease;
}

.tag-pill-remove:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Tags container on meal cards */
.meal-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.meal-card-tags .tag-pill {
  font-size: 10px;
  padding: 2px 8px;
}

/* Tags container - compact card */
.compact-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

.compact-tags .tag-pill {
  font-size: 9px;
  padding: 1px 6px;
}

/* Tags section in detail modal */
.detail-tags-section {
  margin-top: 8px;
}

.detail-tags-section-top {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  padding: 1rem 1.1rem;
  margin-bottom: 18px;
  position: relative;
}

.detail-tags-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.detail-tags-header h3 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}

.detail-tags-hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.detail-tags-trigger {
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: #ffffff;
  min-height: 46px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.detail-tags-trigger:hover,
.detail-tags-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.12);
}

.detail-tags-plus {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #eef4fb;
  color: #2b5d8f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.detail-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0;
  min-height: 26px;
  align-items: center;
}

.detail-tags-empty {
  font-size: 13px;
  font-weight: 700;
  color: #7388a1;
}

.detail-tag-picker {
  margin-top: 10px;
  border: 1px solid #cfe0f4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(8, 52, 99, 0.13);
  overflow: hidden;
}

.detail-tag-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #e3edf8;
  color: #6f859f;
}

.detail-tag-search {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #27496d;
  font-family: "Nunito", sans-serif;
}

.tag-autocomplete-list {
  max-height: 220px;
  overflow-y: auto;
}

.tag-picker-item {
  width: 100%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: "Nunito", sans-serif;
  transition: background 0.1s ease, color 0.1s ease;
}

.tag-picker-item-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tag-picker-item:hover {
  background: #f0f6ff;
}

.tag-picker-item.selected {
  background: #e8f2ff;
  color: #114276;
}

.tag-picker-state {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #557da7;
}

.tag-picker-item.selected .tag-picker-state {
  color: #1b6fd8;
}

.tag-picker-empty {
  padding: 12px;
  font-size: 13px;
  color: #6e8198;
  font-weight: 700;
}

.tag-autocomplete-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Mass Add method card ──────────────────────────────────────────────────── */
.add-method-card.mass-add .method-card-icon {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.add-method-card.mass-add:hover {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.04);
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.12);
}

/* ── Mass Add modal ────────────────────────────────────────────────────────── */
.mass-add-content {
  max-width: 640px;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  overflow: hidden;
}

.mass-add-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.mass-add-input-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.mass-add-textarea {
  min-height: 220px;
  resize: vertical;
}

/* Progress label in review header */
.mass-add-progress-wrap {
  flex: 1;
}

.mass-add-progress-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(27, 111, 216, 0.09);
  color: #1b6fd8;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Skip button */
.mass-add-skip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9px;
  border: 1px solid var(--border-subtle);
  background: #f7fbff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: "Nunito", sans-serif;
}
.mass-add-skip-btn:hover {
  background: #fff1f2;
  border-color: #fca5a5;
  color: #dc2626;
}
.mass-add-skip-btn.skipped {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* 3-column meta row */
.mass-add-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* Prev / Next / Save All button row */
.mass-add-nav-buttons {
  justify-content: space-between;
}
.mass-add-nav-buttons .btn-primary,
.mass-add-nav-buttons .btn-secondary {
  min-width: 100px;
}

/* Success panel */
.mass-add-success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 32px 40px;
  gap: 16px;
}

.mass-add-success-icon {
  font-size: 56px;
  color: #22c55e;
  line-height: 1;
}

.mass-add-success-content h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-header);
  margin: 0;
}

.mass-add-success-body {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}

.mass-add-renamed-list {
  background: #f7fbff;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px 16px;
  width: 100%;
  max-width: 360px;
  text-align: left;
}

.mass-add-renamed-list p {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-header);
}

.mass-add-renamed-list ul {
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 13px;
  color: var(--muted);
  list-style: disc;
}

.mass-add-renamed-list li {
  margin-bottom: 4px;
}

@media (max-width: 520px) {
  .mass-add-meta-row {
    grid-template-columns: 1fr 1fr;
  }
  .mass-add-nav-buttons .btn-primary,
  .mass-add-nav-buttons .btn-secondary {
    min-width: 80px;
    font-size: 13px;
    padding: 8px 14px;
  }
}

/* Tag Selector (edit/create modals) */
.tag-selector {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 6px;
  margin-top: 6px;
  padding-bottom: 3px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.tag-selector-pill {
  display: inline-flex;
  flex: 0 0 auto;
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s ease;
  opacity: 0.5;
}

.tag-selector-pill.selected {
  opacity: 1;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.tag-selector-pill:hover {
  opacity: 0.85;
}

.tag-selector-pill.selected:hover {
  opacity: 1;
}

/* Manage Tags Modal */
.manage-tags-content {
  max-width: 500px;
  height: min(560px, 80vh);
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid rgba(27, 111, 216, 0.14);
}

.manage-tags-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.manage-tags-header h2 {
  margin: 0;
  color: var(--text-header);
}

.manage-tags-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.manage-tags-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}

.manage-tag-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f6faff;
  border: 1px solid #dbe8f8;
  border-radius: 10px;
  transition: all 0.15s ease;
}

.manage-tag-item:hover {
  border-color: #b7d3ef;
}

.manage-tag-color {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.manage-tag-name {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-header);
}

.manage-tag-count {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.create-tag-form {
  flex-shrink: 0;
}

.manage-tag-actions {
  display: flex;
  gap: 6px;
}

.manage-tag-btn {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid #cddff3;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

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

.manage-tag-btn.danger:hover {
  border-color: #e74c3c;
  color: #e74c3c;
}

/* Create Tag Form */
.create-tag-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #f7fbff;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
}

.create-tag-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.create-tag-form input[type="text"] {
  flex: 1;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid #cddff3;
  border-radius: 10px;
  font-size: 13px;
  font-family: "Nunito", sans-serif;
  background: #fff;
}

.create-tag-form input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(27, 111, 216, 0.3));
}

.create-tag-form .btn-primary {
  min-height: 38px;
  padding: 0 18px;
  flex-shrink: 0;
}

/* Preset colour swatch picker (shared by create + inline edit). Mirrors the
   account avatar picker (.acct-swatch) so tags use the same palette. */
.tag-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-swatch {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.tag-swatch:hover {
  transform: translateY(-1px);
}

.tag-swatch.selected {
  border-color: var(--text-header);
  box-shadow: 0 0 0 2px #fff inset;
}

.tag-swatch.selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.66rem;
}

/* Edit Tag Inline */
.manage-tag-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}

.manage-tag-edit input[type="text"] {
  flex: 1;
  min-width: 120px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 13px;
  font-family: "Nunito", sans-serif;
  background: #fff;
}

.manage-tag-edit .tag-swatch-row {
  flex-basis: 100%;
  gap: 0.4rem;
}

.manage-tag-edit .tag-swatch {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

/* Tag Filter Section in Filter Panel */
.tag-filter-section {
  margin-top: 0;
  padding-top: 8px;
}

.tag-filter-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 12px;
}

.tag-filter-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-header);
}

.tag-filter-hint {
  margin: 3px 0 0;
  font-size: 11px;
  color: var(--muted);
}

/* AND/OR Toggle — tinted segmented control (mirrors .nutri-range-switcher) */
.tag-filter-mode-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: rgba(27, 111, 216, 0.07);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  font-size: 11px;
}

.tag-filter-mode-btn {
  padding: 3px 11px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tag-filter-mode-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(27, 111, 216, 0.25);
}

.tag-filter-mode-btn:hover:not(.active) {
  color: var(--accent);
}

.tag-filter-buttons {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 5px;
  padding-bottom: 3px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.tag-filter-pill {
  display: inline-flex;
  flex: 0 0 auto;
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s ease;
  opacity: 0.55;
}

.tag-filter-pill.active {
  opacity: 1;
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.tag-filter-pill:hover {
  opacity: 0.8;
}

.tag-filter-pill.active:hover {
  opacity: 1;
}

.tag-filter-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}

/* Ingredient Filter Section in Filter Panel — shares .tag-filter-header /
   .tag-filter-mode-toggle / .tag-filter-mode-btn styling above, same pattern
   advanced-filters.js uses to splice a Folder+Tags group into picker panels
   without new chip CSS. */
.ingredient-filter-section {
  margin-top: 0;
  padding-top: 8px;
}

.ingredient-filter-input {
  width: 100%;
  min-height: 36px;
  border: 1.5px solid #d7e1ee;
  border-radius: 10px;
  padding: 0 11px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-main);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ingredient-filter-input:hover {
  border-color: #becdde;
}

.ingredient-filter-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(27, 111, 216, 0.3));
}

/* Manage Tags button in header */
.manage-tags-btn {
  background: #f4f9ff;
  color: var(--text-header);
  border: 1px solid #c7dcf2;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  font-family: "Nunito", sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.manage-tags-btn:hover {
  background-color: #eaf4ff;
  border-color: #b4d0ef;
}

/* Responsive tag adjustments */
@media (max-width: 768px) {
  .detail-tags-add input {
    width: 140px;
  }

  .manage-tags-content {
    max-width: 90%;
  }

  .create-tag-form {
    flex-wrap: wrap;
  }

  .create-tag-form input[type="text"] {
    min-width: 120px;
  }
}

@media (max-width: 480px) {
  .tag-pill {
    font-size: 10px;
    padding: 2px 8px;
  }

  .meal-card-tags .tag-pill {
    font-size: 9px;
    padding: 2px 6px;
  }

  .detail-tags-add {
    flex-wrap: wrap;
  }

  .detail-tags-add input {
    width: 100%;
    flex: 1;
  }

  .manage-tag-item {
    flex-wrap: wrap;
  }

  .manage-tag-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .manage-tags-btn {
    font-size: 12px;
    min-height: 40px;
    padding: 0 12px;
  }

  .tag-filter-section,
  .ingredient-filter-section {
    margin-top: 8px;
    padding-top: 8px;
  }

  .filter-group {
    padding: 5px;
    margin-bottom: 0;
  }

  .filter-actions-row {
    margin-top: 0;
  }

  .numeric-filter-grid {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .reset-filters-btn {
    min-height: 32px;
    width: 100%;
    justify-content: center;
  }
}

/* =============================================
   Library "Add to Calendar" day picker
   Mirrors the week-block layout in calendar's
   "Create New Plan" (planning-controller.js)
   ============================================= */

#calendar-week-container .sched-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

#calendar-week-container .sched-day-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  min-width: 0;
}

#calendar-week-container .sched-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#calendar-week-container .sched-day-name {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

#calendar-week-container .sched-day-num {
  font-size: 1rem;
  font-weight: 900;
  color: var(--text-header);
  line-height: 1.1;
}

/* Clickable day zone */
.lib-day-zone {
  width: 100%;
  min-height: 52px;
  border-radius: 10px;
  border: 2px solid var(--border-subtle, #d7e1ee);
  background: #f7fbff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  outline: none;
  padding: 5px 6px;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(8, 52, 99, 0.04);
}

.lib-day-zone-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.lib-day-zone-count {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  border-radius: 20px;
  padding: 1px 5px;
  line-height: 1.4;
  white-space: nowrap;
}

.lib-day-zone-names {
  font-size: 9px;
  color: var(--text-main);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.lib-day-zone:hover:not(.past) {
  border-color: var(--accent);
  background: #eff6ff;
  box-shadow: 0 2px 6px rgba(27, 111, 216, 0.18);
}

.lib-day-zone:focus-visible:not(.past) {
  box-shadow: 0 0 0 3px rgba(27, 111, 216, 0.35);
}

.lib-day-zone.has-meals {
  border-color: rgba(27, 111, 216, 0.35);
  background: rgba(27, 111, 216, 0.06);
}

.lib-day-zone.has-meals .lib-day-zone-count {
  background: #2563eb;
}

/* Selected day gets an accent-fill treatment, matching the app's segmented-
   control active state (e.g. .nutri-range-btn.active) rather than a flat tint. */
.lib-day-zone.selected {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(27, 111, 216, 0.3);
}

.lib-day-zone.selected .lib-day-zone-count {
  background: #fff;
  color: var(--accent);
}

.lib-day-zone.selected .lib-day-zone-names {
  color: #fff;
}

.lib-day-zone.past {
  background: #eef2f7;
  border-color: var(--border-subtle);
  cursor: not-allowed;
  opacity: 0.45;
}

/* Legend dots */
.lib-day-legend {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid transparent;
  flex-shrink: 0;
}

.lib-day-legend--available {
  background: #f7fbff;
  border-color: var(--border-subtle, #d7e1ee);
}

.lib-day-legend--has-meals {
  background: rgba(27, 111, 216, 0.2);
  border-color: rgba(27, 111, 216, 0.5);
}

.lib-day-legend--selected {
  background: var(--accent);
  border-color: var(--accent);
}

.lib-day-legend--past {
  background: #eef2f7;
  border-color: var(--border-subtle);
  opacity: 0.45;
}

/* -- Put on Deck Modal -----------------------------------------------------
   Same gradient card + layered shadow + icon-badge sticky header as Request
   Picks / Create Meal Poll / Pick Meals (and the Add-to-Calendar modal
   below) — the outer box owns no padding of its own so the header divider
   runs edge-to-edge, with each section supplying its own gutters. */
.add-queue-content {
  max-width: 520px;
  width: 100%;
  padding: 0 0 1.35rem;
  overflow-x: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 18px;
  box-shadow:
    0 30px 60px -24px rgba(15, 23, 42, 0.6),
    0 8px 24px -12px rgba(15, 23, 42, 0.35);
}

.add-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  padding: 1.1rem 1.35rem 0.95rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px 18px 0 0;
}

.add-queue-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.add-queue-title-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(27, 111, 216, 0.12);
  color: var(--accent, #1b6fd8);
}

.add-queue-header h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-header);
}

.add-queue-content .add-queue-meal-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  background: rgba(27, 111, 216, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 14px 1.35rem 16px;
}

.add-queue-meal-label i {
  color: var(--accent);
  font-size: 13px;
  flex-shrink: 0;
}

.add-queue-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 1.35rem;
}

.queue-create-new-btn {
  width: 100%;
  padding: 10px 16px;
  border: 2px dashed var(--border-subtle, #e2e8f0);
  background: #f8fafc;
  border-radius: 10px;
  color: var(--primary, #1b6fd8);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  transition: background 0.15s, border-color 0.15s;
}

.queue-create-new-btn:hover {
  background: #eff6ff;
  border-color: var(--primary, #1b6fd8);
}

.queue-meal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
  scroll-padding: 8px;
}

.queue-empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted, #6b7280);
}

.queue-empty-state i {
  font-size: 30px;
  margin-bottom: 10px;
  display: block;
  opacity: 0.45;
}

.queue-empty-state p {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
}

.queue-empty-sub {
  font-size: 13px;
  font-weight: 400 !important;
  color: var(--muted, #9ca3af);
}

.queue-target-card {
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
  transition: box-shadow 0.15s;
  /* Keep natural height when the list overflows: without this, flexbox shrinks
     every card to cram them into the list's max-height, smushing the cards.
     flex-shrink:0 makes the list scroll instead. */
  flex-shrink: 0;
}

.queue-target-card:hover {
  box-shadow: 0 2px 10px rgba(8, 52, 99, 0.1);
}

.queue-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
}

.queue-card-count {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  background: rgba(27, 111, 216, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.queue-card-add-btn {
  font-size: 12px;
  padding: 6px 12px;
  flex-shrink: 0;
  /* Pin to the right of the row by default (calendar "add here" cards: count
     then button). The add-queue-content cards below override this to put the
     button first, on the left. */
  margin-left: auto;
}

.add-queue-content .queue-card-add-btn {
  margin-left: 0;
  text-align: center;
}

.add-queue-content .queue-card-add-btn.btn-primary:hover:not(:disabled) {
  transform: none;
}

.queue-card-detail-body {
  border-top: 1px solid var(--border-subtle, #e2e8f0);
  padding: 10px 14px 12px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.queue-card-recipe-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.queue-pill-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #9ca3af);
  margin-right: 2px;
}

.queue-pill {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
}

.queue-pill-main {
  background: #dbeafe;
  color: #1e40af;
}

.queue-pill-side {
  background: #dcfce7;
  color: #166534;
}
/* -- Add to Calendar Modal (redesigned) -----------------------------------
   Same gradient card + layered shadow + icon-badge header as Request Picks /
   Create Meal Poll / Pick Meals (and the Add-to-List modal above) — just
   wider to fit the week grid + step cards. */
.add-cal-content {
  max-width: 680px;
  width: 100%;
  /* Header is pinned (sticky) below, so the outer box owns no padding of its
     own — a bottom gutter is kept here since there's no fixed footer to
     supply it, and left/right/top gutters move onto the individual children
     so they scroll flush under the sticky header. */
  padding: 0 0 2rem;
  overflow-x: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 18px;
  box-shadow:
    0 30px 60px -24px rgba(15, 23, 42, 0.6),
    0 8px 24px -12px rgba(15, 23, 42, 0.35);
}

/* Pinned so "Add To Calendar" + Cancel stay reachable while Step 1/Step 2
   content scrolls underneath — mirrors the .motw-header sticky-modal-header
   pattern used for Meal of the Week. */
.add-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 6;
  background: #fff;
  padding: 1.5rem 2rem 1rem;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px 18px 0 0;
}

.add-cal-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.add-cal-title-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(27, 111, 216, 0.12);
  color: var(--accent, #1b6fd8);
}

.add-cal-header h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-header);
}

/* Context strip: mirrors the tinted info-bar look used for range switchers /
   notices elsewhere on the Nutrition tab, instead of plain muted text.
   Selector is scoped to .add-cal-content (not just the bare class) so its
   specificity beats `.modal-content p`, which would otherwise clobber the
   margin/font-size below since it targets the same <p> element. */
.add-cal-content .add-cal-meal-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  background: rgba(27, 111, 216, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 16px 2rem;
}

.add-cal-meal-label i {
  color: var(--accent);
  font-size: 13px;
  flex-shrink: 0;
}

/* Each step is its own card surface (mirrors .nutri-card): white background,
   subtle border, soft navy-tinted shadow. */
.add-cal-step-section {
  margin: 16px 2rem 0;
  background: #fff;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 14px;
  padding: 1.1rem 1.2rem 1.25rem;
  box-shadow: 0 2px 8px rgba(8, 52, 99, 0.05);
}

.add-cal-step-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-header);
  margin: 0 0 12px;
}

.add-cal-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(27, 111, 216, 0.3);
}

/* Week nav: prev/next + range label above the single-week grid (mirrors
   .nutri-range-switcher's tinted pill treatment). */
.add-cal-week-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 12px;
}

.add-cal-week-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  background: rgba(27, 111, 216, 0.07);
  color: var(--accent);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.add-cal-week-nav-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

.add-cal-week-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.add-cal-week-label {
  min-width: 150px;
  text-align: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text-header);
}

/* Legend sits in its own tinted strip (mirrors .nutri-range-switcher) rather
   than floating as plain text under the grid. */
.add-cal-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(27, 111, 216, 0.05);
  border: 1px solid var(--border-subtle, rgba(200, 215, 235, 0.6));
  border-radius: 10px;
}

.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.add-cal-day-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.add-cal-day-date {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-header);
}

.add-cal-day-pill {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  background: rgba(27, 111, 216, 0.1);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.add-cal-legacy-notice {
  font-size: 13px;
  color: #b45309;
  font-weight: 600;
  background: #fef3c7;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.cal-meal-list {
  margin-top: 10px;
  max-height: 280px;
  overflow-y: auto;
}

/* ── Family Library Visual States ─────────────────────────────────────── */

.orphan-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #92400e;
  background: #fde68a;
  border-radius: 6px;
  padding: 2px 6px;
}

/* "In Family Library" already-shared indicator on card */
.family-shared-indicator {
  font-size: 12px;
  color: #166534;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Share to Family button in detail modal action bar */
.btn-family {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid #22c55e;
  border-radius: 8px;
  background: #f0fdf4;
  color: #166534;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-family:hover:not(:disabled) { background: #dcfce7; }
.btn-family:disabled { opacity: 0.6; cursor: default; }

/* Remove-from-family state – black theme */
.btn-family.btn-family--remove {
  background: #f9f9f9;
  color: #000000;
  border-color: #000000;
}
.btn-family.btn-family--remove:hover:not(:disabled) { background: #f0f0f0; }


/* Detail modal when viewing a meal that is in the family library */
.meal-detail-content.in-family-library {
  outline: none;
}