:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #25071b;
  --aubergine: #510735;
  --cream: #fff7eb;
  --paper: #fdf8fb;
  --purple: #6f35bd;
  --purple-hover: #7d42c6;
  --accent-ink: #592b88;
  --plum-ink: #49253d;
  --plum-tint: #f1e5ee;
  --plum-tint-hover: #eadde7;
  --line: #e4d6e0;
  --field-line: #9f8094;
  --muted: #695363;
  --ink: #2c1d29;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(ellipse at 35% 0%, var(--aubergine), #350925 48%, #210818 85%);
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
a { color: var(--accent-ink); }
button, input, textarea, select { font: inherit; }
input, textarea, select { font-size: max(16px, 1rem); }
button, summary { cursor: pointer; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.top :focus-visible, .library-heading :focus-visible, .search :focus-visible,
.paging :focus-visible, .category-list:not(.recipe-categories) :focus-visible {
  outline-color: var(--cream);
}
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.85rem, 5vw, 3rem); letter-spacing: -.045em; line-height: 1.05; }
h2 { letter-spacing: -.025em; }
h3 { font-size: 1rem; }
.top {
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid #fff7eb38;
  color: var(--cream);
}
.top-inner, .shell {
  width: min(100%, 980px);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.top-inner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 72px; }
.top-inner a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.top-inner .brand-link { align-self: flex-end; }
.top-inner [hidden], .recipe-actions [hidden], .recipe-categories[hidden] { display: none; }
.brand-mark { align-self: flex-end; display: block; object-fit: contain; object-position: center bottom; }
.shell { padding-block: clamp(20px, 4vw, 48px); }
.surface { background: var(--paper); padding: clamp(18px, 4vw, 44px); border-radius: 22px; overflow-wrap: anywhere; }
.landing, .editor { max-width: 720px; margin-inline: auto; }
.library-heading { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--cream); }
.library-heading h1 { margin: 0; }
.button {
  border: 1px solid transparent; border-radius: 12px; padding: 10px 15px;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 650; text-decoration: none; white-space: nowrap;
}
.button[hidden] { display: none; }
.primary { background: var(--purple); color: white; }
.primary:hover { background: var(--purple-hover); }
.secondary { background: var(--plum-tint); color: var(--plum-ink); border-color: var(--line); }
.secondary:hover { background: var(--plum-tint-hover); }
.danger { background: #952b4d; color: white; }
.search { display: flex; gap: 8px; margin-block: 22px; }
input, textarea, select {
  color: var(--ink); background: white; border: 1px solid var(--field-line); padding: 10px 12px;
  border-radius: 10px; min-height: 44px; min-width: 0; width: 100%;
  scroll-margin-block: 18px;
}
textarea { resize: vertical; }
.cards { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 12px; }
.recipe-card {
  background: var(--paper); color: var(--ink); text-decoration: none; border-radius: 16px;
  padding: 20px; min-height: 86px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; font-weight: 700; font-size: 1.15rem; overflow-wrap: anywhere;
}
.arrow { color: var(--purple); font-size: 1.5rem; }
.empty h2 { margin-bottom: 8px; }
.paging, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.paging { margin-top: 16px; }
.recipe-heading { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 12px 16px; }
.recipe-fact {
  display: grid; gap: 2px; min-width: 88px; padding: 8px 12px;
  border: 0; border-radius: 12px; background: #f7eef4;
  color: var(--ink); text-align: start;
}
.recipe-fact[hidden] { display: none; }
.fact-label { color: var(--muted); font-size: .875rem; }
.fact-value { font-weight: 650; }
.servings-trigger:hover, .servings-trigger:active { background: var(--plum-tint); }
.recipe-columns { display: grid; gap: 18px; padding-top: 22px; }
.recipe-group ul, .recipe-group ol { padding-left: 1.3em; }
.recipe-group li { line-height: 1.6; margin-bottom: 9px; white-space: pre-wrap; }
.recipe-note, .advanced-options { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.advanced-actions { display: grid; gap: 18px; padding-top: 8px; }
.advanced-actions h2 { font-size: 1rem; margin-bottom: 8px; }
summary { min-height: 44px; padding-block: 10px; font-weight: 650; }
.prose { white-space: pre-wrap; line-height: 1.55; }
.muted { color: var(--muted); line-height: 1.5; }
.editor label { display: grid; gap: 5px; font-weight: 650; }
.editor form { display: grid; gap: 16px; }
.editor-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.editor form p { margin-bottom: 0; }
.error { padding: 12px; border-radius: 10px; color: #781a38; background: #ffe5ef; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 720px) {
  .recipe-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 28px; }
}

.top-inner .back-button {
  position: absolute;
  inset-inline-start: max(16px, env(safe-area-inset-left));
  display: inline-grid;
  color: inherit;
}
.recipe-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0.67em; }
.recipe-title-row h1 { min-width: 0; margin: 0; }
.recipe-actions { display: flex; flex: none; gap: 8px; }
.icon-button {
  color: var(--accent-ink);
  background: transparent;
  border: 0;
  border-radius: 12px;
  padding: 0;
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
}
.icon-button:hover { background: var(--plum-tint); }
.top-inner .back-button:hover { background: #ffffff18; }
.add-button { color: white; background: var(--purple); }
.add-button:hover { background: var(--purple-hover); }
.icon-button[hidden] { display: none; }
.feedback:empty { display: none; }
.feedback { display: block; margin-bottom: 12px; }
.category-list { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 14px; }
.category-list a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 5px 13px; border-radius: 100px; text-decoration: none;
  color: var(--cream); background: #fff7eb18; overflow-wrap: anywhere;
}
.category-list a[aria-current="page"] { color: var(--plum-ink); background: var(--plum-tint); font-weight: 700; }
.recipe-categories a { color: var(--plum-ink); background: var(--plum-tint); }
.recipe-categories a:hover { background: var(--plum-tint-hover); }
.recipe-sign-in { display: inline-flex; align-items: center; min-height: 44px; }
.recipe-sign-in[hidden] { display: none; }
.category-picker { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.category-picker legend { padding-inline: 5px; font-weight: 650; }
.category-options { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
.category-options label { display: flex; align-items: center; min-height: 44px; gap: 7px; overflow-wrap: anywhere; }
.category-options input { width: 20px; height: 20px; min-height: auto; accent-color: var(--purple); }
.share-dialog, .unsaved-dialog { width: min(400px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 16px; padding: 22px; overflow-wrap: anywhere; }
.share-dialog::backdrop, .unsaved-dialog::backdrop { background: #210818a6; }
.share-dialog form { margin-top: 18px; }
@media (max-width: 380px) {
  .recipe-title-row { flex-wrap: wrap; }
  .recipe-actions { margin-inline-start: auto; }
}

.serving-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.scalable-measure { color: var(--accent-ink); font-weight: 700; white-space: nowrap; }
.serving-controls label { display: grid; gap: 4px; }
.serving-controls input { width: 9rem; }
.recipe-unit { white-space: nowrap; }
.ingredient-reference {
  border: 0; padding: 0; background: transparent; color: var(--accent-ink);
  text-decoration: underline; text-underline-offset: 0.18em; font-weight: 650;
}
.ingredient-dialog, .servings-dialog {
  width: min(380px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px; background: var(--paper); color: var(--ink); overflow-wrap: anywhere;
}
.ingredient-dialog { text-align: center; cursor: pointer; }
.ingredient-dialog p { margin-block: 0; }
.ingredient-dialog [data-ingredient-group] { color: var(--muted); margin-bottom: 4px; }
.ingredient-dialog::backdrop, .servings-dialog::backdrop { background: #210818a6; }
.ingredient-dialog p:empty, [data-text-warning]:empty { display: none; }
.text-review { padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.text-review p[data-text-warning] { color: var(--plum-ink); font-weight: 650; }
.text-review details details { border-top: 1px solid var(--line); padding-block: 6px; }
.text-review details label { margin-block: 8px; }