:root {
  --bg: #0f172a;
  --panel: #111827;
  --panel-soft: #1f2937;
  --text: #e5e7eb;
  --muted: #93a4bd;
  --primary: #3b82f6;
  --primary-2: #6366f1;
  --danger: #ef4444;
  --success: #22c55e;
  --line: #334155;
}

body {
  font-family: Arial, sans-serif;
  background: radial-gradient(circle at top, #1e293b, var(--bg) 55%);
  color: var(--text);
  margin: 0;
  padding: 0;
}
.container { max-width: 1000px; margin: 32px auto; padding: 0 16px; }
.card {
  background: linear-gradient(160deg, var(--panel), var(--panel-soft));
  border-radius: 12px;
  border: 1px solid #243247;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.45);
}
h1,h2 { margin-top: 0; color: #bfdbfe; }
.grid { display: grid; gap: 8px; grid-template-columns: repeat(5, 1fr); }
.grid button { grid-column: span 5; }
.recipe-form { display: grid; gap: 8px; }
.recipe-head { display: grid; gap: 8px; grid-template-columns: 2fr 1fr 1fr; }
.recipe-grid { display: grid; gap: 8px; }
.ingredient-row { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) 120px auto; align-items: center; }
.ingredient-row input { width: 100%; box-sizing: border-box; }
.ingredient-row .remove-ingredient { white-space: nowrap; }
input, select, button {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #3b4f68;
}
input, select {
  background: #0b1220;
  color: var(--text);
}
button {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
button.danger { background: linear-gradient(135deg, #ef4444, #b91c1c); }
button.success { background: linear-gradient(135deg, #22c55e, #15803d); margin-top: 8px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); }
th { color: #93c5fd; }
tbody tr:nth-child(odd) { background: rgba(59, 130, 246, 0.07); }
tbody tr:hover { background: rgba(99, 102, 241, 0.14); }
.total { font-size: 1.1rem; color: #fde68a; }
.muted { color: var(--muted); margin-top: 0; }
.recipe-list { margin: 0; padding-left: 18px; }
.recipe-list li { margin: 2px 0; }
.inline-form { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.stock-form { display: flex; gap: 6px; align-items: center; }
.stock-form input { width: 84px; }
.price-form { display: flex; gap: 6px; align-items: center; }
.price-form input { width: 96px; }


@media (max-width: 720px) {
  .ingredient-row { grid-template-columns: 1fr; }
}

.low-stock { background: rgba(239,68,68,0.18) !important; }
.button-link { display:inline-block; padding:8px 10px; border-radius:8px; background:#334155; color:#fff; text-decoration:none; }



button, .button-link { margin: 2px 4px 2px 0; }
textarea { margin-top: 6px; }
label { display:block; margin:6px 0; color: var(--muted); }
small.muted { display:block; margin-top:6px; }

.item-icon img { width: 48px; height: 48px; object-fit: contain; vertical-align: middle; }
.item-icon .emoji-fallback { font-size: 32px; line-height: 1; }

.item-icon { display:inline-flex; align-items:center; margin-right:4px; }