:root{
  --bg:#0f172a;
  --card:#111827;
  --muted:#9ca3af;
  --text:#e5e7eb;
  --accent:#0760e5;
  --accent2:#26048b;
  --ring: rgba(0, 30, 181, 0.411);
}

*{ box-sizing:border-box; }
body{
  margin:0; font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu;
  color:var(--text); background:linear-gradient(180deg,#0b1224,#0f172a 60%);
}
html,body{width:100%;overflow-x:hidden;}
.container{ max-width:980px; margin:0 auto; padding:24px; }
header h1{ margin:0 0 4px; font-weight:700; letter-spacing:.3px; }
.muted{ color:var(--muted); }

.controls{
  display:grid; gap:12px; grid-template-columns: 1fr auto auto;
  align-items:start; margin:20px 0 28px;
}
.controls #search{ grid-column:1 / span 1; }
.controls #matchMode{ grid-column:2 / span 1; }
.controls #maxMissing{ grid-column:3 / span 1; }
.controls .tag-input{ grid-column:1 / span 3; }
.controls .pantry{ grid-column:1 / span 3; }
.controls .toggles{ grid-column:1 / span 3; }
.controls .tag-input input{ width:100%; }

input, textarea, select, button{
  background:#0b1324; color:var(--text); border:1px solid #1f2937;
  border-radius:10px; padding:10px 12px; outline:none;
}
input:focus,textarea:focus,select:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); }
button{ cursor:pointer; background:linear-gradient(180deg,var(--accent2),var(--accent)); border:none; font-weight:600; }
button:hover{ filter:brightness(3); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip{
  background:#0b1324; border:1px solid #243044; padding:6px 10px; border-radius:999px;
  display:inline-flex; gap:8px; align-items:center;
}
.chip button{ background:#243044; padding:2px 6px; border-radius:999px; }

.cards{ display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.card{
  background:var(--card); border:1px solid #1f2937; border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:8px;
}
.card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.card-actions{ display:flex; gap:4px; }
.card-actions .icon{ background:#18263b; border:1px solid #25324a; padding:4px 8px; border-radius:8px; font-size:14px; line-height:1; }
.card-actions .icon:hover{ background:#22344f; }
.card.pulse{ animation:pulse-card 1.2s ease-in-out 1; }
@keyframes pulse-card{ 0%{ box-shadow:0 0 0 0 rgba(0,173,181,0.5);} 70%{ box-shadow:0 0 0 14px rgba(0,173,181,0);} 100%{ box-shadow:0 0 0 0 rgba(0,173,181,0);} }
.card h3{ margin:0; font-size:18px; }
.badge{ display:inline-block; font-size:12px; color:#93c5fd; border:1px solid #1e3a8a; background:#0b1324; padding:2px 6px; border-radius:999px; margin-right:6px; }
.kv{ font-size:13px; color:var(--muted); }
.ing-list{ display:flex; flex-wrap:wrap; gap:6px; }
.ing{ border:1px solid #25324a; padding:2px 6px; border-radius:8px; font-size:12px; }
.ing.missing{ border-color:#7f1d1d; color:#fecaca; }

.add-form{ margin:34px 0; }
.add-form form{ display:grid; gap:12px; }
.add-form label{ display:flex; flex-direction:column; gap:6px; }
.ing-add{ display:grid; gap:8px; grid-template-columns: 1fr 1fr auto; align-items:center; }
#ingTable{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{ background:#0b1324; border:1px dashed #334155; border-radius:999px; padding:6px 10px; }
.pill .q{ color:#93c5fd; margin-left:6px; }
.pill .x{ margin-left:8px; background:#243044; border-radius:8px; padding:0 6px; cursor:pointer; }
footer{ margin-top:38px; text-align:center; }

/* Prevent long content from forcing horizontal scroll */
.card details > div{ word-break:break-word; overflow-wrap:break-word; }

/* Modal (full-screen recipe) */
.no-scroll{ overflow:hidden; }
.modal-backdrop{ position:fixed; inset:0; background:rgba(10,15,25,0.78); backdrop-filter:blur(6px); display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; z-index:1000; overflow:auto; }
.modal-backdrop.hidden{ display:none; }
.modal{ background:#111c2c; border:1px solid #1f2937; border-radius:24px; max-width:840px; width:100%; padding:24px 26px 36px; display:flex; flex-direction:column; gap:16px; box-shadow:0 8px 32px -4px rgba(0,0,0,0.55); }
.modal-bar{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.modal-title{ margin:0; font-size:24px; line-height:1.2; }
.modal-actions .icon{ background:#18263b; border:1px solid #25324a; padding:6px 10px; border-radius:12px; }
.modal-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.modal-ing{ list-style:disc; margin:4px 0 16px 22px; padding:0; display:grid; gap:4px; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.modal-ing li.missing{ color:#fecaca; }
.modal-instructions{ background:#0b1324; padding:14px 16px; border-radius:14px; white-space:pre-wrap; line-height:1.45; font-family:inherit; overflow:auto; max-height:50vh; }

@media (max-width: 720px){
  .modal{ padding:20px 18px 32px; border-radius:20px; }
  .modal-instructions{ max-height:55vh; }
  .modal-title{ font-size:20px; }
}

/* Mobile adjustments */
@media (max-width: 720px){
  .container{ padding:16px 14px; }
  .controls{ grid-template-columns:1fr; }
  .controls #search,
  .controls #matchMode,
  .controls #maxMissing,
  .controls .tag-input,
  .controls .pantry,
  .controls .toggles{ grid-column:1 / span 1; }
  .cards{ grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
  .ing-add{ grid-template-columns: 1fr 1fr; }
  .ing-add button{ grid-column:1 / span 2; width:100%; }
  .card-actions .icon{ padding:4px 6px; }
}

@media (max-width: 420px){
  .ing-add{ grid-template-columns:1fr; }
  .ing-add input{ width:100%; }
  .ing-add button{ grid-column:1 / span 1; }
}
.qty {
  font-weight: bold;      /* Makes the measurement bold */
  color: #ff9900;         /* Example: orange color, change as desired */
}