* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0; color: #0f172a; background: #f8fafc; }
header { background: #0ea5e9; color: white; padding: 24px; }
#auth-section { margin-top: 16px; }
#auth-section button { margin-right: 8px; }
#user-info { font-size: 0.9rem; opacity: 0.9; }
.loading { opacity: 0.7; font-style: italic; }
.error { color: #dc2626; background: #fef2f2; padding: 8px; border-radius: 4px; margin: 8px 0; }
.auth-authenticated { display: flex; align-items: center; gap: 12px; }
.auth-unauthenticated { display: flex; align-items: center; gap: 12px; }
.auth-required { text-align: center; padding: 20px; background: #f8fafc; border-radius: 8px; }
main { max-width: 900px; margin: 24px auto; padding: 0 16px; }
section { background: white; padding: 16px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.08); margin-bottom: 16px; }
label { display: block; margin: 8px 0; }
input, textarea { width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; }
button { background: #0ea5e9; color: white; border: 0; padding: 8px 14px; border-radius: 6px; cursor: pointer; }
button:hover { background: #0284c7; }
ul { list-style: none; padding: 0; }
li { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-bottom: 1px solid #e2e8f0; }
.muted { color: #64748b; font-size: 0.875rem; }

/* Recipe-specific styles */
.recipe {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  background: white;
}

.recipe h3 {
  margin: 0 0 12px 0;
  color: #0ea5e9;
}

.recipe h3 a {
  color: inherit;
  text-decoration: none;
}

.recipe h3 a:hover {
  text-decoration: underline;
}

.recipe .ingredients,
.recipe .instructions {
  margin-bottom: 12px;
}

.recipe .meta {
  color: #64748b;
  font-size: 0.875rem;
  margin-bottom: 12px;
}

.recipe .meta small {
  margin-right: 16px;
}

.recipe .actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.button {
  display: inline-block;
  background: #0ea5e9;
  color: white;
  text-decoration: none;
  border: 0;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
}

.button:hover {
  background: #0284c7;
}

.button.danger {
  background: #dc2626;
}

.button.danger:hover {
  background: #b91c1c;
}

/* Recipe detail page styles */
.recipe-detail {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.recipe-detail header {
  background: none;
  color: inherit;
  padding: 0;
  margin-bottom: 24px;
}

.recipe-detail h2 {
  margin: 0 0 12px 0;
  color: #0ea5e9;
  font-size: 2rem;
}

.recipe-detail .meta {
  color: #64748b;
  font-size: 0.875rem;
}

.recipe-detail .meta small {
  margin-right: 16px;
}

.recipe-detail .ingredients h3,
.recipe-detail .instructions h3 {
  margin: 0 0 12px 0;
  color: #374151;
  font-size: 1.25rem;
}

.recipe-detail .ingredients ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.recipe-detail .ingredients li {
  padding: 4px 0;
  border-bottom: none;
  display: list-item;
}

.recipe-detail .instructions-content {
  line-height: 1.6;
  white-space: pre-wrap;
}

.actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e2e8f0;
}

/* Header link styling */
header h1 a {
  color: inherit;
  text-decoration: none;
}

header h1 a:hover {
  text-decoration: underline;
}