/* Shared UI: a small type scale, stable navigation and predictable controls. */
.app-ui {
  --page: #f6f6f3; --surface: #fff; --surface-soft: #f1f3f0;
  --ink: #242d29; --muted: #606b65; --line: #dde3dd;
  --accent: #925300; --accent-soft: #fff3de; --danger: #b42332;
  --nav-height: 0px;
  background: var(--page); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%;
}
.app-ui[data-theme="green"] { --accent: #237346; --accent-soft: #eaf6ee; }
.app-ui[data-theme="purple"] { --accent: #7843a3; --accent-soft: #f3edfa; }
.app-ui[data-theme="teal"] { --accent: #126f6b; --accent-soft: #e5f5f3; }
.app-ui[data-theme="brightRed"] { --accent: #b32e3b; --accent-soft: #ffedef; }
.app-ui[data-theme="brightOrange"] { --accent: #a64b13; --accent-soft: #fff0e7; }
.app-ui:is([data-theme="dark"], [data-theme="darkSlate"], [data-theme="darkpurple"]) {
  color-scheme: dark; --page: #171b20; --surface: #222830; --surface-soft: #2b323b;
  --ink: #f0f2f4; --muted: #b2bdc8; --line: #444d58;
  --accent: #bba0f2; --accent-soft: #362d4b; --danger: #ff9aa5;
}
.app-ui *, .app-ui *::before, .app-ui *::after { box-sizing: border-box; }
.app-ui h1, .app-ui h2, .app-ui h3, .app-ui legend { color: var(--ink); line-height: 1.3; font-weight: 650; }
.app-ui h1 { font-size: clamp(1.6rem, 3vw, 2rem); letter-spacing: -.025em; }
.app-ui h2, .app-ui legend { font-size: 1.25rem; letter-spacing: -.015em; }
.app-ui h3 { font-size: 1.125rem; }
.app-ui .text-sm, .app-ui .text-xs { font-size: .875rem; line-height: 1.5; }
.app-ui :is(.text-gray-400, .text-gray-500, .text-gray-600) { color: var(--muted); }
.app-ui :is(.text-gray-700, .text-gray-800, .text-gray-900) { color: var(--ink); }
.app-ui .bg-white { background-color: var(--surface); }
.app-ui :is(.bg-gray-50, .bg-gray-100, .bg-gray-200) { background-color: var(--surface-soft); }
.app-ui :is(.border-gray-100, .border-gray-200, .border-gray-300) { border-color: var(--line); }
.app-ui .text-yellow-600 { color: var(--accent); }
.app-ui :is(.bg-yellow-500, .bg-yellow-400).text-white { background: var(--accent); }
.app-ui :is(button, input, select, textarea) { font-family: inherit; }
.app-ui button { min-height: 44px; font-size: .875rem; font-weight: 600; line-height: 1.4; }
.app-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  font-size: 16px; line-height: 1.5; min-height: 44px; min-width: 0;
  border: 1px solid var(--line); border-radius: 9px;
  background-color: var(--surface); color: var(--ink); padding: 10px 12px;
}
.app-ui textarea { resize: vertical; }
.app-ui input::placeholder, .app-ui textarea::placeholder { color: var(--muted); opacity: .85; }
.app-ui input:is([type="checkbox"], [type="radio"]) { accent-color: var(--accent); }
.app-ui input[type="checkbox"]:not(.sr-only) { width: 20px; height: 20px; flex-shrink: 0; }
.app-ui :is(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.app-ui button:disabled { opacity: .5; cursor: not-allowed; }
.app-ui .ui-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: 9px;
  font-size: .875rem; font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer;
}
.app-ui .ui-primary { background: var(--accent); color: #fff; }
.app-ui .ui-primary:hover { filter: brightness(.92); }
.app-ui .ui-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.app-ui .ui-secondary:hover { background: var(--surface-soft); }
.app-ui .ui-danger { color: var(--danger); }
.app-ui:is([data-theme="dark"], [data-theme="darkSlate"], [data-theme="darkpurple"]) .ui-primary { color: #171b20; }
.app-ui > main, .app-ui > section { width: 100%; max-width: 960px; margin: 24px auto 40px; padding-left: 20px; padding-right: 20px; }
.app-ui[data-page="recipes"] > main, .app-ui > .recipe-results { max-width: 1120px; }
.app-ui > main > section, .app-ui > section > .bg-white { border: 1px solid var(--line); box-shadow: 0 2px 6px #17231b05; border-radius: 14px; }
.app-ui > main > section, .app-ui > section > .bg-white { padding: 24px; }
.app-ui[data-page="profile"] main > section { padding: 0; border: 0; }
.app-ui[data-page="profile"] main > section > div { padding: 24px; border: 1px solid var(--line); box-shadow: none; }
.app-header { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.app-header-inner { max-width: 1120px; margin: auto; min-height: 72px; padding: 12px 20px; display: flex; align-items: center; gap: 24px; }
.app-brand { color: var(--ink); font-size: 1.25rem; font-weight: 750; letter-spacing: -.04em; white-space: nowrap; }
.app-brand span { color: var(--accent); }
.app-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.app-nav a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; font-size: .875rem; font-weight: 600; color: var(--muted); border-radius: 9px; }
.app-nav a[aria-current], .app-nav a:hover { color: var(--accent); background: var(--accent-soft); }
.app-admin-link { font-size: .875rem; color: var(--muted); padding: 10px 0; }
.page-heading, .recipe-toolbar { max-width: 960px; margin: 24px auto 0; padding: 0 20px; }
.page-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.page-heading h1 { font-size: 1.5rem; }
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--muted); font-size: .875rem; }
.page-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 4px 0 12px; }
.page-intro p { margin-top: 6px; color: var(--muted); font-size: .875rem; }
.page-intro .ui-button { flex-shrink: 0; }
.collection-tabs { display: flex; gap: 24px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.collection-tabs a { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 12px 0; border-bottom: 3px solid transparent; color: var(--muted); font-size: .875rem; font-weight: 600; }
.collection-tabs a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }
.collection-tabs a span { padding: 1px 7px; border-radius: 6px; background: var(--surface-soft); font-size: .75rem; }
.recipe-search { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.search-row { display: flex; align-items: center; gap: 10px; }
.search-field { position: relative; flex: 1; min-width: 0; }
.search-field input { width: 100%; padding-right: 40px !important; }
.search-field button { position: absolute; right: 3px; top: 0; min-width: 36px; font-size: 1.25rem; color: var(--muted); }
.search-options { display: flex; align-items: flex-start; gap: 16px; margin-top: 12px; }
.search-filters { flex: 1; min-width: 0; }
.app-ui summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-size: .875rem; font-weight: 600; color: var(--ink); }
.sort-control { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--muted); }
.sort-control select { max-width: 210px; }
.filter-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 12px 0 4px; }
.filter-fields label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: .875rem; }
.filter-fields select { width: 100%; }
.filter-fields .quick-filter { flex-direction: row; align-items: center; }
.filter-actions { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; }
.search-options:has(details[open]) { flex-wrap: wrap; }
.search-options:has(details[open]) .search-filters { flex-basis: 100%; }
.recent-heading, .results-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); }
.recent-heading h2 { font-size: .875rem; font-weight: 600; }
.recent-heading button { font-weight: 400; color: var(--muted); }
.results-heading { margin-bottom: 16px; font-size: .875rem; }
.surprise-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); }
.app-ui[data-page="recipes"] > main { margin-bottom: 8px; padding-bottom: 0; }
.app-ui > .recipe-results { margin-top: 0; }
#recipeGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.app-ui .card { border-color: var(--line); background: var(--surface); box-shadow: none; }
.app-ui .card:hover { box-shadow: 0 4px 18px #15291a0c; }
.app-ui .card .recipe-thumbnail { height: 170px; }
.app-ui .card .card-text-area { min-height: 104px; }
.app-ui .card .info-view { position: relative; }
.app-ui .card .card-text-area.no-image { min-height: 132px; }
.app-ui .card .info-view, .app-ui .card .ingredients-view { padding: 16px; }
.app-ui .card h3 { font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.app-ui .card .toggle-btn { min-height: 44px; color: var(--muted); background: var(--surface-soft); }
.app-ui .card .recipe-thumbnail > span, .app-ui .card .info-view > a > span { font-size: .75rem; letter-spacing: 0; text-transform: none; }
.app-ui .card .recipe-thumbnail > span.bg-yellow-400 { background: var(--accent); }
.recipe-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.recipe-actions { display: flex; align-items: center; gap: 8px; }
.action-menu { position: relative; }
.action-menu > summary { list-style: none; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); padding: 10px 14px; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; z-index: 20; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 24px #0002; }
.action-menu-panel button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 6px; }
.action-menu-panel button:hover { background: var(--surface-soft); }
.app-ui > .recipe-detail { margin-top: 20px; }
.recipe-detail > .relative { border-radius: 14px 14px 0 0; }
.recipe-detail > .relative img { width: 100%; max-height: 320px; object-fit: cover; }
.app-ui .recipe-detail > .bg-white { padding: 0; overflow: hidden; }
.recipe-detail > .bg-white > div { padding: 24px; }
.recipe-detail .recipe-step label p, .recipe-detail .ingredient-text { font-size: 1rem; line-height: 1.7; }
.recipe-detail .recipe-step > label { box-shadow: none; border-color: var(--line); background: var(--surface-soft); }
.recipe-detail #ingredientList label { padding-top: 6px; padding-bottom: 6px; }
.recipe-detail .text-\\[10px\\] { font-size: .75rem; letter-spacing: 0; }
.recipe-detail #decrServings, .recipe-detail #incrServings { width: 44px; height: 44px; }
.recipe-detail .speak-btn { font-weight: 400; }
.app-ui dialog { color: var(--ink); background: var(--surface); max-width: calc(100vw - 32px); border: 1px solid var(--line); }
.app-ui .cooking-step-host label { background: var(--surface-soft); }
.app-ui .cooking-step-host label p { font-size: clamp(1.125rem, 3vw, 1.5rem); line-height: 1.65; }
.app-ui #completeCookingStep { background: var(--accent); color: #fff; border-color: var(--accent); }
.app-ui .form-section { padding-top: 12px; border-top: 1px solid var(--line); min-width: 0; }
.app-ui .form-section legend { padding: 0 0 8px; }
.form-section > * + * { margin-top: 12px; }
.form-section > legend + .field-label { margin-top: 0; }
.form-section .field-label { display: block; margin-top: 18px; font-weight: 600; font-size: .875rem; }
.field-label span, .field-hint { color: var(--muted); font-weight: 400; font-size: .875rem; }
.field-hint { margin-top: 4px; margin-bottom: 8px; }
.basics-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 6px; }
.type-options { display: flex; flex-wrap: wrap; gap: 8px; }
.app-ui .type-btn, .app-ui .category-btn { padding: 8px 14px; border-radius: 9px; }
.ingredient-row { padding: 12px; border: 1px solid var(--line); background: var(--surface-soft); border-radius: 10px; }
.ingredient-row button[aria-label="Zutat entfernen"] { min-width: 44px; }
.ingredient-row button[aria-label="Zutat entfernen"]::after { content: "×"; font-size: 1.25rem; }
.ingredient-row button[aria-label="Zutat entfernen"] i { display: none; }
.app-ui .form-extras { border-top: 1px solid var(--line); padding-top: 12px; }
.form-extras summary { font-size: 1rem; }
.form-extras summary span { color: var(--muted); font-size: .875rem; font-weight: 400; margin-left: 6px; }
.form-extras .field-label { display: block; margin: 16px 0 8px; }
.form-extras textarea { margin-bottom: 12px; }
.image-upload-field .ui-button { width: auto; }
.form-save-bar { display: flex; gap: 12px; position: sticky; bottom: var(--nav-height); z-index: 10; background: var(--surface); border-top: 1px solid var(--line); padding: 16px 0; margin-top: 24px; }
.app-ui .recipe-picker { border: 1px solid var(--line); border-radius: 12px; padding: 12px 20px; background: var(--surface); box-shadow: none; }
.recipe-picker summary { font-size: 1rem; }
.recipe-picker summary span { float: right; color: var(--muted); font-size: .875rem; font-weight: 400; }
.recipe-picker[open] summary { margin-bottom: 12px; }
.shopping-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.app-ui #shoppingItems .item-text, #customShoppingItems label { font-size: 1rem; }
#shoppingItems label, #customShoppingItems label { min-height: 48px; align-items: center; }
#customShopping { padding-top: 16px; border-top: 1px solid var(--line); }
#customShoppingItems li { overflow-wrap: anywhere; }
#customShoppingItems label { min-width: 0; }
.app-ui[data-page="meal_plan"] a:is([aria-label="Vorherige Woche"], [aria-label="Nächste Woche"]) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.week-days { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.week-days > section { padding: 20px; border: 1px solid var(--line); box-shadow: none; }
.week-days h2 { font-size: 1.125rem; }
.day-add { border-top: 1px solid var(--line); padding-top: 4px; }
.day-add summary { color: var(--accent); }
.plan-add-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; padding-top: 8px; }
.plan-add-form > select { grid-column: 1 / -1; width: 100%; }
.plan-portions { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .875rem; }
.plan-portions input { width: 86px; }
.app-ui[data-page="profile"] select { flex: 1; width: 0; }
@media (max-width: 760px) {
  .app-ui:has(.app-nav) { --nav-height: calc(74px + env(safe-area-inset-bottom)); padding-bottom: calc(var(--nav-height) + 20px); }
  .app-header-inner { min-height: 60px; padding: 8px 20px; justify-content: space-between; }
  .app-nav { position: fixed; bottom: 0; left: 0; right: 0; margin: 0; height: var(--nav-height); padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; box-shadow: 0 -2px 12px #15291a08; }
  .app-nav a { flex-direction: column; gap: 3px; padding: 7px 2px; font-size: .75rem; line-height: 1.3; min-height: 60px; }
  .app-nav a svg { width: 22px; height: 22px; }
  .app-ui > main, .app-ui > section { margin-top: 16px; padding-left: 16px; padding-right: 16px; }
  .app-ui > main > section, .app-ui > section > .bg-white { padding: 20px; }
  .page-heading, .recipe-toolbar { margin-top: 16px; padding: 0 16px; }
  .page-heading { gap: 6px; flex-direction: column; align-items: flex-start; }
  .page-heading .back-link { min-height: 32px; }
  .page-heading h1 { font-size: 1.5rem; }
  .page-intro { align-items: flex-start; gap: 12px; }
  .page-intro h1 { font-size: 1.5rem; }
  .page-intro p { max-width: 220px; }
  .collection-tabs { gap: 20px; }
  .recipe-search { padding: 14px; }
  .search-options { gap: 10px; align-items: flex-start; }
  .sort-control > span { display: none; }
  .sort-control select { max-width: 180px; }
  .filter-fields { grid-template-columns: 1fr; }
  #recipeGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .app-ui .card .recipe-thumbnail { height: 126px; }
  .app-ui .card .info-view, .app-ui .card .ingredients-view { padding: 12px; }
  .recipe-toolbar { flex-wrap: wrap; }
  .recipe-actions { margin-left: auto; gap: 6px; }
  .recipe-actions .ui-button, .action-menu > summary { padding-left: 10px; padding-right: 10px; }
  .recipe-detail > .bg-white > div { padding: 20px; }
  .app-ui .recipe-detail > .bg-white { padding: 0; }
  .recipe-detail > .relative img { max-height: 220px; }
  .recipe-detail .flex:has(> #startCooking) { flex-wrap: wrap; }
  .recipe-detail #shoppingModeActions > div > div { flex-wrap: wrap; }
  .app-ui .recipe-picker { padding: 10px 16px; }
  .recipe-picker summary span { float: none; display: block; margin-left: 18px; }
  .recipe-picker form > .overflow-y-auto > div { flex-wrap: wrap; }
  .recipe-picker form > .overflow-y-auto > div > label { flex-basis: 100%; }
  .recipe-picker form > .overflow-y-auto > div > span { margin-left: 32px; }
  .week-days { grid-template-columns: 1fr; gap: 12px; }
  .app-ui[data-page="profile"] main > section > div { padding: 20px; }
  .app-ui[data-page="profile"] main > section { margin-left: 0; margin-right: 0; padding: 0; }
  html { scroll-padding-bottom: 160px; scroll-padding-top: 80px; }
}
@media (max-width: 350px) {
  #recipeGrid { grid-template-columns: 1fr; }
  .page-intro { flex-wrap: wrap; }
  .recipe-toolbar > .back-link { flex-basis: 100%; }
  #customShoppingForm { flex-wrap: wrap; }
  #customShoppingForm input { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .app-ui *, .app-ui *::before, .app-ui *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .app-ui { padding: 0; background: #fff; color: #000; }
  .app-ui .app-header, .app-ui .app-nav, .app-ui .page-heading, .app-ui .recipe-toolbar, .app-ui .form-save-bar { display: none !important; }
  .app-ui .recipe-detail, .app-ui > main { margin: 0 auto; padding: 0; }
  .app-ui .recipe-detail > .bg-white { border: 0; }
}

.app-ui span.bg-green-500 { background: #187943; color: #fff; }
.app-ui:is([data-theme="dark"], [data-theme="darkSlate"], [data-theme="darkpurple"]) #completeCookingStep { color: #171b20; }