/*
MI-közreműködés: ChatGPT Codex (OpenAI).
Felhasználás: Meglévő stílusok módosítása és Bootstrap-alapú felület továbbfejlesztése a saját megadott igények alapján.
A jelölés MI-vel támogatott közreműködést jelez; nem állítja a teljes fájl MI-eredetét.
A személyes kódellenőrzés és a megértés igazolása a hallgató feladata; ez a fejléc nem igazolja ezek elvégzését.
Részletes összefoglaló: AI-USAGE.md.
*/
html {
  font-size: 14px;
  --app-bg: #f7faf5;
  --app-surface: #ffffff;
  --app-surface-strong: #212529;
  --app-surface-alt: #eef8e9;
  --app-text: #212529;
  --app-muted: #6c757d;
  --app-border: #d8e2d4;
  --app-shadow: rgba(32, 62, 21, 0.1);
  --app-link: #2d7417;
  --app-primary: #55c525;
  --app-primary-hover: #49ae1f;
  --app-primary-text: #17320d;
  --app-danger: #dc3545;
  --app-success: #2d7417;
  --app-success-bright: #55c525;
  --app-focus: #87d765;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--app-surface), 0 0 0 0.25rem var(--app-focus);
}

a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.navbar-toggler:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--app-focus);
  outline-offset: 2px;
}

html {
  position: relative;
  min-height: 100%;
  scroll-padding-top: 5rem;
}

body {
  background-color: var(--app-bg);
  color: var(--app-text);
  margin-bottom: 60px;
}

a {
  color: var(--app-link);
}

a:hover {
  color: #245e12;
}

.site-header {
  background: var(--app-surface);
  border-top: 3px solid var(--app-primary);
  box-shadow: 0 2px 12px var(--app-shadow);
}

.site-navbar {
  background: var(--app-surface);
}

.navbar-brand {
  color: var(--app-primary-text);
  font-weight: 600;
}

.navbar-brand::before {
  background: var(--app-primary);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 0.65rem;
  margin-right: 0.45rem;
  width: 0.65rem;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: var(--app-link);
}

::selection {
  background: var(--app-primary);
  color: var(--app-primary-text);
}

.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-color: var(--app-primary-text);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-hover-color: var(--app-primary-text);
  --bs-btn-active-bg: var(--app-primary-hover);
  --bs-btn-active-border-color: var(--app-primary-hover);
  --bs-btn-active-color: var(--app-primary-text);
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
  --bs-btn-disabled-color: var(--app-primary-text);
  font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-color: var(--app-link);
  --bs-btn-border-color: var(--app-link);
  --bs-btn-hover-bg: var(--app-link);
  --bs-btn-hover-border-color: var(--app-link);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--app-link);
  --bs-btn-active-border-color: var(--app-link);
  --bs-btn-active-color: #ffffff;
}

.form-check-input:checked {
  background-color: var(--app-link);
  border-color: var(--app-link);
}

.page-item.active .page-link {
  background-color: var(--app-link);
  border-color: var(--app-link);
}

.page-link {
  color: var(--app-link);
}

.text-bg-success {
  background-color: var(--app-link) !important;
}

.app-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  box-shadow: 0 0.4rem 1.2rem var(--app-shadow);
  padding: 1.5rem;
}

.page-header {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.page-header h1,
.page-header p {
  margin-bottom: 0;
}

.page-header p {
  margin-top: 0.35rem;
}

.app-stat {
  border-left: 4px solid var(--app-primary);
  box-shadow: none;
  padding: 1rem;
}

.empty-state {
  background: var(--app-surface-alt);
  border: 1px dashed #9fbd92;
  border-radius: 0.75rem;
  color: var(--app-muted);
  padding: 1.5rem;
  text-align: center;
}

.navbar-toggler {
  border-color: var(--app-border);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2815, 23, 42, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.auth-shell {
  display: grid;
  justify-items: center;
  margin: 1rem auto 3rem;
  max-width: 720px;
}

.auth-panel {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  box-shadow: 0 0.4rem 1.2rem var(--app-shadow);
  padding: 1.75rem;
  width: 100%;
}

.auth-panel-narrow {
  width: min(100%, 520px);
}

.auth-header {
  margin-bottom: 1.5rem;
}

.auth-header h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0;
}

.auth-kicker {
  color: var(--app-muted);
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.auth-form {
  display: grid;
  gap: 1rem;
}

.required-field {
  position: relative;
}

.password-requirements {
  display: none;
}

.password-requirements.is-visible {
  display: block;
}

.password-requirement {
  color: var(--app-muted);
  margin-bottom: 0.2rem;
}

.password-rule-icon {
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  width: 1.25rem;
}

.password-requirement.is-met {
  color: var(--app-success);
}

.password-requirement.is-met .password-rule-icon {
  color: var(--app-success);
}

.password-requirement.is-missing {
  color: var(--app-danger);
}

.password-requirement.is-missing .password-rule-icon {
  color: var(--app-danger);
}

.password-match-feedback {
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.password-match-feedback.is-match {
  color: var(--app-success);
}

.password-match-feedback.is-mismatch {
  color: var(--app-danger);
}

.auth-submit {
  width: 100%;
}

.auth-switch,
.auth-secondary-link {
  color: var(--app-muted);
  margin: 0;
}

.auth-switch a,
.auth-secondary-link a {
  font-weight: 600;
}

.form-control,
.form-select {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--app-surface);
  color: var(--app-text);
}

.form-floating > label {
  color: var(--app-muted);
}

.footer {
  background: var(--app-surface);
  border-color: var(--app-border) !important;
}

@media (max-width: 640px) {
  .auth-panel {
    padding: 1.25rem;
  }

  .app-card {
    padding: 1.25rem;
  }

  .page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .status-page {
    padding: 0;
  }

}

.recipe-search-form,
.recipe-editor-shell,
.recipe-details {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: 0 0.4rem 1.2rem var(--app-shadow);
}

.recipe-search-form {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1.25rem;
}

.recipe-filter-grid,
.recipe-form-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.recipe-filter-actions {
  align-items: end;
  display: flex;
  gap: 0.5rem;
}

.recipe-filter-validation {
  margin-bottom: 1rem;
}

.privacy-policy {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: 0 10px 30px var(--app-shadow);
  display: grid;
  gap: 1.5rem;
  margin: 2rem auto 4rem;
  max-width: 900px;
  padding: 2rem;
}

.privacy-policy header,
.privacy-policy section,
.privacy-policy h1,
.privacy-policy h2,
.privacy-policy p {
  margin-bottom: 0;
}

.privacy-policy section {
  display: grid;
  gap: 0.5rem;
}

.privacy-policy h2 {
  font-size: 1.25rem;
}

.catalog-allergen-filters {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.catalog-allergen-filters details {
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: 0.8rem 1rem;
}

.catalog-allergen-filters summary {
  cursor: pointer;
  font-weight: 700;
}

.catalog-allergen-filters fieldset {
  border: 0;
  margin: 0.75rem 0 0;
  padding: 0;
}

.catalog-allergen-grid {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recipe-results-summary {
  color: var(--app-muted);
  margin-bottom: 1rem;
}

.recipe-card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.recipe-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  box-shadow: 0 0.25rem 0.8rem var(--app-shadow);
  min-width: 0;
  overflow: hidden;
}

.status-page {
  overflow: hidden;
  padding: 0;
  text-align: center;
}

.status-code {
  background: var(--app-surface-alt);
  border-bottom: 1px solid var(--app-border);
  color: var(--app-link);
  font-size: clamp(4rem, 14vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1;
  padding: 2rem 1rem 1.5rem;
}

.status-content {
  padding: 1.75rem;
}

.status-content h1 {
  margin-bottom: 0.75rem;
}

.status-content p {
  color: var(--app-muted);
  margin: 0 auto 1.5rem;
  max-width: 34rem;
}

.recipe-card-image-link,
.recipe-cover-large {
  background: var(--app-surface-strong);
  display: block;
  overflow: hidden;
}

.recipe-card-image-link {
  aspect-ratio: 4 / 3;
}

.recipe-card-image-link img,
.recipe-cover-large img,
.recipe-gallery img,
.existing-cover img,
.existing-gallery-item img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.recipe-image-placeholder {
  align-items: center;
  background: linear-gradient(135deg, var(--app-surface-strong), var(--app-border));
  color: var(--app-muted);
  display: flex;
  font-size: 1.4rem;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  min-height: 180px;
}

.recipe-card-body {
  display: grid;
  gap: 0.65rem;
  padding: 1.1rem;
}

.recipe-card-body h3,
.recipe-card-body p {
  margin: 0;
}

.recipe-card-body h3 a {
  color: var(--app-text);
  text-decoration: none;
}

.recipe-card-body p {
  color: var(--app-muted);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.recipe-card-meta,
.recipe-meta {
  color: var(--app-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  gap: 0.75rem;
}

.recipe-card-community {
  color: var(--app-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 0.65rem;
}

.recipe-card-dietary {
  border-block: 1px solid var(--app-border);
  color: var(--app-muted);
  display: grid;
  gap: 0.35rem;
  padding: 0.6rem 0;
}

.recipe-card-nutrition {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 0.65rem;
}

.recipe-interactions {
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.25rem;
}

.interaction-summary,
.recipe-interaction-controls,
.rating-control-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.interaction-summary h2 {
  margin: 0 auto 0 0;
}

.recipe-rating-summary {
  display: flex;
  gap: 0.35rem;
}

.interaction-guidance {
  color: var(--app-muted);
  margin: 0;
}

.star-rating-form {
  display: flex;
  gap: 0.15rem;
}

.star-rating-button {
  background: transparent;
  border: 0;
  color: var(--app-muted);
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1;
  padding: 0.15rem;
}

.star-rating-button:hover,
.star-rating-button:focus,
.star-rating-button.is-selected {
  color: var(--app-success);
}
.star-rating-button:focus-visible {
  outline: 2px solid var(--app-link);
  outline-offset: 2px;
}

.recipe-comments {
  border-top: 1px solid var(--app-border);
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
  padding-top: 2rem;
}

.comments-header h2,
.comments-header p {
  margin: 0;
}

.comment-create-form,
.comment-edit-form {
  display: grid;
  gap: 0.75rem;
}

.comment-form-footer,
.comment-actions,
.comment-edit-form > div {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.comment-actions {
  align-items: flex-start;
  flex-wrap: wrap;
}

.recipe-reporting {
  margin: 0.75rem 0 1.5rem;
}

.content-report {
  max-width: 36rem;
}

.content-report summary {
  color: var(--app-link);
  cursor: pointer;
  font-size: 0.875rem;
  width: fit-content;
}

.content-report-panel {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  margin-top: 0.5rem;
  padding: 1rem;
}

.content-report-form {
  display: grid;
  gap: 0.75rem;
  min-width: min(28rem, 75vw);
}

.content-report-message {
  margin: 0;
}

.comment-actions .content-report {
  margin-left: auto;
}

.comment-form-footer {
  justify-content: space-between;
}

.recipe-comment-list {
  display: grid;
  gap: 1rem;
}

.recipe-comment {
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: 1rem;
}

.recipe-comment header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.recipe-comment time,
.comment-edited,
.comment-empty-state {
  color: var(--app-muted);
  font-size: 0.85rem;
}

.comment-body {
  margin: 0.75rem 0;
  white-space: pre-wrap;
}

.comment-actions form {
  margin: 0;
}

.recipe-pagination {
  margin-top: 1.5rem;
}

.recipe-editor-shell,
.recipe-details {
  margin: 2rem auto 4rem;
  max-width: 960px;
  padding: 2rem;
}

.recipe-page-header,
.recipe-details-header {
  margin-bottom: 1.5rem;
}

.recipe-page-header h1,
.recipe-details-header h1 {
  margin: 0;
}

.recipe-details-header {
  align-items: start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.recipe-form {
  display: grid;
  gap: 1.25rem;
}

.recipe-form-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recipe-description-input {
  min-height: 160px;
}

.recipe-image-fields {
  border-top: 1px solid var(--app-border);
  display: grid;
  gap: 0.75rem;
  padding-top: 1.25rem;
}

.structured-recipe-section {
  border-top: 1px solid var(--app-border);
  display: grid;
  gap: 1rem;
  padding-top: 1.25rem;
}

.structured-section-header {
  align-items: start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.structured-section-header h2,
.structured-section-header p {
  margin: 0;
}

.structured-section-header p {
  color: var(--app-muted);
  margin-top: 0.25rem;
}

.structured-row-list {
  display: grid;
  gap: 1rem;
}

.structured-row {
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: 1rem;
}

.ingredient-row {
  align-items: end;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(150px, 1.4fr) minmax(100px, 0.65fr) minmax(150px, 1fr) minmax(150px, 1.2fr) auto;
}

.preparation-step-row {
  align-items: start;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.step-number {
  align-items: center;
  background: var(--app-link);
  border-radius: 999px;
  color: #ffffff;
  display: flex;
  font-weight: 700;
  height: 2rem;
  justify-content: center;
  margin-top: 2rem;
  width: 2rem;
}

.structured-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ingredient-row .structured-row-actions {
  padding-bottom: 0.1rem;
}

.preparation-step-row .structured-row-actions {
  margin-top: 1.9rem;
}

.recipe-image-fields h2,
.recipe-description h2,
.recipe-details section > h2 {
  font-size: 1.35rem;
}

.existing-cover {
  display: grid;
  gap: 0.75rem;
  max-width: 320px;
}

.existing-cover img {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
}

.existing-gallery-edit,
.recipe-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.existing-gallery-item {
  display: grid;
  gap: 0.4rem;
}

.existing-gallery-item img,
.recipe-gallery img {
  aspect-ratio: 1;
  border-radius: 8px;
}

.recipe-form-actions {
  display: flex;
  gap: 0.75rem;
}

.recipe-cover-large {
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.recipe-description {
  margin-bottom: 2rem;
}

.recipe-content-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  margin-bottom: 2rem;
}

.recipe-ingredient-list,
.recipe-step-list {
  display: grid;
  gap: 0.75rem;
}

.recipe-ingredient-list {
  list-style: none;
  padding: 0;
}

.recipe-ingredient-list li {
  border-bottom: 1px solid var(--app-border);
  display: grid;
  gap: 0.15rem;
  grid-template-columns: minmax(90px, auto) 1fr;
  padding-bottom: 0.65rem;
}

.recipe-ingredient-list small {
  color: var(--app-muted);
  grid-column: 2;
}

.recipe-step-list {
  padding-left: 1.5rem;
}

.recipe-step-list li {
  padding-left: 0.35rem;
  white-space: pre-line;
}

.recipe-description p {
  white-space: pre-line;
}

.nutrition-input-grid,
.allergen-editor-grid,
.recipe-data-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nutrition-input-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.allergen-review-check {
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  padding: 0.9rem 1rem 0.9rem 2.5rem;
}

.allergen-editor fieldset,
.recipe-data-panel {
  background: var(--app-bg);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  min-width: 0;
  padding: 1rem;
}

.allergen-editor legend {
  float: none;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0;
  width: auto;
}

.allergen-option-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.allergen-option {
  margin: 0;
}

.recipe-data-grid {
  margin-bottom: 2rem;
}

.recipe-data-panel h2 {
  margin-bottom: 1rem;
}

.nutrition-facts {
  display: grid;
  gap: 0;
  margin: 0;
}

.nutrition-facts > div {
  align-items: baseline;
  border-bottom: 1px solid var(--app-border);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.55rem 0;
}

.nutrition-facts > div:last-child {
  border-bottom: 0;
}

.nutrition-facts dt,
.nutrition-facts dd {
  margin: 0;
}

.allergen-group + .allergen-group {
  margin-top: 1rem;
}

.allergen-group h3 {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.allergen-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.allergen-badge {
  border: 1px solid var(--app-border);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
}

.allergen-contains {
  background: color-mix(in srgb, var(--app-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--app-danger) 45%, var(--app-border));
  color: var(--app-danger);
}

.allergen-may-contain {
  background: color-mix(in srgb, var(--app-link) 10%, transparent);
  border-color: color-mix(in srgb, var(--app-link) 40%, var(--app-border));
  color: var(--app-link);
}

.allergen-none {
  color: var(--app-success);
}

@media (max-width: 900px) {
  .recipe-filter-grid,
  .recipe-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ingredient-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nutrition-input-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ingredient-row .structured-row-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .recipe-filter-grid,
  .recipe-card-grid,
  .recipe-form-row,
  .catalog-allergen-filters,
  .catalog-allergen-grid,
  .existing-gallery-edit,
  .recipe-gallery {
    grid-template-columns: 1fr;
  }

  .recipe-filter-actions,
  .recipe-details-header {
    align-items: stretch;
    flex-direction: column;
  }

  .recipe-editor-shell,
  .recipe-details {
    padding: 1.25rem;
  }

  .structured-section-header,
  .preparation-step-row {
    grid-template-columns: 1fr;
  }

  .structured-section-header {
    flex-direction: column;
  }

  .ingredient-row,
  .recipe-content-grid,
  .recipe-data-grid,
  .allergen-editor-grid,
  .allergen-option-grid,
  .nutrition-input-grid {
    grid-template-columns: 1fr;
  }

  .step-number,
  .preparation-step-row .structured-row-actions {
    margin-top: 0;
  }
}

/* Shared appearance and readable controls. */
:root {
  font-size: 16px;
  --app-bg: #f8f7f3;
  --app-surface: #ffffff;
  --app-surface-alt: #edf2e8;
  --app-surface-strong: #233b31;
  --app-text: #233b31;
  --app-muted: #606b63;
  --app-border: #d8dfd5;
  --app-primary: #326447;
  --app-primary-hover: #264e36;
  --app-primary-text: #ffffff;
  --app-link: #285b3e;
  --app-success: #285b3e;
  --app-success-bright: #326447;
  --app-focus: #a36b1f;
  --app-shadow: rgba(35, 59, 49, .07);
  --bs-body-bg: var(--app-surface);
  --bs-body-color: var(--app-text);
  --bs-border-color: var(--app-border);
}
html[data-bs-theme="dark"] {
  color-scheme: dark;
  --app-bg: #191f1b;
  --app-surface: #242c26;
  --app-surface-alt: #2f3a30;
  --app-surface-strong: #e7eee5;
  --app-text: #e7eee5;
  --app-muted: #b5c2b7;
  --app-border: #48574b;
  --app-primary: #9cd3aa;
  --app-primary-hover: #b4e2be;
  --app-primary-text: #142b1b;
  --app-link: #b0dfbc;
  --app-success: #b0dfbc;
  --app-success-bright: #9cd3aa;
  --app-focus: #efc377;
  --app-shadow: rgba(0, 0, 0, .16);
  --bs-body-bg: var(--app-surface);
  --bs-body-color: var(--app-text);
  --bs-secondary-color: var(--app-muted);
  --bs-border-color: var(--app-border);
}
body { line-height: 1.65; margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
body > .container { flex: 1; }
h1, h2, h3 { color: var(--app-text); line-height: 1.25; font-weight: 650; letter-spacing: -.025em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
a { text-underline-offset: .2em; }
a:hover { color: var(--app-link); }
.text-muted, .form-text, caption { color: var(--app-muted) !important; }
.site-header { border-top: 4px solid var(--app-primary); margin-bottom: 1.5rem !important; box-shadow: none; }
.site-navbar { padding-block: .85rem; }
.navbar-brand, .navbar-brand:hover { color: var(--app-text); font-size: 1.5rem; font-weight: 750; }
.navbar-light .navbar-nav .nav-link, .nav-link { color: var(--app-text); }
.navbar-brand { display: inline-flex; align-items: center; gap: .5rem; letter-spacing: -.055em; }
.navbar-brand::before { display: none; }
.brand-mark { flex: none; color: var(--app-link); }
.navbar-nav .nav-link { padding: .55rem .85rem; border-radius: .4rem; font-weight: 600; }
.navbar-light .navbar-nav .nav-link.active { background: var(--app-surface-alt); color: var(--app-link); }
.navbar-preferences { display: flex; align-items: center; gap: .6rem; margin-inline: .75rem; }
.navbar-preferences .form-select { width: auto; max-width: 11rem; }
.language-form { margin: 0; }
.language-button { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.language-button img { border: 1px solid var(--app-border); border-radius: 2px; object-fit: cover; }
.btn, .form-control, .form-select { min-height: 44px; border-radius: .6rem; font-size: 1rem; }
.btn { font-weight: 600; padding: .6rem 1rem; }
.btn-sm { min-height: 40px; font-size: .95rem; }
.btn-primary { background: var(--app-primary); border-color: var(--app-primary); color: var(--app-primary-text); }
.btn-primary:hover, .btn-primary:focus { background: var(--app-primary-hover); border-color: var(--app-primary-hover); color: var(--app-primary-text); }
.btn-outline-primary { color: var(--app-link); border-color: var(--app-link); }
.btn-outline-primary:hover { background: var(--app-primary); border-color: var(--app-primary); color: var(--app-primary-text); }
.btn-outline-secondary { color: var(--app-text); border-color: var(--app-border); }
.btn-outline-secondary:hover { background: var(--app-surface-alt); color: var(--app-text); border-color: var(--app-muted); }
.form-control, .form-select, .form-control:focus { background-color: var(--app-surface); color: var(--app-text); border-color: var(--app-border); }
.form-control::placeholder { color: var(--app-muted); opacity: 1; }
.form-label { font-weight: 600; }
.form-check-input { width: 1.25em; height: 1.25em; margin-top: .2em; background-color: var(--app-surface); border-color: var(--app-muted); }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-check-label { cursor: pointer; }
.page-header { padding: 1.5rem 0 2rem; align-items: center; }
.page-header p { font-size: 1.1rem; max-width: 45rem; }
.recipe-search-form, .recipe-editor-shell, .recipe-details { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 1rem; box-shadow: 0 4px 20px var(--app-shadow); }
.recipe-search-form { padding: 1.5rem; margin-bottom: 2rem; }
.recipe-search-main input { font-size: 1.1rem; min-height: 52px; }
.catalog-filters { margin-top: 1rem; }
.catalog-filters > summary, .measurement-guide > summary { font-weight: 650; color: var(--app-link); padding: .6rem 0; cursor: pointer; }
.catalog-filters[open] > summary { margin-bottom: 1rem; }
.recipe-card { border: 1px solid var(--app-border); border-radius: 1rem; overflow: hidden; box-shadow: 0 3px 12px var(--app-shadow); background: var(--app-surface); }
.recipe-card:hover { border-color: var(--app-muted); }
.recipe-editor-shell { max-width: 1000px; margin: 0 auto 2rem; padding: clamp(1rem, 3vw, 2.5rem); box-shadow: none; }
.recipe-form { display: flex; flex-direction: column; gap: 1.5rem; }
.recipe-form > .structured-recipe-section { margin-top: 0; padding-top: 1.8rem; border-top: 1px solid var(--app-border); }
.structured-row { background: var(--app-surface-alt); border-color: var(--app-border); padding: 1rem; border-radius: .75rem; }
.structured-section-header p { color: var(--app-muted); }
.allergen-option { background: var(--app-surface); border-color: var(--app-border); min-height: 48px; padding-block: .7rem; }
.allergen-review-check { background: var(--app-surface-alt); padding: 1rem 1rem 1rem 2.8rem; border-radius: .7rem; margin-top: 1rem; }
.measurement-guide { background: var(--app-surface-alt); padding: .6rem 1rem; border: 1px solid var(--app-border); border-radius: .7rem; margin-block: 1rem; }
.measurement-guide .table { color: var(--app-text); --bs-table-bg: transparent; --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border); font-size: .95rem; }
.measurement-guide th, .measurement-guide td { white-space: nowrap; padding: .65rem; }
.recipe-form-actions { padding-top: 1rem; border-top: 1px solid var(--app-border); display: flex; gap: .75rem; }
.selected-photos { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.selected-photo { width: 160px; display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; overflow-wrap: anywhere; }
.selected-photo img { width: 160px; height: 110px; object-fit: cover; border-radius: .65rem; }
.validation-summary-valid, .field-validation-valid { display: none; }
.footer { position: static; margin-top: 3rem; padding-block: 1.5rem; line-height: 1.5; white-space: normal; background: var(--app-surface); }
html[data-bs-theme="dark"] .bg-light, html[data-bs-theme="dark"] .bg-white, html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .recipe-card-image-placeholder { background-color: var(--app-surface-alt) !important; color: var(--app-text); }
html[data-bs-theme="dark"] .text-dark { color: var(--app-text) !important; }

@media (max-width: 767px) {
  .navbar-preferences { margin: .7rem 0; }
  .navbar-collapse { padding-top: .75rem; }
  .recipe-search-form { padding: 1rem; }
  .page-header { align-items: flex-start; gap: 1rem; }
  .recipe-form-actions { flex-wrap: wrap; }
  .recipe-form-actions .btn { flex: 1; }
}

.optional-nutrition > summary { cursor: pointer; padding-block: .5rem; color: var(--app-link); }
.optional-nutrition > summary h2 { display: inline; font-size: 1.25rem; }
.optional-nutrition[open] > summary { margin-bottom: 1.25rem; }

.text-bg-success { color: var(--app-primary-text) !important; }

.structured-recipe-section { grid-template-columns: minmax(0, 1fr); }
.recipe-form > *, .recipe-content-grid > *, .recipe-data-grid > *, .structured-section-header > * { min-width: 0; }
.measurement-guide { min-width: 0; max-width: 100%; }
html[data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1); }

.form-text, small, .small, .btn-sm, .selected-photo, .measurement-guide .table { font-size: 1rem; }

.catalog-heading { margin: 0; padding: 2rem 0 2.25rem; gap: 1.5rem; }
.catalog-heading > div { max-width: 44rem; }
.catalog-heading .catalog-eyebrow { color: var(--app-link); font-size: .85rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .7rem; }
.catalog-heading h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.8rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: -.045em; margin-bottom: .7rem; }
.catalog-heading p:last-child { margin-bottom: 0; }
.catalog-heading > .btn { align-self: center; }
.landing-recipes { max-width: none; }
.recipe-search-form { margin: 0 0 2rem; box-shadow: none; border-radius: .85rem; padding: 1.4rem 1.5rem; }
.recipe-search-main .form-label { margin-bottom: .65rem; }
.catalog-search-line { display: flex; gap: .65rem; align-items: center; position: relative; }
.catalog-search-line .form-control { padding-left: 3rem; min-width: 0; height: 54px; }
.catalog-search-icon { position: absolute; left: 1rem; color: var(--app-muted); pointer-events: none; }
.catalog-search-line > .btn { white-space: nowrap; min-height: 54px; padding-inline: 1.75rem; }
.catalog-filters { border-top: 1px solid var(--app-border); padding-top: .8rem; margin-top: .8rem; }
.catalog-filters > summary { width: fit-content; padding: .35rem .8rem; border: 1px solid var(--app-border); border-radius: 2rem; font-size: 1rem; }
.catalog-filters[open] > summary { margin-bottom: 1.25rem; background: var(--app-surface-alt); }
.catalog-allergen-filters { margin-top: 1rem; }
.recipe-results-summary { display: flex; align-items: center; gap: 1rem; color: var(--app-text); font-weight: 650; margin-bottom: 1.25rem; }
.recipe-results-summary::after { content: ""; height: 1px; background: var(--app-border); flex: 1; }
.recipe-card-grid { gap: 1.5rem; align-items: stretch; }
.recipe-card { display: flex; flex-direction: column; border-radius: .8rem; box-shadow: none; }
.recipe-card-image-link { aspect-ratio: 4 / 3; background: var(--app-surface-alt); }
.recipe-card-body { display: flex; flex-direction: column; flex: 1; gap: .8rem; padding: 1.25rem; }
.recipe-card-meta { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .9rem; }
.recipe-card-meta span { padding: .15rem .5rem; border-radius: .3rem; background: var(--app-surface-alt); color: var(--app-link); font-weight: 650; }
.recipe-card-body h3 { font-size: 1.35rem; line-height: 1.3; letter-spacing: -.025em; font-weight: 750; }
.recipe-card-body h3 a:hover { text-decoration: underline; text-underline-offset: .2em; }
.recipe-card-description { color: var(--app-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.55; }
.recipe-card-author { color: var(--app-muted); }
.recipe-card-community { display: flex; flex-wrap: wrap; column-gap: .8rem; row-gap: .2rem; padding-top: .6rem; border-top: 1px solid var(--app-border); }
.recipe-card-community > span { font-size: .9rem; color: var(--app-muted); }
.recipe-card-community > span:first-child { color: var(--app-link); font-weight: 650; }
.recipe-card-dietary { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--app-border); gap: .4rem; }
.recipe-card-dietary small { font-size: .9rem; line-height: 1.5; }
.recipe-card-nutrition { font-size: .9rem; }
.recipe-image-placeholder { background: var(--app-surface-alt); color: var(--app-link); font-family: Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
.recipe-page-header h1, .recipe-details-header h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; }
.recipe-page-header p { margin-bottom: 0; max-width: 44rem; }
.recipe-basics { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; border: 0; min-width: 0; }
.recipe-basics > legend { font-size: 1.25rem; font-weight: 700; margin-bottom: .25rem; }
.recipe-description-input { min-height: 150px; }
.recipe-form > .structured-recipe-section { padding-top: 1.5rem; }
.recipe-details { max-width: 1160px; padding: 0; margin-top: 2rem; border: 0; box-shadow: none; background: transparent; }
.recipe-details-header { padding-bottom: 1.5rem; border-bottom: 1px solid var(--app-border); margin-bottom: 1.5rem; }
.recipe-cover-large { border-radius: .85rem; aspect-ratio: 16 / 9; max-height: 560px; }
.recipe-description { max-width: 52rem; padding-block: 1.5rem; }
.recipe-description > p { font-size: 1.1rem; line-height: 1.8; }
.recipe-content-grid { gap: 1.5rem; margin-block: 0 2rem; align-items: start; }
.recipe-content-grid > section { border: 1px solid var(--app-border); border-radius: .85rem; padding: 1.5rem; background: var(--app-surface); }
.recipe-content-grid > section:first-child { background: var(--app-surface-alt); }
.recipe-content-grid h2 { margin-bottom: 1.1rem; }
.recipe-interactions, .recipe-reporting, .recipe-comments { padding: 1.5rem; border: 1px solid var(--app-border); border-radius: .85rem; background: var(--app-surface); margin-top: 1.5rem; }
.recipe-form-actions > .btn-primary { padding-inline: 2rem; }
@media (max-width: 767px) {
  .catalog-heading { padding: 1.25rem 0 1.5rem; }
  .catalog-heading > .btn { align-self: flex-start; }
  .catalog-search-line { display: grid; grid-template-columns: minmax(0, 1fr); }
  .catalog-search-icon { top: 16px; }
  .catalog-search-line > .btn { min-height: 46px; }
  .recipe-search-form { padding: 1rem; }
  .recipe-card-grid { gap: 1rem; }
  .recipe-details-header { flex-direction: column; align-items: stretch; }
  .recipe-details-header > div:last-child { flex-wrap: wrap; }
  .recipe-content-grid > section, .recipe-interactions, .recipe-reporting, .recipe-comments { padding: 1rem; }
  .recipe-editor-shell { padding: 1.25rem; }
  .recipe-card-body { padding: 1rem; }
}