/* Wireframe / Styleguide theme — scoped to #tea-recipe-app */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&display=swap');

#tea-recipe-app {
  --bg: #F4EEDC;
  --surface: #FAF7EC;
  --surface-2: #EEE8D7;
  --ink: #073F3F;
  --ink-muted: #5E655F;
  --accent: #2D8A7A;
  --accent-ink: #FFF9E9;
  --accent-soft: #D9E6C8;
  --pop: #FF5738;
  --pop-ink: #FFF7E8;
  --good: #2D8A7A;
  --good-soft: #DCE9CE;
  --warn: #A33A56;
  --warn-soft: #F0D7D0;
  --line: #CFC8B5;
  --line-soft: #DED8C8;
  --c1: #2D8A7A;
  --c1-ink: #FFF7E8;
  --c2: #FF5738;
  --c2-ink: #FFF7E8;
  --c3: #E8C63E;
  --c3-ink: #073F3F;
  --c4: #94CC7C;
  --c4-ink: #073F3F;
  --c5: #6E3347;
  --c5-ink: #FFF7E8;
  --c6: #2AA483;
  --c6-ink: #FFF7E8;
  --shadow: 9px 9px 0 rgba(52, 51, 49, 0.2);
  --shadow-sm: 5px 5px 0 rgba(52, 51, 49, 0.16);
  --radius-lg: 0;
  --radius-md: 0;
  --radius-sm: 0;
  --font-display: "Anton", Impact, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

#tea-recipe-app h1,
#tea-recipe-app .wfd-page-head h1,
#tea-recipe-app .wfd-brand {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.94;
}

#tea-recipe-app .wfd-section-label h2,
#tea-recipe-app .wfd-section-label--hero h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

#tea-recipe-app h3,
#tea-recipe-app .wfd-card-title,
#tea-recipe-app .wfd-subsection-title {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

#tea-recipe-app .shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 20px 100px;
}

/* Topbar */
#tea-recipe-app .wfd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 18px;
  border-bottom: 1px solid var(--line);
}

#tea-recipe-app .wfd-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(22px, 4vw, 27px);
  color: var(--ink);
  letter-spacing: -0.045em;
}

#tea-recipe-app .wfd-brand svg {
  flex: none;
  width: 22px;
  height: 22px;
}

#tea-recipe-app .wfd-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

#tea-recipe-app .wfd-household-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--ink);
  max-width: min(220px, 42vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tea-recipe-app .wfd-household-pill .star {
  color: var(--pop);
}

#tea-recipe-app .wfd-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  cursor: pointer;
  flex: none;
}

#tea-recipe-app .app-build-sha {
  font-size: 11px;
  opacity: 0.55;
}

/* Tabs */
#tea-recipe-app nav.wfd-tabs {
  display: flex;
  gap: 2px;
  padding: 12px 0 0;
  overflow-x: auto;
}

#tea-recipe-app nav.wfd-tabs button {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  justify-content: center;
  white-space: nowrap;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink-muted);
  font: 700 12px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

#tea-recipe-app nav.wfd-tabs button svg {
  opacity: 0.75;
  flex: none;
}

#tea-recipe-app nav.wfd-tabs button[aria-current="page"] {
  background: var(--ink);
  color: var(--accent-ink);
  border-bottom-color: var(--pop);
}

#tea-recipe-app nav.wfd-tabs button[aria-current="page"] svg {
  opacity: 1;
}

#tea-recipe-app nav.wfd-tabs button:not([aria-current="page"]):hover {
  background: var(--surface-2);
  border-bottom-color: var(--pop);
}

/* Screens / panels */
#tea-recipe-app [data-app-panel] {
  padding-top: 34px;
}

#tea-recipe-app [data-app-panel][hidden] {
  display: none !important;
}

#tea-recipe-app .wfd-page-head {
  margin-bottom: 26px;
}

#tea-recipe-app .wfd-page-head h1 {
  font-size: clamp(48px, 7vw, 86px);
  margin: 0 0 4px;
  color: var(--ink);
  line-height: 0.9;
}

#tea-recipe-app .wfd-page-head p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14.5px;
  text-transform: none;
  font-family: var(--font-body);
  font-weight: 400;
}

#tea-recipe-app .wfd-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 34px 0 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
}

#tea-recipe-app .wfd-section-label h2 {
  font-size: 25px;
  margin: 0;
}

#tea-recipe-app .wfd-section-label .count {
  color: var(--ink-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

#tea-recipe-app .wfd-section-link {
  border: none;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  font-size: 12.5px;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
}

#tea-recipe-app .wfd-section-link:hover {
  text-decoration: underline;
}

#tea-recipe-app .wfd-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 24px;
}

#tea-recipe-app .wfd-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  padding: 0;
}

/* Drawer */
#tea-recipe-app .wfd-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.4);
  z-index: 60;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

#tea-recipe-app .wfd-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

#tea-recipe-app .wfd-drawer-overlay[hidden] {
  display: none !important;
}

#tea-recipe-app .wfd-drawer {
  width: min(300px, 86vw);
  height: 100%;
  background: var(--surface);
  box-shadow: -9px 0 0 rgba(52, 51, 49, 0.18);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transform: translateX(16px);
  transition: transform 0.2s ease;
  overflow-y: auto;
}

#tea-recipe-app .wfd-drawer-overlay.open .wfd-drawer {
  transform: translateX(0);
}

#tea-recipe-app .wfd-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

#tea-recipe-app .wfd-drawer-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

#tea-recipe-app .wfd-drawer-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex: none;
}

#tea-recipe-app .wfd-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 10px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

#tea-recipe-app .wfd-drawer-link:hover {
  background: var(--accent-soft);
}

#tea-recipe-app .wfd-drawer-divider {
  height: 1px;
  background: var(--line);
  margin: 10px 0;
}

#tea-recipe-app .wfd-drawer-close {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* FAB + chat overlay */
#tea-recipe-app .wfd-fab-chat {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 55;
  width: 56px;
  height: 56px;
  border-radius: 0;
  background: var(--pop);
  color: var(--surface);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  cursor: pointer;
}

#tea-recipe-app .wfd-fab-chat:hover {
  background: var(--accent);
}

#tea-recipe-app .wfd-chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.4);
  z-index: 65;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

#tea-recipe-app .wfd-chat-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

#tea-recipe-app .wfd-chat-overlay[hidden] {
  display: flex !important;
}

#tea-recipe-app .wfd-chat-sheet {
  width: min(480px, 100%);
  max-height: 82vh;
  background: var(--surface);
  box-shadow: 0 -9px 0 rgba(52, 51, 49, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateY(16px);
  transition: transform 0.2s ease;
  overflow: hidden;
}

#tea-recipe-app .wfd-chat-overlay.open .wfd-chat-sheet {
  transform: translateY(0);
}

#tea-recipe-app .wfd-chat-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

#tea-recipe-app .wfd-chat-tabs {
  display: flex;
  gap: 6px;
}

#tea-recipe-app .wfd-chat-tab-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-muted);
  font-weight: 700;
  font-size: 12.8px;
  padding: 7px 13px;
  border-radius: 0;
  cursor: pointer;
}

#tea-recipe-app .wfd-chat-tab-btn.active {
  background: var(--ink);
  color: var(--accent-ink);
  border-color: var(--ink);
}

#tea-recipe-app .wfd-chat-sheet-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#tea-recipe-app .wfd-chat-pane {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

#tea-recipe-app .wfd-chat-pane.active {
  display: flex;
}

#tea-recipe-app .wfd-chat-sheet-close {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tea-recipe-app .chat-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#tea-recipe-app .chat-log-area {
  flex: 1;
  min-height: 180px;
  max-height: 42vh;
  overflow-y: auto;
}

#tea-recipe-app .haus-chat-hint {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: 0 0 12px;
}

/* Recipe grid (home + browse) */
#tea-recipe-app .wfd-recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

#tea-recipe-app .wfd-compact-card {
  background: var(--surface);
  border: 0;
  box-shadow: var(--shadow);
  overflow: visible;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  display: flex;
  flex-direction: column;
}

#tea-recipe-app .wfd-compact-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 12px 12px 0 rgba(52, 51, 49, 0.2);
}

#tea-recipe-app .wfd-card-visual {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  position: relative;
  flex: none;
}

#tea-recipe-app .wfd-card-visual--photo {
  background: var(--surface-2);
}

#tea-recipe-app .wfd-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#tea-recipe-app .wfd-card-visual--fallback.wfd-card-color-1 { background: var(--c1); }
#tea-recipe-app .wfd-card-visual--fallback.wfd-card-color-2 { background: var(--c2); }
#tea-recipe-app .wfd-card-visual--fallback.wfd-card-color-3 { background: var(--c3); }
#tea-recipe-app .wfd-card-visual--fallback.wfd-card-color-4 { background: var(--c4); }
#tea-recipe-app .wfd-card-visual--fallback.wfd-card-color-5 { background: var(--c5); }
#tea-recipe-app .wfd-card-visual--fallback.wfd-card-color-6 { background: var(--c6); }

#tea-recipe-app .wfd-compact-card .body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

#tea-recipe-app .wfd-card-title {
  font-size: clamp(15px, 1.6vw, 18px);
  margin: 0;
  overflow-wrap: anywhere;
}

#tea-recipe-app .wfd-compact-card .thumb {
  display: none;
}

#tea-recipe-app .meta-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

#tea-recipe-app .tag {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border: 0;
  background: var(--surface-2);
  color: var(--ink);
}

#tea-recipe-app .status-line {
  font-size: 12.5px;
  font-weight: 700;
  margin-top: auto;
}

#tea-recipe-app .status-line.good {
  color: var(--good);
}

#tea-recipe-app .status-line.warn {
  color: var(--warn);
}

#tea-recipe-app .status-line .miss {
  color: var(--ink);
  font-weight: 600;
}

/* Browse grid cards */
#tea-recipe-app .grid .recipe-card {
  border: 0;
  box-shadow: var(--shadow);
  border-radius: 0;
  overflow: visible;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#tea-recipe-app .grid .recipe-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 12px 12px 0 rgba(52, 51, 49, 0.2);
}

#tea-recipe-app .recipe-hero-wrap {
  min-height: 160px;
  background: var(--c3);
}

/* Buttons */
#tea-recipe-app button.primary,
#tea-recipe-app .btn-primary,
#tea-recipe-app .send-btn {
  background: var(--ink);
  color: var(--accent-ink);
  border: 1.5px solid var(--ink);
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 0;
}

#tea-recipe-app button.primary:hover,
#tea-recipe-app .btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

#tea-recipe-app button.ghost,
#tea-recipe-app .btn-ghost {
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 0;
}

#tea-recipe-app button.ghost:hover {
  background: var(--surface-2);
}

#tea-recipe-app .chip {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid rgba(7, 63, 63, 0.18);
  font-weight: 700;
  border-radius: 0;
}

#tea-recipe-app .chip:hover {
  background: var(--accent-soft);
}

/* Haushalt: stock chips + leverage */
#tea-recipe-app .stock-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#tea-recipe-app .stock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 0;
  border: 1px solid var(--line);
  box-shadow: none;
  cursor: default;
}

#tea-recipe-app .stock-chip button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
}

#tea-recipe-app .stock-chip--neutral {
  background: var(--surface);
  color: var(--ink);
}

#tea-recipe-app button.stock-chip--neutral,
#tea-recipe-app button.stock-chip--add {
  cursor: pointer;
}

#tea-recipe-app .stock-chip--add {
  background: var(--good-soft);
  color: var(--good);
  border-color: var(--good);
}

#tea-recipe-app .stock-chip--add .chip-action {
  font-weight: 800;
  margin-left: 2px;
}

#tea-recipe-app .stock-chip--dislike {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: var(--warn);
}

#tea-recipe-app .chip-meta {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
}

#tea-recipe-app .wfd-cookable-link-wrap {
  margin: 12px 0 16px;
}

#tea-recipe-app .wfd-cookable-link {
  border: none;
  background: transparent;
  color: var(--accent);
  font: 800 13px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0;
  cursor: pointer;
}

#tea-recipe-app .wfd-cookable-link--inline {
  all: unset;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.98;
  color: inherit;
}

#tea-recipe-app .wfd-cookable-link--inline:hover {
  color: var(--accent);
}

#tea-recipe-app .wfd-subsection {
  margin-top: 18px;
}

#tea-recipe-app .wfd-subsection-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin: 0 0 10px;
}

#tea-recipe-app .wfd-recipe-count-line {
  margin: 0;
  font-size: 14px;
  color: var(--ink-muted);
  text-transform: none;
  font-family: var(--font-body);
  font-weight: 400;
}

#tea-recipe-app .wfd-search-row {
  margin: 0 0 12px;
}

#tea-recipe-app .wfd-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

#tea-recipe-app .filter-pill,
#tea-recipe-app .type-tab {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  box-shadow: none;
}

#tea-recipe-app .filter-pill.on,
#tea-recipe-app .type-tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--accent-ink);
  border-color: var(--ink);
}

#tea-recipe-app .wfd-recipes-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

#tea-recipe-app .wfd-recipes-secondary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

#tea-recipe-app .wfd-recipes-secondary .btn-ghost {
  font-size: 12px;
  padding: 8px 12px;
  box-shadow: none;
}

#tea-recipe-app .household-toolbar--compact {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

#tea-recipe-app .pantry-row input,
#tea-recipe-app .user-form input,
#tea-recipe-app .search-box input,
#tea-recipe-app .import-text,
#tea-recipe-app .household-panel-select,
#tea-recipe-app .members-summary,
#tea-recipe-app .wfd-menu-btn,
#tea-recipe-app .wfd-household-pill,
#tea-recipe-app .toolbar-icon,
#tea-recipe-app .wfd-chat-tab-btn {
  box-shadow: none !important;
}

#tea-recipe-app .pantry-item,
#tea-recipe-app .stock-chip {
  box-shadow: none;
}

#tea-recipe-app .wfd-leverage-card {
  display: none;
}

#tea-recipe-app .status-line {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#tea-recipe-app .members-accordion {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

#tea-recipe-app .members-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 0;
  cursor: pointer;
  font-size: 12.8px;
  font-weight: 700;
  color: var(--ink-muted);
  text-align: left;
}

#tea-recipe-app .members-summary .chevron {
  transition: transform 0.15s ease;
}

#tea-recipe-app .members-summary[aria-expanded="true"] .chevron {
  transform: rotate(90deg);
}

#tea-recipe-app .members-count {
  margin-left: auto;
  background: var(--surface-2);
  padding: 2px 8px;
  font-size: 11px;
}

/* Hide old full-page chrome */
#tea-recipe-app .page-header,
#tea-recipe-app .hero-band,
#tea-recipe-app .app-nav {
  display: none !important;
}

#tea-recipe-app .sub-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

#tea-recipe-app .sub-nav button {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

#tea-recipe-app .sub-nav button[aria-current="page"] {
  background: var(--ink);
  color: var(--accent-ink);
  border-color: var(--ink);
}

#tea-recipe-app .household-hub-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#tea-recipe-app .household-hub-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 24px;
}

#tea-recipe-app .auth-gate-panel {
  border-radius: 0;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

#tea-recipe-app .overlay-panel,
#tea-recipe-app .recipe-overlay .overlay-panel {
  border-radius: 0;
  box-shadow: 14px 14px 0 rgba(20, 25, 22, 0.32);
}

@media (max-width: 720px) {
  #tea-recipe-app .shell {
    padding-top: 10px;
  }

  #tea-recipe-app .wfd-recipe-grid,
  #tea-recipe-app .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  #tea-recipe-app .wfd-compact-card .thumb {
    min-height: 150px;
    height: 150px;
  }

  #tea-recipe-app nav.wfd-tabs button .lbl {
    display: none;
  }
}

@media (max-width: 480px) {
  #tea-recipe-app .wfd-recipe-grid,
  #tea-recipe-app .grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  #tea-recipe-app .wfd-compact-card h3 {
    font-size: 18px;
  }
}

/* --- UI polish (30-point feedback) --- */

#tea-recipe-app .wfd-household-pill .wfd-household-pill-star {
  color: var(--pop);
  flex: none;
}

#tea-recipe-app .wfd-user-menu-btn {
  width: 36px;
  height: 36px;
  padding: 0;
}

#tea-recipe-app .wfd-user-menu-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--ink);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#tea-recipe-app .wfd-drawer-meta {
  margin-top: auto;
  padding: 14px 16px 0;
}

#tea-recipe-app .wfd-drawer-sha {
  font-size: 11px;
  color: var(--ink-muted);
  text-decoration: none;
}

#tea-recipe-app .wfd-drawer-sha:hover {
  color: var(--ink);
  text-decoration: underline;
}

#tea-recipe-app .wfd-pantry-summary {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#tea-recipe-app .wfd-pantry-stock .wfd-subsection-title {
  margin: 0 0 6px;
}

#tea-recipe-app .wfd-subsection {
  margin-top: 12px;
}

#tea-recipe-app .wfd-subsection--suggestions {
  margin-top: 14px;
}

#tea-recipe-app .wfd-cookable-link-wrap {
  margin: 0;
}

#tea-recipe-app .wfd-cookable-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  text-align: left;
}

#tea-recipe-app .wfd-cookable-stat-num {
  font-family: var(--font-display);
  font-size: clamp(36px, 8vw, 48px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--accent);
}

#tea-recipe-app .wfd-cookable-stat-label {
  font-family: var(--font-display);
  font-size: clamp(16px, 3.2vw, 20px);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
}

#tea-recipe-app .wfd-cookable-stat:hover .wfd-cookable-stat-label {
  color: var(--pop);
}

#tea-recipe-app .wfd-cookable-empty {
  font-size: 12px;
}

#tea-recipe-app .wfd-recipes-secondary .btn-primary {
  min-height: 38px;
}

#tea-recipe-app .wfd-recipes-secondary .btn-subtle {
  font-size: 11px;
  font-weight: 700;
  border-color: var(--line);
  color: var(--ink-muted);
  box-shadow: none;
}

#tea-recipe-app .toolbar-btn-labeled {
  width: auto;
  min-width: 40px;
  height: 36px;
  padding: 0 10px;
  gap: 6px;
  border-radius: 0;
}

#tea-recipe-app .toolbar-btn-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 520px) {
  #tea-recipe-app .toolbar-btn-label {
    display: none;
  }
}

#tea-recipe-app .toolbar-icon.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--accent-ink);
}

#tea-recipe-app .wfd-fab-chat {
  width: 46px;
  height: 46px;
  right: 16px;
  bottom: 20px;
  box-shadow: 5px 5px 0 rgba(52, 51, 49, 0.28);
}

#tea-recipe-app .wfd-chat-sheet {
  max-height: 88vh;
  background: var(--surface);
}

#tea-recipe-app .wfd-chat-hero {
  background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 55%, var(--pop) 100%);
  color: var(--accent-ink);
  padding: 12px 14px 14px;
  flex: none;
}

#tea-recipe-app .wfd-chat-hero-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

#tea-recipe-app .wfd-chat-segment {
  display: inline-flex;
  padding: 2px;
  background: rgba(255, 247, 232, 0.14);
  border: 1px solid rgba(255, 247, 232, 0.28);
}

#tea-recipe-app .wfd-chat-segment-btn,
#tea-recipe-app .wfd-chat-tab-btn {
  border: 0;
  background: transparent;
  color: rgba(255, 247, 232, 0.82);
  font-weight: 700;
  font-size: 11px;
  padding: 5px 10px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#tea-recipe-app .wfd-chat-segment-btn.active,
#tea-recipe-app .wfd-chat-tab-btn.active {
  background: var(--surface);
  color: var(--ink);
}

#tea-recipe-app .wfd-chat-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 36px);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

#tea-recipe-app .wfd-chat-sheet-close {
  color: var(--accent-ink);
  opacity: 0.9;
}

#tea-recipe-app .wfd-chat-sheet-body {
  padding: 12px 14px 14px;
  min-height: 0;
}

#tea-recipe-app .chat-page {
  gap: 10px;
}

#tea-recipe-app .chat-log-area {
  min-height: 120px;
  max-height: 34vh;
  flex: 0 1 auto;
}

#tea-recipe-app .chat-msg--intro {
  font-size: 13px;
  line-height: 1.45;
}

#tea-recipe-app .chat-chips {
  margin: 0;
}

#tea-recipe-app .chat-prompt-chip {
  font-size: 11px;
  padding: 5px 10px;
}

#tea-recipe-app .chat-compose-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

#tea-recipe-app .chat-compose-box .chat-input {
  width: 100%;
  min-height: 72px;
  border-radius: 0;
  box-shadow: none;
}

#tea-recipe-app .chat-compose-actions {
  display: flex;
  justify-content: flex-end;
}

#tea-recipe-app .chat-compose-actions .primary {
  min-height: 38px;
  padding: 0 16px;
}

#tea-recipe-app .chatbox-hint {
  margin: 0;
  font-size: 11px;
  color: var(--ink-muted);
}

#tea-recipe-app .overlay-head {
  align-items: stretch;
  flex-direction: column;
  padding: 14px 18px;
}

#tea-recipe-app .overlay-head-main {
  width: 100%;
  min-width: 0;
}

#tea-recipe-app .overlay-head-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#tea-recipe-app .overlay-head-text {
  flex: 1;
  min-width: 0;
}

#tea-recipe-app .overlay-head-actions {
  flex-shrink: 0;
  align-self: flex-start;
}

#tea-recipe-app .overlay-hero {
  border-radius: 0;
  width: 64px;
  height: 64px;
}

#tea-recipe-app .overlay-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

#tea-recipe-app .overlay-rating {
  margin-top: 6px;
}

#tea-recipe-app .overlay-rating .rating-row {
  margin: 0;
}

#tea-recipe-app .overlay-desc {
  margin: 10px 0 0;
  max-width: 52ch;
}

#tea-recipe-app .meta-more {
  display: inline;
}

#tea-recipe-app .meta-more summary {
  list-style: none;
  display: inline;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--line);
  padding: 4px 8px;
}

#tea-recipe-app .meta-more-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 6px;
}

#tea-recipe-app .overlay-body {
  padding: 0 18px 18px;
  gap: 0;
}

#tea-recipe-app .overlay-block,
#tea-recipe-app .overlay-section {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

#tea-recipe-app .overlay-block:last-child,
#tea-recipe-app .overlay-source-footer:last-child {
  border-bottom: 0;
}

#tea-recipe-app .overlay-block-title {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

#tea-recipe-app .overlay-block-lead {
  margin: 0 0 8px;
  font-size: 12px;
}

#tea-recipe-app .overlay-source-footer {
  margin: 0;
  padding: 12px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
}

#tea-recipe-app .servings-stepper {
  margin: 0 0 8px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#tea-recipe-app .servings-stepper-label {
  margin-right: 8px;
}

#tea-recipe-app .ingredient-checklist-list li {
  padding: 5px 8px;
  border-radius: 0;
}

#tea-recipe-app .comment-form button {
  align-self: flex-start;
}

#tea-recipe-app .action-sheet-versions {
  padding: 0 20px 16px;
  border-top: 1px solid var(--line);
}

#tea-recipe-app .action-sheet-versions-title {
  margin: 12px 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

#tea-recipe-app .btn-secondary {
  border: 1.5px solid var(--ink);
  background: transparent;
  border-radius: 0;
}

/* Recipe images (import & edit) */
#tea-recipe-app .import-images-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 10px;
}

#tea-recipe-app .import-images-empty {
  margin: 0;
  font-size: 13px;
}

#tea-recipe-app .import-image-thumb {
  position: relative;
  width: 104px;
  height: 104px;
  border: 1.5px solid var(--ink);
  background: var(--surface-2);
  overflow: hidden;
}

#tea-recipe-app .import-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#tea-recipe-app .import-image-badge {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--pop);
  color: var(--pop-ink);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 6px;
}

#tea-recipe-app .import-image-first {
  position: absolute;
  left: 4px;
  bottom: 4px;
  font-size: 11px;
  padding: 2px 6px;
  background: var(--surface);
}

#tea-recipe-app .import-image-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

#tea-recipe-app .import-image-input {
  display: block;
  font-size: 13px;
}

#tea-recipe-app .import-diet-add {
  display: flex;
  gap: 8px;
  margin: -4px 0 12px;
}

#tea-recipe-app .import-diet-add input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 10px;
  font-size: 14px;
}

#tea-recipe-app .import-diet-add button {
  white-space: nowrap;
}

/* Onboarding slides */
#tea-recipe-app #onboarding-overlay {
  align-items: center;
  padding: 20px;
}

#tea-recipe-app .onboarding-panel {
  width: min(520px, 100%);
  max-height: none;
  align-self: center;
  margin: auto;
  background: var(--surface);
  border: 1.5px solid var(--ink);
}

#tea-recipe-app .onboarding-slides {
  padding: 40px 32px 12px;
}

#tea-recipe-app .onboarding-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  min-height: 210px;
}

#tea-recipe-app .onboarding-slide.active {
  display: flex;
}

#tea-recipe-app .onboarding-emoji {
  font-size: 52px;
  line-height: 1;
}

#tea-recipe-app .onboarding-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--ink);
}

#tea-recipe-app .onboarding-text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
  max-width: 40ch;
}

#tea-recipe-app .onboarding-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 32px 28px;
}

#tea-recipe-app .onboarding-dots {
  display: flex;
  gap: 9px;
}

#tea-recipe-app .onboarding-dot {
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--ink);
  background: transparent;
  display: inline-block;
}

#tea-recipe-app .onboarding-dot.active {
  background: var(--pop);
  border-color: var(--pop);
}

#tea-recipe-app .onboarding-actions {
  display: flex;
  gap: 10px;
}

/* ---------- In-page feedback (ui-feedback.js): toasts + dialogs instead of alert/confirm/prompt ---------- */
#tea-recipe-app .app-toast-host {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 220; /* above .app-dialog-layer so errors stay visible while a dialog is open */
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(92vw, 440px);
  pointer-events: none;
}

#tea-recipe-app .app-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-left-width: 8px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.4;
}

#tea-recipe-app .app-toast--success { border-left-color: var(--good); }
#tea-recipe-app .app-toast--error { border-left-color: var(--warn); background: var(--warn-soft); }
#tea-recipe-app .app-toast--info { border-left-color: var(--pop); }

#tea-recipe-app .app-toast-text {
  flex: 1;
  min-width: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

#tea-recipe-app .app-toast-close {
  flex: none;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0;
  min-height: 32px; /* overrides the global 46px touch-target min-height for buttons */
  min-width: 32px;
  cursor: pointer;
}

#tea-recipe-app .app-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(7, 63, 63, 0.55);
}

#tea-recipe-app .app-dialog {
  width: min(100%, 440px);
  max-height: 90vh;
  overflow: auto;
  padding: 22px 22px 18px;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow);
  font-family: var(--font-body);
}

#tea-recipe-app .app-dialog-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

#tea-recipe-app .app-dialog-message {
  margin: 0 0 16px;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

#tea-recipe-app .app-dialog-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--ink);
}

#tea-recipe-app .app-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

#tea-recipe-app .app-dialog-btn {
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  cursor: pointer;
}

#tea-recipe-app .app-dialog-btn--primary { background: var(--ink); color: var(--accent-ink); }
#tea-recipe-app .app-dialog-btn--danger { background: var(--warn); border-color: var(--warn); color: var(--pop-ink); }

#tea-recipe-app .app-dialog-btn:focus-visible,
#tea-recipe-app .app-dialog-input:focus-visible,
#tea-recipe-app .app-toast-close:focus-visible {
  outline: 3px solid var(--pop);
  outline-offset: 2px;
}

/* ---- KI-Markierungen (Import) ---- */
#tea-recipe-app .ai-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: none;
  color: var(--pop-ink);
  background: var(--pop);
  vertical-align: middle;
}

#tea-recipe-app .ai-badge[hidden] { display: none; }

#tea-recipe-app .ai-notice,
#tea-recipe-app .ai-notice-block {
  margin: 0 0 12px;
  padding: 8px 12px;
  font-size: 0.9rem;
  background: var(--warn-soft);
  border-left: 4px solid var(--pop);
}

#tea-recipe-app .ai-notice[hidden] { display: none; }

#tea-recipe-app .ai-inline-note {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

#tea-recipe-app .ai-inline-note[hidden] { display: none; }

#tea-recipe-app .import-ing-row.ai-marked {
  box-shadow: inset 4px 0 0 var(--pop);
  background: var(--warn-soft);
}

#tea-recipe-app .version-item--source { flex-wrap: wrap; }
#tea-recipe-app .version-source { flex-basis: 100%; }
#tea-recipe-app .version-source textarea { width: 100%; }

/* ---- Rezeptansicht: Bild, Info-Leiste, zwei Spalten, Info-Panel ---- */
#tea-recipe-app .recipe-overlay .overlay-panel.recipe-view-panel {
  width: min(1100px, 100%);
}

#tea-recipe-app .recipe-view-head {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#tea-recipe-app .recipe-view-head h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(20px, 3.4vw, 28px);
}

#tea-recipe-app .recipe-view-head .overlay-head-actions {
  align-self: center;
}

#tea-recipe-app .overlay-edit-btn {
  padding: 10px 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#tea-recipe-app .overlay-edit-btn[hidden] { display: none; }

#tea-recipe-app .recipe-view-top {
  padding: 0 18px;
}

#tea-recipe-app .recipe-hero {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 340px;
  object-fit: cover;
  margin-top: 14px;
  background: var(--surface-2);
}

#tea-recipe-app .recipe-hero[hidden] { display: none; }

#tea-recipe-app .recipe-infobar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

#tea-recipe-app .recipe-infobar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#tea-recipe-app .info-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  cursor: pointer;
}

#tea-recipe-app .info-chip:hover { background: var(--accent-soft); }
#tea-recipe-app .info-chip:focus-visible { outline: 3px solid var(--pop); outline-offset: 2px; }
#tea-recipe-app .recipe-view-top .overlay-meta { margin-top: 12px; }

/* Zutaten links, Zubereitung rechts (breit) bzw. zwei Tabs (schmal) */
#tea-recipe-app .recipe-cols-wrap { container-type: inline-size; }

#tea-recipe-app .recipe-tabs {
  display: flex;
  gap: 0;
  margin: 8px 0 4px;
  border: 2px solid var(--ink);
}

#tea-recipe-app .recipe-tabs button {
  flex: 1;
  min-height: 44px;
  font: inherit;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}

#tea-recipe-app .recipe-tabs button[aria-selected="true"] {
  background: var(--ink);
  color: var(--accent-ink);
}

#tea-recipe-app .recipe-cols[data-active-tab="ingredients"] .recipe-pane--steps,
#tea-recipe-app .recipe-cols[data-active-tab="steps"] .recipe-pane--ingredients {
  display: none;
}

@container (min-width: 720px) {
  #tea-recipe-app .recipe-cols {
    display: grid;
    grid-template-columns: minmax(280px, 5fr) 7fr;
    gap: 32px;
    align-items: start;
  }

  #tea-recipe-app .recipe-tabs { display: none; }

  #tea-recipe-app .recipe-cols .recipe-pane { display: block !important; }

  #tea-recipe-app .recipe-pane--ingredients {
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 150px);
    overflow: auto;
  }

  #tea-recipe-app .recipe-cols .recipe-pane .overlay-block:first-child { padding-top: 6px; }
}

/* Zutaten-Bubbles im Schritt-Text */
#tea-recipe-app .ing-bubble {
  display: inline-block;
  margin-left: 4px;
  padding: 0 7px;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--ink);
  background: var(--accent-soft);
  border-radius: 999px;
  vertical-align: baseline;
}

#tea-recipe-app .ing-mention { font-weight: 600; }
#tea-recipe-app .ing-mention--again { font-weight: inherit; text-decoration: underline dotted var(--ink-muted); text-underline-offset: 3px; }
#tea-recipe-app .ing-bubble--text {
  display: inline;
  margin-left: 0;
  padding: 1px 7px;
  font-size: 1em;
  font-weight: 700;
  line-height: inherit;
  white-space: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
#tea-recipe-app .steps-preview { margin-top: 8px; }
#tea-recipe-app .steps-preview[hidden] { display: none; }
#tea-recipe-app .steps-preview summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-muted); }
#tea-recipe-app .steps-preview .steps { margin: 8px 0 0; padding-left: 20px; line-height: 1.9; }

/* Info-Panel (Bewertung, Kommentare, Verlauf, Versionen) */
#tea-recipe-app .recipe-info-overlay { z-index: 120; }

#tea-recipe-app .recipe-overlay .overlay-panel.info-sheet-panel { width: min(560px, 100%); }

#tea-recipe-app .info-tabs {
  display: flex;
  border-bottom: 2px solid var(--ink);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}

#tea-recipe-app .info-tabs button {
  flex: 1;
  min-height: 44px;
  padding: 0 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}

#tea-recipe-app .info-tabs button[aria-selected="true"] {
  background: var(--ink);
  color: var(--accent-ink);
}

#tea-recipe-app .info-sheet-body { padding: 16px 18px 24px; gap: 12px; }
#tea-recipe-app .info-rating-stars .star { font-size: 36px; padding: 2px 4px; min-height: 48px; }
#tea-recipe-app .info-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

#tea-recipe-app .version-detail {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  margin: 0;
}

#tea-recipe-app .version-detail dt { font-weight: 700; color: var(--ink-muted); }
#tea-recipe-app .version-detail dd { margin: 0; }
#tea-recipe-app .info-sheet-body select { width: 100%; min-height: 44px; font: inherit; }

@media (max-width: 719px) {
  #tea-recipe-app .recipe-info-overlay { align-items: flex-end; }

  #tea-recipe-app .recipe-overlay .overlay-panel.info-sheet-panel {
    width: 100%;
    max-height: 88vh;
  }

  #tea-recipe-app .recipe-view-head .overlay-head-actions { gap: 6px; }
  #tea-recipe-app .recipe-view-head { flex-wrap: wrap; }
  #tea-recipe-app .recipe-view-head h2 {
    flex: 1 1 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
  #tea-recipe-app .recipe-view-head .overlay-head-actions { flex: 1 1 100%; justify-content: flex-end; }
  #tea-recipe-app .recipe-view-head .overlay-edit-btn { flex: 1 1 auto; }
  #tea-recipe-app .overlay-edit-btn { padding: 9px 12px; }
}

@media (min-width: 720px) {
  #tea-recipe-app .recipe-info-overlay { align-items: center; }
  #tea-recipe-app .recipe-overlay .overlay-panel.info-sheet-panel { max-height: min(80vh, 720px); }
}

#tea-recipe-app .menu-modal-btn--danger { color: var(--warn); border-color: var(--warn); }
#tea-recipe-app .menu-modal-btn--danger[hidden] { display: none; }


/* ==========================================================
   Design-Update (Tickets A1, B1, B2, B3)
   ========================================================== */

/* A1: semantische Rollen (Template: Petrol=UI, Gruen=positiv, Berry=Warnung, Cream=Basis) */
#tea-recipe-app {
  --c-ui: var(--ink);
  --c-ok: var(--accent);
  --c-ok-soft: var(--good-soft);
  --c-warn: var(--warn);
  --c-warn-soft: var(--warn-soft);
  --c-base: var(--bg);
  --c-cta: var(--pop);
  --c-info: var(--c3);
  --c-info-soft: #F6EBB8;
}

/* B1: Haupt-Tabs nur unterstrichen */
#tea-recipe-app nav.wfd-tabs {
  gap: 0;
  border-bottom: 1px solid var(--line);
}
#tea-recipe-app nav.wfd-tabs button {
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 10px 12px;
  color: var(--ink-muted);
}
#tea-recipe-app nav.wfd-tabs button[aria-current="page"] {
  background: transparent;
  color: var(--ink);
  border-bottom-color: var(--pop);
}
#tea-recipe-app nav.wfd-tabs button:not([aria-current="page"]):hover {
  background: transparent;
  color: var(--ink);
  border-bottom-color: var(--line);
}
#tea-recipe-app nav.wfd-tabs button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

/* B1: Typ-Tabs (Empfehlungen / Alle / Essen) nur unterstrichen */
#tea-recipe-app .type-tabs.wfd-filter-row {
  gap: 22px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 12px;
}
#tea-recipe-app .type-tabs .type-tab,
#tea-recipe-app .type-tabs .type-tab.filter-pill {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  min-height: 0;
  padding: 8px 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-muted);
}
#tea-recipe-app .type-tabs .type-tab[aria-selected="true"],
#tea-recipe-app .type-tabs .type-tab.filter-pill.on {
  background: transparent;
  color: var(--ink);
  border-bottom-color: var(--pop);
}
#tea-recipe-app .type-tabs .type-tab:hover {
  color: var(--ink);
}
#tea-recipe-app .type-tabs .type-tab span {
  font-weight: 600;
  opacity: 0.6;
}

/* B2: Menue-Icon statt Initialen */
#tea-recipe-app .wfd-user-menu-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  box-shadow: none !important;
}
#tea-recipe-app .wfd-user-menu-btn:hover {
  background: var(--surface-2);
}
#tea-recipe-app .wfd-user-menu-btn svg {
  width: 24px;
  height: 24px;
}
#tea-recipe-app .wfd-user-menu-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* B3: Ernaehrung / Filter nur als Icon, links, ohne Button-Rahmen */
#tea-recipe-app .section-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
}
#tea-recipe-app .toolbar-icon,
#tea-recipe-app .toolbar-btn-labeled {
  position: relative;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none !important;
}
#tea-recipe-app .toolbar-btn-labeled .toolbar-btn-label {
  display: none;
}
#tea-recipe-app .toolbar-icon:hover {
  background: var(--surface-2);
}
#tea-recipe-app .toolbar-icon.is-active {
  background: transparent;
  color: var(--ink);
  border: 0;
}
#tea-recipe-app .toolbar-icon.is-active::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pop);
  border: 2px solid var(--bg);
}
#tea-recipe-app .toolbar-icon:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}


/* ==========================================================
   B6: Fallback-Cover (Farbflaeche + grosses Stichwort)
   ========================================================== */
#tea-recipe-app .wfd-card-visual--fallback { container-type: inline-size; }
#tea-recipe-app .wfd-cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 7cqw;
  color: var(--c1-ink);
}
#tea-recipe-app .wfd-cover.wfd-card-color-1 { background: var(--c1); color: var(--c1-ink); }
#tea-recipe-app .wfd-cover.wfd-card-color-2 { background: var(--c2); color: var(--c2-ink); }
#tea-recipe-app .wfd-cover.wfd-card-color-3 { background: var(--c3); color: var(--c3-ink); }
#tea-recipe-app .wfd-cover.wfd-card-color-4 { background: var(--c4); color: var(--c4-ink); }
#tea-recipe-app .wfd-cover.wfd-card-color-5 { background: var(--c5); color: var(--c5-ink); }
#tea-recipe-app .wfd-cover.wfd-card-color-6 { background: var(--c6); color: var(--c6-ink); }
#tea-recipe-app .wfd-cover-kw {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  hyphens: auto;
  display: block;
}
#tea-recipe-app .wfd-cover-kw--xl { font-size: 27cqw; }
#tea-recipe-app .wfd-cover-kw--l { font-size: 19cqw; }
#tea-recipe-app .wfd-cover-kw--m { font-size: 14cqw; }
#tea-recipe-app .wfd-cover-kw--s { font-size: 11cqw; }
#tea-recipe-app .wfd-cover-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tea-recipe-app .wfd-card-title--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* A2: Formsystem (Karten-Schatten in Petrol, Chips/Inputs ohne Schatten) */
#tea-recipe-app {
  --shadow: 8px 8px 0 rgba(7, 63, 63, 0.16);
  --shadow-sm: 4px 4px 0 rgba(7, 63, 63, 0.14);
}
#tea-recipe-app .wfd-compact-card:hover,
#tea-recipe-app .grid .recipe-card:hover {
  box-shadow: 11px 11px 0 rgba(7, 63, 63, 0.18);
}

/* B4: Suchicon im Feld */
#tea-recipe-app .wfd-search-row .search-box {
  position: relative;
  display: block;
}
#tea-recipe-app .wfd-search-row .search-box svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
}
#tea-recipe-app .wfd-search-row .search-box input {
  width: 100%;
  padding-left: 40px;
}
#tea-recipe-app .empty {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-muted);
}


/* ==========================================================
   A2: einheitliche Formen (eckig wie im Template)
   ========================================================== */
#tea-recipe-app :is(
  input, select, textarea, button:not(.ing-add),
  .search-panel, .side-panel, .recipe-card, .ingredient-panel, .pantry-panel, .filter-panel,
  .import-panel, .import-text, .import-locale-col, .stat, .toolbar-popover, .toolbar-option,
  .overlay-hero, .servings-stepper, .servings-stepper-input, .ingredient-checklist-list li,
  .comment-form textarea, .comment, .overlay-section, .overlay-panel, .cook-log-item,
  .pantry-recipe-btn, .pantry-almost-item, .empty, .app-header, .household-header-select,
  .household-card, .household-toolbar, .household-panel-select, .household-admin-panel,
  .household-member-chat-log, .household-hub-card, .wishlist-item, .btn-compact,
  .household-name-input, .review-panel, .review-item, .chat-panel, .chat-msg, .chat-input,
  .user-panel, .member-item, .invite-item, .auth-gate-panel, .auth-oauth-btn, .card-more-btn,
  .members-summary, .info-sheet-panel, .locale-toggle, .locale-toggle button
) {
  border-radius: 0 !important;
}

/* ==========================================================
   C1-C7: Rezeptansicht und Zubereitung
   ========================================================== */

/* C1: Kopf: Schliessen links, Titel, Menue rechts */
#tea-recipe-app .recipe-view-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}
#tea-recipe-app .recipe-view-head .overlay-close--icon {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
#tea-recipe-app .recipe-view-head .overlay-close--icon:hover { background: var(--surface-2); }
#tea-recipe-app .recipe-view-head h2 {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: clamp(22px, 4.2vw, 34px);
}
#tea-recipe-app .recipe-view-head .overlay-head-actions {
  flex: none;
  gap: 2px;
  align-self: center;
}
#tea-recipe-app .recipe-view-head .overlay-edit-btn { display: none !important; }
#tea-recipe-app .recipe-view-head .overlay-menu-btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  box-shadow: none !important;
}

/* C2: Info-Chips in einer ruhigen Zeile, Meta als Textzeile */
#tea-recipe-app .recipe-infobar {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 6px;
  min-width: 0;
}
#tea-recipe-app .recipe-infobar::-webkit-scrollbar { display: none; }
#tea-recipe-app .info-chip {
  flex: none;
  min-height: 34px;
  padding: 4px 10px;
  gap: 6px;
  font-size: 13px;
  border: 1px solid var(--line);
  background: var(--surface);
}
#tea-recipe-app .info-chip svg { width: 16px; height: 16px; }
#tea-recipe-app .recipe-view-top .overlay-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin-top: 14px;
}
#tea-recipe-app .recipe-view-top .overlay-meta > .pill {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
#tea-recipe-app .recipe-view-top .overlay-meta > .pill + .pill::before,
#tea-recipe-app .recipe-view-top .overlay-meta > .pill + .meta-more::before {
  content: "\00b7";
  margin: 0 8px;
  color: var(--ink-muted);
}
#tea-recipe-app .recipe-view-top .meta-more { display: inline; }
#tea-recipe-app .recipe-view-top .meta-more summary {
  display: inline;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
}
#tea-recipe-app .recipe-view-top .meta-more summary::-webkit-details-marker { display: none; }
#tea-recipe-app .recipe-view-top .meta-more[open] { display: block; flex-basis: 100%; margin-top: 8px; }
#tea-recipe-app .recipe-view-top .meta-more[open] summary { display: block; margin-bottom: 6px; }
#tea-recipe-app .recipe-view-top .meta-more .pill-tag {
  background: var(--surface-2);
  padding: 3px 9px;
  font-size: 12px;
  border: 0;
}

/* C3: "Jetzt gekocht" als kompakte Primaeraktion */
#tea-recipe-app .overlay-cook-btn {
  flex: none;
  min-height: 38px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  background: var(--pop);
  border: 2px solid var(--pop);
  color: var(--pop-ink);
  box-shadow: none !important;
}
#tea-recipe-app .overlay-cook-btn:hover { filter: brightness(0.95); }

/* C4: Zutaten-Kopf mit DE/US, Portionen-Stepper */
#tea-recipe-app .ing-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}
#tea-recipe-app .ing-title-row .overlay-block-title { margin: 0; }
#tea-recipe-app .ing-title-row .locale-toggle {
  margin: 0;
  padding: 0;
  gap: 0;
  border: 1px solid var(--ink);
  background: transparent;
}
#tea-recipe-app .locale-toggle button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}
#tea-recipe-app .locale-toggle button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--accent-ink);
}
#tea-recipe-app .servings-stepper {
  gap: 0;
  align-items: stretch;
}
#tea-recipe-app .servings-stepper-label { margin-right: 10px; align-self: center; }
#tea-recipe-app .servings-stepper .servings-stepper-btn,
#tea-recipe-app .servings-stepper .servings-stepper-input {
  min-width: 34px;
  min-height: 34px;
  height: 34px;
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  margin: 0;
}
#tea-recipe-app .servings-stepper .servings-stepper-input { width: 46px; border-left: 0; border-right: 0; }

/* Zutaten/Zubereitung-Tabs (schmal): nur unterstrichen */
#tea-recipe-app .recipe-tabs {
  border: 0;
  border-bottom: 1px solid var(--line);
  margin: 10px 0 8px;
}
#tea-recipe-app .recipe-tabs button {
  min-height: 42px;
  color: var(--ink-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
#tea-recipe-app .recipe-tabs button[aria-selected="true"] {
  background: transparent;
  color: var(--ink);
  border-bottom-color: var(--pop);
}

/* C5: Desktop-Feinschliff */
#tea-recipe-app .recipe-pane,
#tea-recipe-app .recipe-pane .overlay-block-title { scroll-margin-top: 90px; }
@container (min-width: 720px) {
  #tea-recipe-app .recipe-cols { grid-template-columns: minmax(300px, 4fr) 6fr; }
  #tea-recipe-app .recipe-pane--ingredients { top: 84px; }
}
#tea-recipe-app .ingredient-checklist-list .ing-header {
  text-transform: none;
  font-size: 12px;
  letter-spacing: 0;
  padding: 0 8px 6px;
}
#tea-recipe-app .ingredient-checklist-list .ing-header .ing-qty { text-align: right; }
#tea-recipe-app .ingredient-checklist-list li.ing-row-cols .ing-qty { text-align: right; }
#tea-recipe-app .ai-notice-block,
#tea-recipe-app .verify {
  font-size: 13px;
  color: var(--ink-muted);
}
#tea-recipe-app .verify.unverified::before {
  content: "\24d8  ";
}

/* C6: Zubereitung, gut lesbar */
#tea-recipe-app .recipe-pane--steps .overlay-block-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 14px;
}
#tea-recipe-app .recipe-pane--steps ol.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  max-width: 66ch;
}
#tea-recipe-app .recipe-pane--steps ol.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 22px 54px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 17px;
  line-height: 1.65;
  cursor: pointer;
}
#tea-recipe-app .recipe-pane--steps ol.steps > li:last-child { border-bottom: 0; margin-bottom: 0; }
#tea-recipe-app .recipe-pane--steps ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -3px;
  width: 40px;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--pop);
}
#tea-recipe-app .step-time {
  font-weight: 800;
  background: var(--c-info-soft);
  padding: 0 4px;
  white-space: nowrap;
}
#tea-recipe-app .recipe-pane--steps ol.steps > li.is-done {
  opacity: 0.45;
}
#tea-recipe-app .recipe-pane--steps ol.steps > li.is-done::before {
  content: "\2713";
  color: var(--good);
}
#tea-recipe-app .recipe-pane--steps ol.steps > li.is-current {
  box-shadow: -4px 0 0 var(--pop);
  padding-left: 58px;
}
#tea-recipe-app .recipe-pane--steps ol.steps > li.is-current::before { left: 4px; }
@media (max-width: 720px) {
  #tea-recipe-app .recipe-pane--steps ol.steps > li { padding-left: 46px; font-size: 17px; }
  #tea-recipe-app .recipe-pane--steps ol.steps > li::before { font-size: 30px; width: 34px; }
}

/* Feinschliff Rezeptansicht */
#tea-recipe-app .recipe-view-top .meta-more summary {
  border: 0;
  padding: 0;
  text-transform: none;
  font-size: 14px;
}
#tea-recipe-app button.overlay-cook-btn,
#tea-recipe-app button.primary.overlay-cook-btn {
  background: var(--pop);
  border-color: var(--pop);
  color: var(--pop-ink);
  text-transform: none;
  letter-spacing: 0;
}


/* ==========================================================
   D1-D4: Haushalt
   ========================================================== */
#tea-recipe-app .wfd-cookable-link-wrap { margin: 16px 0 6px; }
#tea-recipe-app .wfd-cookable-stat {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--c3);
  color: var(--c3-ink);
  border: 0;
}
#tea-recipe-app .wfd-cookable-stat:hover { filter: brightness(0.96); }
#tea-recipe-app .wfd-cookable-stat-num {
  color: var(--c3-ink);
  font-size: 34px;
  line-height: 1;
}
#tea-recipe-app .wfd-cookable-stat-label {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.01em;
}
#tea-recipe-app .stock-chip--add {
  color: #1B5F52;
}
#tea-recipe-app .stock-chip .chip-meta {
  font-size: 11px;
  font-weight: 700;
  opacity: 1;
  color: #2E6E62;
}
#tea-recipe-app .stock-chip--neutral .chip-meta { color: var(--ink-muted); }

/* D3: kompakte Haushaltsauswahl */
#tea-recipe-app .household-toolbar--compact {
  border: 0;
  background: transparent;
  padding: 0;
  gap: 8px;
  flex-wrap: nowrap;
}
#tea-recipe-app .household-toolbar--compact .household-select-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
#tea-recipe-app .household-toolbar--compact .household-panel-select { min-width: 0; }
#tea-recipe-app .household-default-btn {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
#tea-recipe-app .household-default-btn[hidden] { display: none; }
#tea-recipe-app .members-summary .members-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  background: transparent;
}

/* D4: Hinzufuegen-Buttons einheitlich */
#tea-recipe-app .pantry-row button[type="submit"] {
  flex: none;
  min-height: 44px;
  text-transform: none;
  font-size: 14px;
}


/* ==========================================================
   F1/F5/F6: Import
   ========================================================== */
#tea-recipe-app .import-steps {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 18px 0 14px;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
#tea-recipe-app .import-steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  margin-bottom: -1px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-muted);
  border-bottom: 3px solid transparent;
}
#tea-recipe-app .import-steps li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-family: var(--font-display);
  font-size: 14px;
  background: var(--surface-2);
  color: var(--ink);
}
#tea-recipe-app .import-steps li.is-active { color: var(--ink); border-bottom-color: var(--pop); }
#tea-recipe-app .import-steps li.is-active span { background: var(--ink); color: var(--accent-ink); }

#tea-recipe-app .import-panel {
  background: var(--surface);
  border: 0;
  box-shadow: var(--shadow);
  padding: 22px;
}
#tea-recipe-app .import-field > span,
#tea-recipe-app .import-field-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
#tea-recipe-app .import-field input[type="text"],
#tea-recipe-app .import-field input[type="number"],
#tea-recipe-app .import-field input[type="url"],
#tea-recipe-app .import-field select,
#tea-recipe-app .import-field textarea,
#tea-recipe-app .import-diet-add input,
#tea-recipe-app .import-ing-row input {
  width: 100%;
  border: 1px solid var(--line);
  background: #FFFDF5;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  box-sizing: border-box;
}
#tea-recipe-app .import-ing-row input { font-size: 14px; padding: 8px 9px; }
#tea-recipe-app .import-field input:focus,
#tea-recipe-app .import-field select:focus,
#tea-recipe-app .import-field textarea:focus,
#tea-recipe-app .import-ing-row input:focus {
  outline: 2px solid var(--ink);
  outline-offset: 0;
  border-color: var(--ink);
  box-shadow: none;
}
#tea-recipe-app .import-url-hint { display: block; margin-top: 6px; font-size: 12px; }
#tea-recipe-app .import-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
#tea-recipe-app .import-check input { width: 18px; height: 18px; accent-color: var(--ink); }

/* Pruefansicht */
#tea-recipe-app .import-preview-card { border-top: 0; margin-top: 0; padding-top: 0; }
#tea-recipe-app .import-source-hint { margin: 0 0 12px; font-size: 13px; }
#tea-recipe-app .ai-notice-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  justify-content: space-between;
  margin: 0 0 16px;
  padding: 10px 12px;
  background: var(--c-info-soft);
  border-left: 4px solid var(--c3);
}
#tea-recipe-app .ai-notice-wrap[hidden] { display: none; }
#tea-recipe-app .ai-notice-wrap .ai-notice {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
#tea-recipe-app .ai-notice-wrap button { flex: none; white-space: nowrap; }
#tea-recipe-app .import-locale-grid--stack { display: block; }
#tea-recipe-app .import-locale-grid--stack > .import-locale-col,
#tea-recipe-app .import-us-details > .import-locale-col {
  background: transparent;
  border: 0;
  padding: 0;
}
#tea-recipe-app .import-locale-col h4 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0;
}
#tea-recipe-app .import-us-details,
#tea-recipe-app .import-more {
  margin: 14px 0;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
#tea-recipe-app .import-us-details > summary,
#tea-recipe-app .import-more > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  padding: 6px 0;
}
#tea-recipe-app .import-us-details[open] > summary,
#tea-recipe-app .import-more[open] > summary { margin-bottom: 12px; }
#tea-recipe-app .import-ing-row {
  grid-template-columns: minmax(56px, 0.7fr) minmax(56px, 0.7fr) minmax(0, 1.6fr) minmax(0, 1.6fr) 36px;
}
#tea-recipe-app .import-ing-row.import-ing-header {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 700;
}
#tea-recipe-app .import-ing-row input::placeholder,
#tea-recipe-app .import-field input::placeholder,
#tea-recipe-app .import-field textarea::placeholder { color: #8C8F86; }
#tea-recipe-app .import-ing-row.ai-marked input { background: var(--c-info-soft); }

/* Schritte-Vorschau mit KI-Markierung */
#tea-recipe-app .steps-preview .steps { padding-left: 22px; }
#tea-recipe-app .steps-preview .steps li { margin: 0 0 8px; padding: 4px 6px; }
#tea-recipe-app .steps-preview .steps li.ai-marked {
  background: var(--c-info-soft);
  border-left: 3px solid var(--c3);
}
#tea-recipe-app .steps-preview .ai-accept { margin-left: 6px; padding: 2px 8px; font-size: 12px; min-height: 0; }

/* Bilder */
#tea-recipe-app .import-images-field { margin: 0 0 12px; }
#tea-recipe-app .import-file-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
}
#tea-recipe-app .import-file-btn:hover { background: var(--surface-2); }
#tea-recipe-app .import-file-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
#tea-recipe-app .import-file-btn:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Feste Aktionsleiste */
#tea-recipe-app .import-preview-card .import-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 18px -22px -22px;
  padding: 12px 22px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
#tea-recipe-app .import-preview-card .import-actions .primary { min-height: 44px; }


/* KI-Markierung: Farbe aus dem Template (Rotorange wie das KI-Badge), keine Bestaetigung noetig */
#tea-recipe-app {
  --c-ai: var(--pop);
  --c-ai-soft: #FCE4DA;
}
#tea-recipe-app .ai-notice-wrap {
  background: var(--c-ai-soft);
  border-left-color: var(--c-ai);
}
#tea-recipe-app .steps-preview .steps li.ai-marked {
  background: var(--c-ai-soft);
  border-left-color: var(--c-ai);
}
#tea-recipe-app .import-ing-row.ai-marked input { background: var(--c-ai-soft); }
#tea-recipe-app .import-servings-field { max-width: 240px; }

/* Import/Bearbeiten: Portionen + Art nebeneinander, Titel auf der Karte */
#tea-recipe-app .import-basics-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 12px; align-items: start; }
#tea-recipe-app .import-basics-row .import-servings-field { max-width: none; }
#tea-recipe-app .import-type-field { display: flex; flex-direction: column; gap: 6px; }
#tea-recipe-app .import-type-field > label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
#tea-recipe-app .import-type-field > label > span,
#tea-recipe-app .import-cover-title-field > span { font-size: 13px; font-weight: 600; }
@media (max-width: 520px) { #tea-recipe-app .import-basics-row { grid-template-columns: 1fr; } }

/* Rezeptansicht: alle Tags direkt sichtbar (kein "Mehr") */
#tea-recipe-app .meta-tags-flat {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-basis: 100%;
  margin-top: 10px;
}
#tea-recipe-app .meta-tags-flat .pill-tag {
  background: var(--surface-2);
  border: 0;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

/* Import/Bearbeiten: alles sichtbar, Abschnitte statt Aufklapper, zweispaltig auf breiten Schirmen */
#tea-recipe-app .import-section { margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
#tea-recipe-app .import-section-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0;
}
#tea-recipe-app .import-us-details .import-locale-col > h4 { display: none; }
#tea-recipe-app .import-more-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
#tea-recipe-app .import-more-body > .import-field-row,
#tea-recipe-app .import-more-body > .import-row,
#tea-recipe-app .import-more-body > label:has(#import-edit-tags) { grid-column: 1 / -1; }
#tea-recipe-app .import-more-body > .import-diet-add { margin-top: 22px; }
@media (min-width: 760px) {
  #tea-recipe-app .import-locale-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
  #tea-recipe-app .import-locale-col > * { grid-column: 1 / -1; }
  #tea-recipe-app .import-locale-col > label.import-field:has(input[id^="import-edit-title-"]),
  #tea-recipe-app .import-locale-col > label.import-field:has(input[id^="import-edit-time-"]) { grid-column: auto; }
}
@media (max-width: 759px) {
  #tea-recipe-app .import-more-body { grid-template-columns: 1fr; }
  #tea-recipe-app .import-more-body > .import-diet-add { margin-top: 0; }
}

/* Bearbeiten-Dialog: breit, Kopf fest, ein Scrollbereich, Aktionsleiste unten */
#tea-recipe-app #edit-overlay .overlay-panel.edit-modal-panel {
  width: min(1040px, calc(100vw - 32px));
  height: calc(100vh - 48px);
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#tea-recipe-app #edit-overlay .overlay-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
#tea-recipe-app #edit-overlay .overlay-head h2 { margin: 0; font-size: 22px; }
#tea-recipe-app #edit-overlay .overlay-head .overlay-close { width: auto; flex: none; min-height: 36px; padding: 6px 14px; }
#tea-recipe-app #edit-overlay .overlay-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 22px 22px; }
#tea-recipe-app #edit-overlay .edit-modal-preview { max-height: none; overflow: visible; padding: 0; }
@media (max-width: 720px) {
  #tea-recipe-app #edit-overlay .overlay-panel.edit-modal-panel { width: 100vw; height: 100vh; }
}
#tea-recipe-app #edit-overlay .overlay-head { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; text-align: left !important; }
#tea-recipe-app #edit-overlay .overlay-head h2 { text-align: left !important; }

/* Vorrat-Tab */
#tea-recipe-app .household-hub-card[hidden] { display: none !important; }
#tea-recipe-app .pantry-hub-grid { grid-template-columns: 1fr; }

/* Verbund: gemeinsam kochen */
#tea-recipe-app .household-links-card { grid-column: 1 / -1; }
#tea-recipe-app .link-invite-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 12px 0 0; padding: 10px 14px;
  background: var(--c-ai-soft, #FCE4DA); border-left: 4px solid var(--pop); font-size: 14px;
}
#tea-recipe-app .link-invite-banner[hidden] { display: none; }
#tea-recipe-app .link-card, #tea-recipe-app .link-invite-card, #tea-recipe-app .link-create-form {
  margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); background: var(--surface);
}
#tea-recipe-app .link-invite-card { border-left: 4px solid var(--pop); background: var(--c-ai-soft, #FCE4DA); }
#tea-recipe-app .link-invite-card p { margin: 0 0 8px; }
#tea-recipe-app .link-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
#tea-recipe-app .link-card-head h3, #tea-recipe-app .link-create-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 20px; text-transform: uppercase; }
#tea-recipe-app .link-members, #tea-recipe-app .link-pending-list { list-style: none; margin: 0 0 10px; padding: 0; }
#tea-recipe-app .link-member { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
#tea-recipe-app .link-member:first-child { border-top: 0; }
#tea-recipe-app .link-scopes, #tea-recipe-app .link-checks { display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; }
#tea-recipe-app .link-checks { margin: 8px 0 12px; }
#tea-recipe-app .link-checks-label { font-size: 13px; font-weight: 700; }
#tea-recipe-app .link-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
#tea-recipe-app .link-check input { width: auto; margin: 0; }
#tea-recipe-app .link-pending { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 4px 0; font-size: 14px; }
#tea-recipe-app .link-invite-form { display: flex; gap: 8px; flex-wrap: wrap; }
#tea-recipe-app .link-invite-form input { flex: 1 1 220px; }
#tea-recipe-app .link-create-form { background: transparent; border-style: dashed; }
#tea-recipe-app .link-create-form > p { margin: 6px 0 12px; }

/* Verbund: Ansicht */
#tea-recipe-app .tag--origin, #tea-recipe-app .pill--origin { background: var(--c-ai-soft, #FCE4DA); color: var(--pop-ink, #8a3a1c); font-weight: 700; }
#tea-recipe-app .stock-chip--foreign { background: transparent; border: 1px dashed var(--line-strong, #9aa79b); display: inline-flex; align-items: baseline; gap: 6px; }
#tea-recipe-app .stock-chip--foreign small { font-size: 11px; opacity: .7; }
#tea-recipe-app .pantry-link-note { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
#tea-recipe-app .pantry-link-note[hidden], #tea-recipe-app .origin-filter[hidden] { display: none; }
#tea-recipe-app .origin-filter { margin-top: -6px; }
#tea-recipe-app .link-card-actions { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#tea-recipe-app .link-create-form input[type=email], #tea-recipe-app .link-create-form input[type=text], #tea-recipe-app .link-create-form select { width: 100%; box-sizing: border-box; }
#tea-recipe-app .link-create-form input[type="email"], #tea-recipe-app .link-invite-form input[type="email"] {
  border: 1px solid var(--line-strong, #cdd5ca); background: var(--surface, #fbfcf9); color: inherit;
  border-radius: 13px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.45; outline: none;
}
#tea-recipe-app .link-create-form input[type="email"]:focus, #tea-recipe-app .link-invite-form input[type="email"]:focus { border-color: #52725b; box-shadow: 0 0 0 3px #e6eee5; }

/* Design-Review Verbund/Haushalt */
#tea-recipe-app .link-create-form input[type="email"], #tea-recipe-app .link-invite-form input[type="email"] {
  border: 1px solid light-dark(#cdd5ca, #3b4338); background: light-dark(#fbfcf9, #10130f); font-size: 15px;
}
/* Formular allein in der Karte: kein zweiter Rahmen, Titel der Karte reicht */
#tea-recipe-app .link-create-form:only-child { border: 0; padding: 0; margin: 0; background: transparent; }
#tea-recipe-app .link-create-form:only-child > p { margin: 0 0 14px; }
#tea-recipe-app .household-links-body > :last-child { margin-bottom: 0; }
#tea-recipe-app .link-create-form .import-field-row { margin-top: 4px; }
/* Mitglieder & Verwaltung: ruhiger, buendig */
#tea-recipe-app .members-accordion #household-members-body { padding: 10px 0 0; }
#tea-recipe-app .members-accordion .household-members-compact { margin: 0 0 14px; }
#tea-recipe-app .members-accordion #household-create-btn { margin: 0 0 14px !important; }
#tea-recipe-app .members-accordion .members-summary:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Haushalt-Seite neu: aktueller Haushalt, Wechsel, Verbund */
#tea-recipe-app .hh-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
#tea-recipe-app .hh-switch-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
#tea-recipe-app .hh-switch-group { margin: 10px 0 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
#tea-recipe-app .hh-switch-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; box-shadow: none;
}
#tea-recipe-app .hh-switch-item:hover { border-color: var(--ink); }
#tea-recipe-app .hh-switch-item.is-active { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--pop); cursor: default; }
#tea-recipe-app .hh-switch-meta { display: inline-flex; gap: 6px; flex: none; }
#tea-recipe-app .hh-tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: light-dark(#eef3ed, #243228); color: light-dark(#3d5542, #c8d4c9); white-space: nowrap; }
#tea-recipe-app .hh-tag--on { background: var(--ink); color: var(--surface); }
#tea-recipe-app .hh-sub { margin: 16px 0 8px; }
#tea-recipe-app #household-admin-body .invite-household-form { margin-top: 0; }
#tea-recipe-app .link-create-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
#tea-recipe-app .link-create-cta > p { margin: 0; }
#tea-recipe-app .link-card-hint { margin: 0 0 8px; font-size: 13px; }
#tea-recipe-app .link-create-form .row-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#tea-recipe-app .hh-switch-item { border-color: light-dark(#cdd5ca, #3b4338); }
#tea-recipe-app .invite-item--compact { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#tea-recipe-app .invite-item--compact > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
#tea-recipe-app .household-links-card { padding-bottom: 24px; }
#tea-recipe-app .household-links-body > :last-child { margin-bottom: 0; }

/* KI nicht erreichbar: Hinweis mit Wiederholen */
#tea-recipe-app .import-ai-retry { margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid var(--pop); background: var(--c-ai-soft, #FCE4DA); }
#tea-recipe-app .import-ai-retry[hidden] { display: none; }
#tea-recipe-app .import-ai-retry p { margin: 0 0 10px; font-size: 14px; }
#tea-recipe-app .import-ai-retry .row-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Rezeptkarten kompakter: mehr Überblick auf der Seite */
#tea-recipe-app .wfd-recipe-grid,
#tea-recipe-app .grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
#tea-recipe-app .wfd-card-visual {
  aspect-ratio: 4 / 3;
}
#tea-recipe-app .wfd-compact-card .body {
  padding: 10px 12px 12px;
  gap: 6px;
}
#tea-recipe-app .wfd-card-title {
  font-size: clamp(13.5px, 1.3vw, 16px);
}
@media (max-width: 900px) {
  #tea-recipe-app .wfd-recipe-grid,
  #tea-recipe-app .grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }
}
@media (max-width: 480px) {
  #tea-recipe-app .wfd-recipe-grid,
  #tea-recipe-app .grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
  }
}

/* Rezeptansicht: Aktionen als Icons in der Kopfzeile statt Punkte-Menü */
#tea-recipe-app .recipe-view-head .overlay-action-btn {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  box-shadow: none !important;
}
#tea-recipe-app .recipe-view-head .overlay-action-btn.is-active {
  color: var(--pop);
}
#tea-recipe-app .recipe-view-head #overlay-wish.is-active svg {
  fill: currentColor;
}
#tea-recipe-app .recipe-view-head .overlay-action-btn--danger:hover {
  background: light-dark(#fbe7e3, #3a2420);
  color: light-dark(#a3341f, #f0a58f);
}

/* Rezeptansicht-Kopf: eigener Scrollbereich, damit die Scrollleiste nicht über
   Icons/Content liegt und der Kopf beim Scrollen fix bleibt. */
#tea-recipe-app .recipe-overlay .overlay-panel.recipe-view-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#tea-recipe-app .recipe-view-panel .recipe-view-head {
  position: static;
  flex: none;
}
#tea-recipe-app .recipe-view-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
#tea-recipe-app .recipe-view-top {
  padding-right: 18px;
  padding-bottom: 16px;
}
#tea-recipe-app .recipe-view-top .recipe-infobar-row {
  justify-content: flex-end;
}

/* Rezeptansicht-Fußzeile: Bewerten/Kommentare/Verlauf/Version + Aktionen,
   mit sichtbaren Labels statt reiner Icon-Punkte-Menüs. */
#tea-recipe-app .recipe-view-footer {
  margin-top: 8px;
  padding: 18px;
  border-top: 1px solid light-dark(#e4e8e1, #2b3029);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#tea-recipe-app .recipe-footer-infobar {
  flex-wrap: wrap;
  overflow-x: visible;
}
#tea-recipe-app .recipe-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#tea-recipe-app .footer-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid light-dark(#dde2da, #2d332b);
  background: light-dark(#ffffff, #191c17);
  color: light-dark(#4a5a4d, #c8d4c9);
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
#tea-recipe-app .footer-action-btn svg { flex: none; }
#tea-recipe-app .footer-action-btn:hover {
  border-color: light-dark(#52725b, #8eae95);
  background: light-dark(#eef3ed, #243228);
}
#tea-recipe-app .footer-action-btn.is-active {
  border-color: var(--pop);
  color: var(--pop);
}
#tea-recipe-app #overlay-wish.is-active svg { fill: currentColor; }
#tea-recipe-app .footer-action-btn--danger {
  margin-left: auto;
  color: light-dark(#a3341f, #f0a58f);
}
#tea-recipe-app .footer-action-btn--danger:hover {
  border-color: light-dark(#c65238, #f0a58f);
  background: light-dark(#fbe7e3, #3a2420);
}
@media (max-width: 719px) {
  #tea-recipe-app .footer-action-btn--danger { margin-left: 0; }
}

/* Rezeptansicht-Fußzeile in zwei Ebenen: Rezept-Aktionen als Buttons oben,
   Zusatzinfos/-aktionen als schlichte Links darunter. */
#tea-recipe-app .recipe-footer-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#tea-recipe-app .recipe-footer-primary .overlay-cook-btn {
  padding: 10px 16px;
  font-weight: 800;
}
#tea-recipe-app .footer-links-inline {
  display: contents;
}
#tea-recipe-app .recipe-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}
#tea-recipe-app .footer-link {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: light-dark(#5a6a5d, #a9b1a7);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  cursor: pointer;
}
#tea-recipe-app .footer-link:hover {
  color: light-dark(#213c28, #d9eadb);
  text-decoration-color: currentColor;
}
#tea-recipe-app .footer-link--danger {
  margin-left: auto;
  color: light-dark(#a3341f, #f0a58f);
}
@media (max-width: 719px) {
  #tea-recipe-app .footer-link--danger { margin-left: 0; }
}

/* Starter-Rezepte: Auswahl-Liste beim leeren Onboarding */
#tea-recipe-app .empty-actions {
  margin-top: 14px;
}
#tea-recipe-app .starter-intro {
  margin: 0 0 16px;
}
#tea-recipe-app .starter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
#tea-recipe-app .starter-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
#tea-recipe-app .starter-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
#tea-recipe-app .starter-item:hover {
  border-color: var(--ink);
}
#tea-recipe-app .starter-item.is-checked {
  border-color: var(--ink);
  background: light-dark(#eef1ea, #232922);
}
#tea-recipe-app .starter-item input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--ink);
}
#tea-recipe-app .starter-item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#tea-recipe-app .starter-item-title {
  font-weight: 700;
}
#tea-recipe-app .starter-item-meta {
  font-size: 13px;
}
#tea-recipe-app .starter-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#tea-recipe-app .starter-actions {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding-top: 8px;
}

/* V1: Vorrat-Kategorien */
#tea-recipe-app .pantry-group-title {
  flex-basis: 100%;
  margin: 12px 0 2px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-2, var(--ink));
  opacity: 0.65;
}
#tea-recipe-app .pantry-group-title:first-child {
  margin-top: 0;
}
#tea-recipe-app .pantry-cat-select {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
  max-width: 110px;
  cursor: pointer;
}
#tea-recipe-app .pantry-cat-select:hover,
#tea-recipe-app .pantry-cat-select:focus {
  opacity: 1;
}

/* V1 Redesign: Vorrat als Karten mit Farbakzenten, kompaktere Anordnung */
#tea-recipe-app .pantry-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#tea-recipe-app .pantry-card-full { grid-column: 1 / -1; }
@media (max-width: 860px) {
  #tea-recipe-app .pantry-hub-grid { grid-template-columns: 1fr; }
  #tea-recipe-app .pantry-card-full { grid-column: auto; }
}

#tea-recipe-app .pantry-list--cards {
  display: block;
}
#tea-recipe-app .pantry-group {
  margin-bottom: 14px;
}
#tea-recipe-app .pantry-group:last-child {
  margin-bottom: 0;
}
#tea-recipe-app .pantry-group-title {
  flex-basis: auto;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
}
#tea-recipe-app .pantry-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#tea-recipe-app .pantry-card {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
#tea-recipe-app .pantry-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
#tea-recipe-app .pantry-card--foreign { opacity: 0.75; border-style: dashed; }
#tea-recipe-app .pantry-card-main {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#tea-recipe-app .pantry-card-main small { font-weight: 500; opacity: 0.7; font-size: 11px; }
#tea-recipe-app .pantry-card-actions {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 0;
}
#tea-recipe-app .pantry-card.is-expanded .pantry-card-actions,
#tea-recipe-app .pantry-card:focus-within .pantry-card-actions {
  display: flex;
}
#tea-recipe-app .pantry-card-remove {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  opacity: 0.6;
  padding: 2px 4px;
}
#tea-recipe-app .pantry-card-remove:hover { opacity: 1; color: var(--warn); }

/* Kategorie-Farbakzente (oberer Rahmen der Karte + Gruppentitel) */
#tea-recipe-app .pantry-card[data-cat="standards"] { border-top-color: var(--c3); }
#tea-recipe-app .pantry-card[data-cat="frisch"] { border-top-color: var(--c4); }
#tea-recipe-app .pantry-card[data-cat="trocken"] { border-top-color: var(--c6); }
#tea-recipe-app .pantry-card[data-cat="saucen"] { border-top-color: var(--c2); }
#tea-recipe-app .pantry-card[data-cat="tiefkuehl"] { border-top-color: var(--c1); }
#tea-recipe-app .pantry-card[data-cat="getraenke"] { border-top-color: var(--c5); }
#tea-recipe-app .pantry-group[data-cat="standards"] .pantry-group-title { color: color-mix(in srgb, var(--c3) 70%, var(--ink)); }
#tea-recipe-app .pantry-group[data-cat="frisch"] .pantry-group-title { color: color-mix(in srgb, var(--c4) 60%, var(--ink)); }
#tea-recipe-app .pantry-group[data-cat="trocken"] .pantry-group-title { color: color-mix(in srgb, var(--c6) 70%, var(--ink)); }
#tea-recipe-app .pantry-group[data-cat="saucen"] .pantry-group-title { color: var(--c2); }
#tea-recipe-app .pantry-group[data-cat="tiefkuehl"] .pantry-group-title { color: var(--c1); }
#tea-recipe-app .pantry-group[data-cat="getraenke"] .pantry-group-title { color: var(--c5); }

/* "Was du damit kochen kannst": kompaktere, zweispaltige Anordnung */
#tea-recipe-app .pantry-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 720px) {
  #tea-recipe-app .pantry-panel { grid-template-columns: 1fr; }
}
#tea-recipe-app .pantry-cookable,
#tea-recipe-app .pantry-almost {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}
#tea-recipe-app .pantry-recipe-list,
#tea-recipe-app .pantry-almost-list {
  max-height: 420px;
}
#tea-recipe-app .pantry-recipe-btn {
  border-left: 4px solid var(--good);
  border-radius: 0 !important;
  background: var(--surface) !important;
}
#tea-recipe-app .pantry-almost-item {
  border-left: 4px solid var(--pop);
  border-radius: 0 !important;
  background: var(--surface) !important;
}

/* Nicht gemocht / lohnt sich: knapper, da nebeneinander */
#tea-recipe-app .hub-card-lead {
  font-size: 13px;
  margin: 0 0 10px;
}

/* V3: Menge/Einheit pro Vorrats-Zutat (optional) */
#tea-recipe-app .pantry-card-main small {
  font-weight: 500;
  opacity: 0.7;
  font-size: 11px;
}
#tea-recipe-app .pantry-amount-input,
#tea-recipe-app .pantry-unit-input {
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-family: inherit;
  padding: 2px 2px;
}
#tea-recipe-app .pantry-amount-input {
  width: 52px;
}
#tea-recipe-app .pantry-unit-input {
  width: 60px;
}
#tea-recipe-app .pantry-amount-input:focus,
#tea-recipe-app .pantry-unit-input:focus {
  outline: none;
  border-bottom-color: var(--accent, var(--ink));
}

/* V3b: Vorrat-Karten als Trello-artiges Muster - kleines Menue bei Klick, grosses Bearbeiten-Fenster ueber Icon */
#tea-recipe-app .pantry-card {
  display: inline-flex;
  align-items: stretch;
}
#tea-recipe-app .pantry-card-edit {
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.45;
  font-size: 13px;
  padding: 0 10px 0 4px;
  cursor: pointer;
  align-self: center;
}
#tea-recipe-app .pantry-card-edit:hover,
#tea-recipe-app .pantry-card-edit:focus-visible {
  opacity: 1;
}
#tea-recipe-app .pantry-quickcat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
#tea-recipe-app .pantry-quickcat-btn {
  width: auto;
  min-height: 36px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-left: 4px solid var(--line);
}
#tea-recipe-app .pantry-quickcat-btn.is-active {
  background: light-dark(#f1f1ea, #1c1f19);
  border-color: currentColor;
}
#tea-recipe-app .pantry-quickcat-btn[data-pantry-cat-swatch="standards"] { border-left-color: var(--c3); }
#tea-recipe-app .pantry-quickcat-btn[data-pantry-cat-swatch="frisch"] { border-left-color: var(--c4); }
#tea-recipe-app .pantry-quickcat-btn[data-pantry-cat-swatch="trocken"] { border-left-color: var(--c6); }
#tea-recipe-app .pantry-quickcat-btn[data-pantry-cat-swatch="saucen"] { border-left-color: var(--c2); }
#tea-recipe-app .pantry-quickcat-btn[data-pantry-cat-swatch="tiefkuehl"] { border-left-color: var(--c1); }
#tea-recipe-app .pantry-quickcat-btn[data-pantry-cat-swatch="getraenke"] { border-left-color: var(--c5); }
#tea-recipe-app .pantry-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
}
#tea-recipe-app .pantry-modal-field select,
#tea-recipe-app .pantry-modal-field input {
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 0;
}
#tea-recipe-app .pantry-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* V6b: Vorrat-Kartenmenue kompakt statt grossem Modal - Rueckmeldung 2026-09-24 */
#tea-recipe-app button.pantry-card {
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
}
#tea-recipe-app .pantry-menu-panel {
  width: min(320px, 100%);
}
#tea-recipe-app .pantry-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
}
#tea-recipe-app .pantry-menu-head h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 800;
  text-transform: none;
}
#tea-recipe-app .pantry-menu-close {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  width: 32px;
  height: 32px;
  cursor: pointer;
  opacity: 0.6;
}
#tea-recipe-app .pantry-menu-close:hover {
  opacity: 1;
}
#tea-recipe-app .pantry-menu-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#tea-recipe-app .pantry-menu-amount-row {
  display: flex;
  gap: 8px;
}
#tea-recipe-app .pantry-menu-amount-input,
#tea-recipe-app .pantry-menu-unit-input {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 14px;
  padding: 9px 10px;
  border-radius: 0;
}
#tea-recipe-app .pantry-menu-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2, var(--ink));
  opacity: 0.6;
  margin-top: 4px;
}
#tea-recipe-app .pantry-quickcat-grid {
  margin-bottom: 0;
}
#tea-recipe-app .pantry-quickcat-btn {
  width: auto;
  min-height: 34px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  border-radius: 0;
}
#tea-recipe-app .pantry-quickcat-btn.is-active {
  background: light-dark(#f1f1ea, #1c1f19);
  border-color: currentColor;
}
#tea-recipe-app .pantry-menu-remove {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: var(--warn);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0 0;
  margin-top: 4px;
}

/* V6c: Vorrat-Kartenmenue als echtes Popover neben der Karte (Trello-Vorbild), grosses Fenster fuer volle Bearbeitung */
#tea-recipe-app #pantry-popover-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: transparent;
}
#tea-recipe-app .pantry-popover {
  position: fixed;
  z-index: 101;
  width: min(280px, 90vw);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
#tea-recipe-app .pantry-popover-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--line);
}
#tea-recipe-app .pantry-popover-head h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
}
#tea-recipe-app .pantry-popover-dot {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  background: var(--line);
  border: 1px solid var(--ink);
}
#tea-recipe-app .pantry-popover-dot[data-pantry-cat-swatch="standards"] { background: var(--c3); }
#tea-recipe-app .pantry-popover-dot[data-pantry-cat-swatch="frisch"] { background: var(--c4); }
#tea-recipe-app .pantry-popover-dot[data-pantry-cat-swatch="trocken"] { background: var(--c6); }
#tea-recipe-app .pantry-popover-dot[data-pantry-cat-swatch="saucen"] { background: var(--c2); }
#tea-recipe-app .pantry-popover-dot[data-pantry-cat-swatch="tiefkuehl"] { background: var(--c1); }
#tea-recipe-app .pantry-popover-dot[data-pantry-cat-swatch="getraenke"] { background: var(--c5); }
#tea-recipe-app .pantry-popover-dot[data-pantry-cat-swatch="none"] { background: transparent; }
#tea-recipe-app .pantry-popover-body {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#tea-recipe-app .pantry-popover-line {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.75;
}
#tea-recipe-app .pantry-popover-amount {
  opacity: 1;
  font-weight: 700;
}
#tea-recipe-app .pantry-popover-edit {
  align-self: flex-start;
  margin-top: 4px;
  border: none;
  background: transparent;
  color: var(--accent, var(--ink));
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0;
}