/* ============================================================
   COOKING ASSISTANT — Mobile-first CSS
   ============================================================ */

/* --- Custom Properties --- */
:root {
  --green:        #2d6a4f;
  --green-dark:   #1b4332;
  --green-light:  #52b788;
  --green-pale:   #d8f3dc;
  --red:          #c62828;
  --red-light:    #ffebee;
  --orange:       #e65100;
  --yellow:       #f9c74f;
  --bg:           #f8f9fa;
  --surface:      #ffffff;
  --border:       #dee2e6;
  --text:         #212529;
  --text-muted:   #6c757d;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.1);
  --shadow-md:    0 4px 12px rgba(0,0,0,.12);
  --radius:       12px;
  --radius-sm:    8px;
  --font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100dvh;
}

img { max-width: 100%; display: block; }
ul  { list-style: none; }
a   { color: var(--green); text-decoration: none; }

/* --- Utility --- */
.hidden { display: none !important; }

.fade-out {
  opacity: 0;
  transform: scale(.96);
  transition: all .3s ease;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.navbar.hidden { display: none; }

.nav-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  line-height: 1.1;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
}

.nav-brand-logo {
  height: 42px;
  width: auto;
}

.nav-brand-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .02em;
}

.nav-brand-domain {
  font-size: .65rem;
  font-weight: 400;
  opacity: .7;
  letter-spacing: .04em;
}

@media (max-width: 480px) {
  .nav-brand-text { display: none; }
  .nav-brand-logo { height: 38px; }
  .nav-actions { gap: .4rem; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(.97); }

.btn-primary  { background: var(--green);   color: #fff; border-color: var(--green); }
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); }

.btn-outline  { background: transparent; color: var(--green); border-color: var(--green); }
.btn-outline:hover { background: var(--green-pale); }

.btn-ghost    { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--border); color: var(--text); }

.btn-danger   { color: var(--red); }
.btn-danger:hover { background: var(--red-light); }
.btn-danger-outline { color: var(--red); border-color: var(--red); }
.btn-danger-outline:hover { background: var(--red-light); }

.btn-success  { background: #388e3c; color: #fff; border-color: #388e3c; }

.btn-sm  { font-size: .85rem; padding: .35rem .75rem; }
.btn-lg  { font-size: 1.1rem; padding: .8rem 1.6rem; }
.btn-block { width: 100%; }

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

/* ============================================================
   CARDS & LAYOUT
   ============================================================ */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}

.app-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
}

/* ============================================================
   LOADING & EMPTY
   ============================================================ */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 4rem 1rem;
  color: var(--text-muted);
}

.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--text-muted);
}
.empty-icon { font-size: 4rem; margin-bottom: 1rem; }
.empty-state h2 { color: var(--text); margin-bottom: .5rem; }
.empty-state p  { margin-bottom: 1.5rem; }

.error-page {
  text-align: center;
  padding: 4rem 1rem;
}
.error-page h2 { color: var(--red); margin-bottom: .5rem; }
.error-page p  { color: var(--text-muted); margin-bottom: 1.5rem; }

/* ============================================================
   LIBRARY
   ============================================================ */
.library-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.library-header h1 { font-size: 1.5rem; }
.recipe-count {
  display: inline-block;
  background: var(--green-pale);
  color: var(--green-dark);
  border-radius: 100px;
  padding: .1em .6em;
  font-size: .8rem;
  font-weight: 700;
}

.recipe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 540px) {
  .recipe-grid { grid-template-columns: 1fr 1fr; }
}

.recipe-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s;
}
.recipe-card:hover { box-shadow: var(--shadow-md); }

.recipe-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  background: var(--surface);
}
.recipe-card-img-placeholder {
  width: 100%;
  height: 220px;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.recipe-grid-large .recipe-card-img,
.recipe-grid-large .recipe-card-img-placeholder {
  height: auto;
  aspect-ratio: 1 / 1;
}

.recipe-card-body {
  padding: .9rem 1rem .5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.recipe-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: .3rem;
  line-height: 1.3;
}
.recipe-card-desc {
  font-size: .875rem;
  color: var(--text-muted);
  margin-bottom: .25rem;
}
.recipe-card-desc a { color: var(--text-muted); text-decoration: underline; }
.recipe-card-desc a:hover { color: var(--green); }
.recipe-card-meta {
  font-size: .8rem;
  color: var(--green);
  font-weight: 600;
  margin-top: auto;
}

.recipe-card-actions {
  display: flex;
  gap: .4rem;
  padding: .6rem 1rem .8rem;
  border-top: 1px solid var(--border);
  align-items: center;
}
.recipe-card-actions .btn-outline,
.recipe-card-actions .btn-primary { flex: 1; }

.recipe-card-toolbar {
  display: flex;
  gap: .25rem;
  padding: .3rem .75rem .6rem;
  align-items: center;
  position: relative;
}
.recipe-card-toolbar .btn-sm { font-size: .78rem; padding: .25rem .45rem; }
.recipe-card-toolbar .btn-danger { margin-left: auto; }

.meal-type-badge {
  display: inline-block;
  background: var(--green-pale);
  color: var(--green-dark);
  font-size: .7rem;
  font-weight: 600;
  padding: .1em .5em;
  border-radius: 100px;
  margin-bottom: .25rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Meal date filter row */
.meal-date-filter { margin-bottom: .5rem; }
.meal-date-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .25rem;
}
.meal-date-input {
  padding: .3rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-family: var(--font);
}
.meal-date-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--green-dark);
}

/* Meal plan dropdown from library card */
.meal-plan-dropdown {
  position: absolute;
  bottom: 100%;
  right: .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  width: 180px;
  z-index: 100;
  overflow: hidden;
}
.meal-plan-dropdown-header {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--border);
}
.meal-plan-dropdown-header label {
  font-size: .7rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: .04em;
}
.meal-plan-dropdown-header input[type="date"],
.meal-plan-dropdown-header select {
  width: 100%;
  padding: .25rem .4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: .85rem;
  margin-top: .2rem;
}
.meal-plan-dropdown-action {
  padding: .5rem .6rem;
}
.meal-plan-dropdown-success {
  padding: .75rem;
  text-align: center;
  color: var(--green);
  font-weight: 600;
  font-size: .9rem;
}

/* ============================================================
   EDITOR
   ============================================================ */
.editor-page { padding-bottom: 2rem; }

.editor-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.editor-header h1 { font-size: 1.4rem; }

.url-import-section { border-left: 4px solid var(--green-light); }
.url-import-section h2 { font-size: 1rem; margin-bottom: .25rem; }
.hint { font-size: .875rem; color: var(--text-muted); margin-bottom: .75rem; }

.url-import-row {
  display: flex;
  gap: .5rem;
}
.input-url {
  flex: 1;
  padding: .55rem .75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-family: var(--font);
}
.input-url:focus { outline: none; border-color: var(--green); }

.import-status { margin-top: .6rem; font-size: .875rem; }
.import-status.success { color: #2e7d32; }
.import-status.error   { color: var(--red); }
.import-status.warning { color: var(--orange); }

/* Illustration picker */
.illustration-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .5rem;
}
.illus-option {
  width: 96px;
  height: 96px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, background .15s, transform .1s;
  padding: 0;
}
.illus-option:hover {
  border-color: var(--green);
  transform: scale(1.1);
}
.illus-option.active {
  border-color: var(--green);
  background: var(--green-pale);
  box-shadow: 0 0 0 2px var(--green);
}
.illus-emoji { font-size: 1.5rem; line-height: 1; }
.illus-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-sm) - 2px);
}
.image-upload-details { margin-top: .5rem; }
.image-upload-details summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: .85rem;
}

/* Image upload */
.image-upload-area {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, background .15s;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-upload-area:hover,
.image-upload-area.drag-over {
  border-color: var(--green);
  background: var(--green-pale);
}

.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: 1.5rem;
  color: var(--text-muted);
  font-size: .9rem;
  pointer-events: none;
}
.image-placeholder-icon { font-size: 2rem; }

.image-preview {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  display: block;
}

.image-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.image-url-fallback {
  margin-top: .5rem;
}
.image-url-fallback summary {
  font-size: .8rem;
  color: var(--green);
  cursor: pointer;
  user-select: none;
}
.image-url-fallback input {
  width: 100%;
  margin-top: .4rem;
  padding: .45rem .6rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-family: var(--font);
}
.image-url-fallback input:focus { outline: none; border-color: var(--green); }

.recipe-form { padding: 1.25rem; }

.form-section { margin-bottom: 2rem; }
.form-section h2 { font-size: 1.1rem; margin-bottom: .75rem; color: var(--green-dark); }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.form-group { margin-bottom: .9rem; }
.form-group label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: .3rem;
  color: var(--text-muted);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: .55rem .75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font);
  background: var(--surface);
  transition: border-color .15s;
}
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--green); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

/* Ingredient rows */
.ing-labels {
  display: grid;
  grid-template-columns: 80px 80px 1fr 120px 36px;
  gap: .4rem;
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0 .1rem .25rem;
}
@media (max-width: 480px) {
  .ing-labels { display: none; }
}

.ing-row {
  display: grid;
  grid-template-columns: 80px 80px 1fr 120px 36px;
  gap: .4rem;
  margin-bottom: .4rem;
  align-items: center;
}
@media (max-width: 480px) {
  .ing-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .ing-row .ing-notes { grid-column: 1 / 3; }
  .ing-row .ing-remove { grid-column: 2; grid-row: 1; justify-self: end; }
}

.ing-row input {
  padding: .45rem .5rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-family: var(--font);
  width: 100%;
}
.ing-row input:focus { outline: none; border-color: var(--green); }

/* Step rows */
.step-row {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem;
  margin-bottom: .75rem;
}
.step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
.step-num {
  font-weight: 700;
  font-size: .875rem;
  color: var(--green-dark);
  background: var(--green-pale);
  padding: .15em .6em;
  border-radius: 100px;
}
.step-instruction {
  width: 100%;
  padding: .5rem .6rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-family: var(--font);
  resize: vertical;
}
.step-instruction:focus { outline: none; border-color: var(--green); }

.step-ings-details { margin-top: .5rem; }
.step-ings-details summary {
  font-size: .8rem;
  color: var(--green);
  cursor: pointer;
  user-select: none;
}
.step-ings-list {
  padding-top: .4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.step-ing-label {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: .2em .7em;
  cursor: pointer;
}
.step-ing-label input { accent-color: var(--green); cursor: pointer; }

.form-actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.form-error {
  margin-top: .75rem;
  padding: .6rem .9rem;
  background: var(--red-light);
  color: var(--red);
  border-radius: var(--radius-sm);
  font-size: .875rem;
}
.form-success {
  margin-top: .75rem;
  padding: .6rem .9rem;
  background: var(--green-pale);
  color: var(--green-dark);
  border-radius: var(--radius-sm);
  font-size: .875rem;
}

.save-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: #fff;
  padding: .6rem 1.4rem;
  border-radius: 100px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  animation: slideUp .3s ease;
  z-index: 200;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============================================================
   SHOPPING LIST
   ============================================================ */
.shopping-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 60px);
}

.shopping-header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.shopping-title-block { flex: 1; }
.shopping-title-block h1 { font-size: 1.3rem; line-height: 1.2; }
.servings-label { font-size: .875rem; color: var(--text-muted); }

.shopping-progress {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.progress-bar {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 100px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 100px;
  transition: width .3s ease;
}
.progress-label { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }

.shopping-list { flex: 1; }

.shopping-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}

.shopping-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem .25rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex: 1;
  min-width: 0;
}

.shopping-label input[type="checkbox"] {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  accent-color: var(--green);
  flex-shrink: 0;
  cursor: pointer;
}

.shopping-ing-text {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: 1.1rem;
}
.ing-qty {
  font-weight: 700;
  color: var(--green-dark);
  white-space: nowrap;
}
.ing-name { }
.ing-notes {
  font-size: .875rem;
  color: var(--text-muted);
  font-style: italic;
}

.shopping-item.checked .shopping-ing-text {
  text-decoration: line-through;
  opacity: .45;
}

.shopping-footer {
  position: sticky;
  bottom: 0;
  padding: 1rem 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* ============================================================
   NAVBAR ACTIONS & SCRATCHPAD BADGE
   ============================================================ */
.nav-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.nav-scratchpad-link {
  position: relative;
  color: #fff;
  font-size: 1.2rem;
  padding: .25rem;
  line-height: 1;
}

.sp-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  background: var(--red);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 100px;
  padding: 0 4px;
}

/* ============================================================
   SCRATCHPAD
   ============================================================ */
.scratchpad-header-actions {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  align-items: flex-end;
}

.scratchpad-add {
  margin-bottom: .75rem;
}

.scratchpad-add-row {
  display: flex;
  gap: .4rem;
  align-items: center;
}

.sp-input {
  padding: .5rem .6rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-family: var(--font);
  background: var(--surface);
}
.sp-input:focus { outline: none; border-color: var(--green); }

.sp-amount { width: 60px; flex-shrink: 0; }
.sp-unit   { width: 60px; flex-shrink: 0; }
.sp-name   { flex: 1; min-width: 0; }

@media (max-width: 400px) {
  .scratchpad-add-row { flex-wrap: wrap; }
  .sp-amount, .sp-unit { width: calc(50% - .2rem); }
  .sp-name { width: 100%; }
}

.sp-source {
  display: block;
  font-size: .75rem;
  color: var(--text-muted);
  font-style: italic;
}

.shopping-item .sp-remove {
  flex-shrink: 0;
  padding: .5rem .75rem;
  font-size: .95rem;
  margin-right: .25rem;
}

/* ============================================================
   COOKING MODE
   ============================================================ */
body.cooking-active { background: #24243e; }

.cooking-page {
  position: fixed;
  top: .5rem;
  left: .5rem;
  right: .5rem;
  bottom: 0;                    /* extend to screen edge so OS nav sampler always sees dark */
  border-radius: var(--radius) var(--radius) 0 0;   /* only round top corners */
  display: flex;
  flex-direction: column;
  background: #1a1a2e;
  color: #e8e8f0;
  padding: 0;
  overflow: hidden;
}

.cooking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: rgba(0,0,0,.3);
  gap: .75rem;
}
.btn-exit {
  color: #aaa;
  border-color: transparent;
  font-size: .85rem;
  flex-shrink: 0;
}
.btn-exit:hover { color: #fff; background: rgba(255,255,255,.1); }

.cooking-recipe-title {
  font-size: .9rem;
  font-weight: 600;
  color: #ccc;
  text-align: center;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cooking-step-counter {
  font-size: .9rem;
  color: var(--green-light);
  font-weight: 700;
  flex-shrink: 0;
}

.cooking-progress {
  height: 4px;
  background: rgba(255,255,255,.1);
}
.cooking-progress-fill {
  height: 100%;
  background: var(--green-light);
  transition: width .4s ease;
}

.cooking-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cooking-step-label {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--green-light);
}

.cooking-instruction {
  font-size: 1.4rem;
  line-height: 1.55;
  font-weight: 500;
}

@media (min-width: 480px) {
  .cooking-instruction { font-size: 1.6rem; }
}

.cooking-ingredients {
  background: rgba(255,255,255,.07);
  border-radius: var(--radius-sm);
  padding: 1rem;
}
.cooking-ings-title {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--green-light);
  margin-bottom: .6rem;
}
.cooking-ings-list { display: flex; flex-direction: column; gap: .45rem; }
.cooking-ing-item {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: 1.1rem;
  flex-wrap: wrap;
}
.cooking-ing-qty {
  font-weight: 700;
  color: var(--yellow);
  white-space: nowrap;
  flex-shrink: 0;
}
.cooking-ing-name { flex: 1; min-width: 0; }
.cooking-ing-notes { font-size: .875rem; color: #aaa; }

.cooking-nav {
  display: flex;
  gap: .75rem;
  padding: 1rem 1rem max(env(safe-area-inset-bottom, 0px), 1rem);
  background: rgba(0,0,0,.2);
}
.btn-cook-nav {
  flex: 1;
  padding: 1rem;
  font-size: 1.1rem;
  border-radius: var(--radius-sm);
}
.btn-cook-nav.btn-outline {
  border-color: rgba(255,255,255,.2);
  color: #ccc;
}
.btn-cook-nav.btn-outline:hover { background: rgba(255,255,255,.1); }
.btn-cook-nav.btn-primary {
  background: var(--green);
  border-color: var(--green);
}
.btn-cook-nav:disabled {
  opacity: .3;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   SEARCH & FILTER
   ============================================================ */
.search-filter-section {
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  -webkit-user-select: none;
  user-select: none;
}
.search-filter-section input[type="text"],
.search-filter-section input[type="date"] {
  -webkit-user-select: text;
  user-select: text;
}

.search-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  color: var(--text-muted);
  user-select: none;
  list-style: none;
}
.search-toggle::-webkit-details-marker { display: none; }
.search-toggle::after {
  content: '▸';
  margin-left: auto;
  transition: transform .2s;
}
.search-filter-section[open] .search-toggle::after {
  transform: rotate(90deg);
}

.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 .35rem;
  background: var(--green);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  border-radius: 999px;
}
.filter-badge-blink {
  animation: badge-blink 2s ease-in-out infinite;
}
@keyframes badge-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}
details[open] > summary .filter-badge-blink {
  animation: none;
}

.search-filter-body {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 0 1rem 1rem;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.search-input {
  flex: 1;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-family: var(--font);
  background: var(--bg);
  transition: border-color .2s;
}
.search-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-pale);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.filter-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .8rem;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  transition: all .15s;
  user-select: none;
}
.filter-pill:hover {
  border-color: var(--green-light);
  background: var(--green-pale);
}
.filter-pill.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.filter-pill input[type="radio"],
.filter-pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.active-filters {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--text-muted);
  padding-top: .25rem;
  border-top: 1px solid var(--border);
}

.btn-link {
  background: none;
  border: none;
  color: var(--green);
  font-size: .8rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.btn-link:hover { color: var(--green-dark); }

/* ============================================================
   NAV ICON LINKS
   ============================================================ */
.nav-icon-link {
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  padding: .25rem .5rem;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.nav-icon-link:hover { background: rgba(255,255,255,.15); }
.nav-guests-icon { filter: grayscale(1) brightness(2); }

/* ============================================================
   AUTH PAGES
   ============================================================ */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 2rem);
  padding: 1rem;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 2rem 1.5rem;
}

.auth-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: .25rem;
}

.auth-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: .9rem;
  margin-bottom: 1.5rem;
}

.auth-switch {
  text-align: center;
  font-size: .9rem;
  color: var(--text-muted);
  margin-top: 1.25rem;
}

.auth-card .form-group { margin-bottom: 1rem; }
.auth-card .btn-block { margin-top: .5rem; }
.auth-forgot {
  text-align: right;
  font-size: .85rem;
  margin-top: -.25rem;
  margin-bottom: .5rem;
}

/* --- Shared recipe --- */
.shared-recipe-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}
.shared-recipe-img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.shared-recipe-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  margin-bottom: .35rem;
}
.shared-recipe-desc {
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.shared-recipe-meta {
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: .25rem;
}
.shared-recipe-source {
  font-size: .8rem;
}
.shared-recipe-ingredients {
  list-style: disc;
  padding-left: 1.25rem;
}
.shared-recipe-ingredients li {
  margin-bottom: .3rem;
  line-height: 1.4;
}
.shared-recipe-steps {
  padding-left: 1.25rem;
}
.shared-recipe-steps li {
  margin-bottom: .6rem;
  line-height: 1.5;
}
.share-url-display {
  margin-top: .5rem;
}
.share-url-display input {
  width: 100%;
  padding: .4rem .6rem;
  font-size: .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}
.shared-recipe-cta {
  text-align: center;
}
.shared-recipe-cta-text {
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

/* --- Guest directory --- */
.guest-search {
  margin-bottom: 1rem;
}
.guest-search input {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .95rem;
}
.guest-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.guest-card {
  padding: 1rem;
  transition: box-shadow .15s;
}
.guest-card-header {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.guest-card-actions {
  margin-left: auto;
  display: flex;
  gap: .25rem;
  flex-shrink: 0;
}
.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: .3rem .4rem;
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  opacity: .55;
  transition: opacity .15s, background .15s;
}
.btn-icon:hover {
  opacity: 1;
  background: rgba(0,0,0,.06);
}
.guest-card-name {
  font-weight: 600;
  font-size: 1.05rem;
}
.guest-card-details {
  margin-top: .4rem;
}
.guest-card-allergies {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .3rem;
}
.allergy-badge {
  display: inline-block;
  padding: .15rem .5rem;
  background: #fef3cd;
  color: #856404;
  border-radius: var(--radius-sm);
  font-size: .75rem;
  font-weight: 600;
}
.diet-badge {
  display: inline-block;
  padding: .15rem .5rem;
  background: var(--green-pale);
  color: var(--green-dark);
  border-radius: var(--radius-sm);
  font-size: .75rem;
  font-weight: 600;
}
.guest-card-prefs {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: .85rem;
  color: var(--text-muted);
}
.guest-pref-section {
  display: block;
}
.guest-pref-label {
  font-weight: 600;
  color: var(--text);
  margin-right: .25rem;
}
.guest-form .card {
  margin-bottom: 1rem;
}
.guest-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.guest-field {
  margin-bottom: .75rem;
}
.guest-field label {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: .3rem;
  color: var(--text-light);
}
.guest-favorites-list {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .75rem;
}
.guest-fav-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  font-size: .9rem;
}
.guest-fav-item span {
  flex: 1;
  min-width: 0;
}
.recipe-pick-img {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.recipe-pick-img-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}
.guest-field-label {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: .3rem;
  color: var(--text-muted);
}
.meal-assign-favs {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.meal-assign-fav-list {
  max-height: 180px;
  overflow-y: auto;
}
.meal-assign-fav-added {
  background: var(--green-pale);
  position: relative;
}
.meal-assign-fav-added::after {
  content: '✓';
  margin-left: auto;
  font-weight: 700;
  color: var(--green);
}
.guest-form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* --- Team management --- */
.team-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .75rem;
  background: var(--bg-alt);
  border-radius: var(--radius-sm);
  margin-bottom: .35rem;
}
.team-member-row strong {
  font-weight: 600;
}
.team-members-list, .team-invitations-list {
  margin-top: .5rem;
}

/* --- Meal planner multi-recipe & guests --- */
.meal-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .25rem;
}
.meal-slot-recipe {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .25rem;
}
.meal-slot-recipe .meal-slot-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
}
.meal-slot-add-more {
  font-size: .75rem;
  padding: .1rem .4rem;
  margin-top: .2rem;
  opacity: .6;
}
.meal-slot-add-more:hover {
  opacity: 1;
}
.meal-slot-guest-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: .1rem .3rem;
  font-size: .8rem;
  color: inherit;
  opacity: .6;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .15rem;
}
.meal-slot-guest-btn:hover {
  opacity: 1;
}
.meal-slot-guest-icon {
  font-size: .85rem;
}
.meal-guest-badge {
  background: var(--green);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 100px;
  padding: 0 3px;
}
.meal-slot-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: .1rem .3rem;
  font-size: .8rem;
  color: inherit;
  opacity: .6;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .15rem;
}
.meal-slot-edit-btn:hover { opacity: 1; }

/* Slot editor modal */
.slot-editor-section { padding: .25rem 0; }
.slot-editor-section + .slot-editor-section { border-top: 1px solid var(--border); }
.slot-editor-section-title {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  padding: .5rem .75rem .25rem;
  margin: 0;
}
.slot-editor-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
}
.slot-editor-img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.slot-editor-guest-icon { font-size: .9rem; flex-shrink: 0; }
.slot-editor-item-name {
  flex: 1;
  font-size: .85rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slot-editor-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: .15rem .3rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.slot-editor-remove:hover { color: var(--red); background: rgba(0,0,0,.05); }
.slot-editor-add {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px dashed var(--border);
  color: var(--text-muted);
  cursor: pointer;
  padding: .5rem .75rem;
  text-align: left;
  font-size: .8rem;
}
.slot-editor-add:hover { color: var(--green); }

.guest-pick-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.guest-pick-item:hover {
  background: var(--bg-alt);
}
.guest-pick-item.active {
  background: rgba(45, 106, 79, .08);
}
.guest-pick-item input {
  margin: 0;
}

/* --- Conflict warnings --- */
.conflict-warnings {
  padding: 0 .75rem;
}
.conflict-warning {
  padding: .5rem .75rem;
  margin-bottom: .35rem;
  background: #fff3cd;
  color: #856404;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  border-left: 3px solid #ffc107;
}

/* --- Landing page --- */
.landing-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

.landing-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding-top: 2rem;
}
.landing-brand-text {
  display: flex;
  flex-direction: column;
}
.landing-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.1;
}
.landing-brand-domain {
  font-size: .85rem;
  color: var(--text-muted);
  letter-spacing: .03em;
}
.landing-brand-logo {
  height: 56px;
  filter: brightness(0) saturate(100%) invert(28%) sepia(15%) saturate(1800%) hue-rotate(100deg) brightness(95%);
}

.landing-hero {
  text-align: center;
  padding: 2.5rem 0 3rem;
}
.landing-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: .75rem;
  line-height: 1.15;
}
.landing-hero p {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}
.landing-cta {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.landing-section {
  margin-bottom: 3rem;
  text-align: center;
}
.landing-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: .5rem;
}
.landing-section-sub {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.landing-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  text-align: left;
}
.landing-feature-card {
  padding: 1.5rem;
}
.landing-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-pale);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: .75rem;
}
.landing-feature-icon.emoji {
  font-weight: 400;
}
.landing-feature-icon.emoji span {
  transform: translateY(-5px);
  display: inline-block;
}
.landing-feature-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .35rem;
}
.landing-feature-card p {
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.landing-final-cta {
  text-align: center;
  background: var(--green-pale);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
}
.landing-final-cta h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: .5rem;
}
.landing-final-cta p {
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

@media (max-width: 800px) {
  .landing-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .landing-hero h1 { font-size: 2rem; }
  .landing-hero { padding: 1.5rem 0 2rem; }
  .landing-features { grid-template-columns: 1fr; }
}

.mfa-hint {
  margin-top: 1rem;
  font-size: .85rem;
}

/* --- MFA --- */
.mfa-qr {
  text-align: center;
  margin: 1rem 0;
}
.mfa-qr img {
  max-width: 200px;
}
.mfa-manual-code {
  font-family: var(--mono);
  font-size: .85rem;
  background: var(--bg-alt);
  padding: .15rem .4rem;
  border-radius: 4px;
  word-break: break-all;
}
.mfa-status-badge {
  display: inline-block;
  padding: .25rem .6rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--green);
  background: var(--green-pale);
  border-radius: 6px;
}
.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .4rem;
  padding: 1rem;
  background: var(--bg-alt);
  border-radius: 8px;
}
.recovery-codes code {
  font-family: var(--mono);
  font-size: .95rem;
  padding: .25rem .4rem;
  text-align: center;
}

/* ============================================================
   ACCOUNT PAGE
   ============================================================ */
.account-page .card { margin-bottom: 1rem; }

.account-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.account-email {
  font-weight: 600;
  font-size: 1.05rem;
}

.account-plan-badge {
  background: var(--green-pale);
  color: var(--green-dark);
  font-weight: 700;
  font-size: .8rem;
  padding: .25em .75em;
  border-radius: 100px;
}

.form-section-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .75rem;
  color: var(--green-dark);
}

.pref-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: .9rem;
  margin-bottom: .5rem;
}
.pref-toggle:last-child { margin-bottom: 0; }

.usage-bar-container {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.usage-bar-container .progress-bar { flex: 1; }
.usage-label {
  font-size: .85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Plan grid */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
}

.plan-card {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  text-align: center;
  transition: border-color .15s;
  display: flex;
  flex-direction: column;
}
.plan-card .plan-features { flex: 1; }
.plan-card .btn-upgrade,
.plan-card .plan-badge-current { margin-top: auto; }
.plan-card.plan-current {
  border-color: var(--green);
  background: var(--green-pale);
}

.plan-name { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.plan-price { font-size: .9rem; color: var(--green); font-weight: 600; margin-bottom: .5rem; }
.plan-features {
  font-size: .8rem;
  color: var(--text-muted);
  margin-bottom: .75rem;
}
.plan-features li { margin-bottom: .2rem; }

.plan-badge-current {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  color: var(--green-dark);
}

/* ============================================================
   ADMIN PAGES
   ============================================================ */
.app-main:has(.admin-page) { max-width: 1000px; }
.admin-page .card { margin-bottom: 1rem; }

.admin-table-wrap { overflow-x: auto; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--border);
}
.admin-table th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

.admin-email {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-tier-select {
  padding: .3rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-family: var(--font);
}

.tier-input {
  padding: .3rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-family: var(--font);
  width: 100%;
  min-width: 80px;
}
.tier-input:focus { outline: none; border-color: var(--green); }
.tier-input-sm { width: 70px; min-width: 50px; }

.admin-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  cursor: pointer;
}
.admin-toggle input { accent-color: var(--red); }
.admin-toggle-locked { opacity: .5; cursor: not-allowed; }

.admin-badge {
  background: var(--green-pale);
  color: var(--green-dark);
  font-size: .7rem;
  font-weight: 700;
  padding: .15em .5em;
  border-radius: 100px;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}

.stat-card { text-align: center; padding: 1.25rem 1rem; }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--green); }
.stat-label { font-size: .85rem; color: var(--text-muted); }

/* ============================================================
   UPGRADE BANNER (library)
   ============================================================ */
.upgrade-banner {
  background: linear-gradient(135deg, var(--green-pale), #fff);
  border: 2px solid var(--green-light);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.upgrade-banner-text {
  font-size: .9rem;
  color: var(--text);
}
.upgrade-banner-text strong { color: var(--green-dark); }

/* ============================================================
   MEAL PLANNER
   ============================================================ */
.meal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.meal-week-label {
  font-weight: 600;
  font-size: 1rem;
  min-width: 10rem;
  text-align: center;
}
.meal-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .5rem;
}
.meal-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.meal-day-today {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green);
}
.meal-day-header {
  background: var(--green-pale);
  padding: .4rem .5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  font-weight: 600;
}
.meal-day-today .meal-day-header {
  background: var(--green);
  color: #fff;
}
.meal-day-name { text-transform: uppercase; font-size: .7rem; letter-spacing: .03em; }
.meal-day-date { font-size: .85rem; }

.meal-slot {
  padding: .4rem .5rem;
  border-top: 1px solid var(--border);
  min-height: 3.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.meal-slot-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: .2rem;
}
.meal-slot-content {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 1;
}
.meal-slot-link {
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  padding: .15rem;
  margin: -.15rem;
  transition: background .1s;
}
.meal-slot-link:hover { background: var(--green-pale); }
.meal-slot-img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.meal-slot-title {
  font-size: .75rem;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.meal-slot-empty {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.meal-slot-add {
  flex: 1;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  min-height: 1.8rem;
  transition: border-color .15s, color .15s;
}
.meal-slot-add:hover {
  border-color: var(--green);
  color: var(--green);
}

/* Recipe picker overlay */
.recipe-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.recipe-picker {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 400px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}
.recipe-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.recipe-picker-header h3 { font-size: .95rem; }
.recipe-picker-list {
  overflow-y: auto;
  flex: 1;
}
.recipe-pick-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .6rem 1rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  font-size: .9rem;
  transition: background .1s;
}
.recipe-pick-item:hover { background: var(--green-pale); }
.recipe-pick-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.recipe-pick-img-placeholder {
  background: var(--border);
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 768px) {
  .meal-calendar {
    grid-template-columns: 1fr;
  }
  .meal-day {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    align-items: stretch;
  }
  .meal-day-header {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    padding: .5rem .3rem;
    justify-content: center;
    gap: .25rem;
  }
  .meal-slot {
    border-top: none;
    border-left: 1px solid var(--border);
  }
}

@media (max-width: 400px) {
  .app-main { padding: .75rem; }
  .form-row { grid-template-columns: 1fr; }
  .filter-row { flex-direction: column; }
  .plan-grid { grid-template-columns: 1fr 1fr; }
  .upgrade-banner { flex-direction: column; text-align: center; }
  .meal-day {
    grid-template-columns: 1fr;
  }
  .meal-day-header {
    writing-mode: horizontal-tb;
  }
  .meal-slot {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

/* ============================================================
   COOKIE CONSENT BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--green-dark);
  color: #fff;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-size: .875rem;
  box-shadow: 0 -2px 10px rgba(0,0,0,.15);
}
.cookie-banner p { margin: 0; max-width: 600px; }
.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.cookie-banner-link { color: #fff; text-decoration: underline; font-size: .85rem; }
.cookie-banner .btn { white-space: nowrap; }
@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column;
    text-align: center;
    gap: .75rem;
    padding: 1rem;
  }
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  font-size: .8rem;
  color: var(--text-muted);
}
.site-footer a { color: var(--text-muted); text-decoration: underline; }

/* ============================================================
   TERMS PAGE
   ============================================================ */
.terms-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
}
.terms-content h2 {
  font-size: 1.05rem;
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  color: var(--green-dark);
}
.terms-content p,
.terms-content ul {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: .75rem;
}
.terms-content ul {
  padding-left: 1.5rem;
}
.terms-content li {
  margin-bottom: .35rem;
}

/* ============================================================
   RECIPE OF THE DAY BANNER
   ============================================================ */
.rotd-banner {
  background: var(--green-pale);
  border-bottom: 1px solid var(--border);
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
}
.rotd-banner.hidden { display: none; }
body.cooking-active .rotd-banner { display: none; }
.rotd-banner-link { color: var(--green-dark); font-weight: 600; white-space: nowrap; }
.rotd-step-num { font-weight: 600; margin-right: .25rem; }

/* ROTD archive list */
.rotd-archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rotd-archive-item {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .5rem .25rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background .15s;
}
.rotd-archive-item:last-child { border-bottom: none; }
.rotd-archive-item:hover { background: var(--green-pale); }
.rotd-archive-item.active { background: var(--green-pale); font-weight: 600; }
.rotd-archive-today { font-weight: 600; }
.rotd-archive-today .rotd-archive-date { color: var(--green-dark); }
.rotd-archive-today.hidden { display: none; }
.rotd-archive-date {
  font-size: .8rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 9rem;
}
.rotd-archive-title {
  font-size: .9rem;
  color: var(--text);
  line-height: 1.3;
}

/* ============================================================
   DESCRIPTION MODAL
   ============================================================ */
.desc-clickable {
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.desc-clickable:hover { color: var(--green-dark); }
.desc-modal { max-width: 480px; }
.desc-modal-body {
  padding: 1rem;
  overflow-y: auto;
  max-height: 60vh;
  line-height: 1.6;
  font-size: .95rem;
  color: var(--text);
}