/* Reset & Basics */
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:Arial,Helvetica,sans-serif;background:#fafafa;color:#333;}
h1{font-size:1.8rem;}

/* Header */
.app-header{
  background:#2a2a2a;
  color:#fff;
  padding:1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.app-header button{
  background:#e63946;
  color:#fff;
  border:none;
  padding:.6rem 1.2rem;
  cursor:pointer;
  border-radius:4px;
  font-size:1rem;
}
.app-header button:hover{background:#d62828;}

/* Grid */
.menu-grid{
  display:grid;
  gap:1rem;
  padding:1rem;
}
@media(min-width:600px){.menu-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:900px){.menu-grid{grid-template-columns:repeat(3,1fr);} }

/* Card */
.card{
  background:#fff;
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.card img{width:100%;height:180px;object-fit:cover;}
.card .content{padding:1rem;flex:1;}
.card .content h3{margin-bottom:.4rem;font-size:1.2rem;}
.card .content p{font-size:.9rem;margin-bottom:.8rem;}
.card .content .price{font-weight:bold;font-size:1rem;color:#e63946;}
.card .actions{
  display:flex;
  justify-content:flex-end;
  padding:0 .5rem .5rem;
}
.card .actions button{
  background:none;border:none;
  cursor:pointer;
  font-size:1.2rem;
  margin-left:.4rem;
}
.card .actions button.edit{color:#1d4ed8;}
.card .actions button.delete{color:#c02630;}

/* Modal */
.modal{
  position:fixed; inset:0; display:none;
  background:rgba(0,0,0,.6);
  justify-content:center; align-items:center;
  z-index:10;
}
.modal-content{
  background:#fff; padding:1.5rem; border-radius:6px; width:90%; max-width:500px;
  position:relative;
}
.modal-content h2{margin-bottom:1rem;}
.modal-content form label{
  display:block; margin-bottom:.8rem;
}
.modal-content form input,
.modal-content form textarea,
.modal-content form select{
  width:100%; padding:.6rem; border:1px solid #ccc; border-radius:4px;
}
.modal-actions{
  display:flex; justify-content:flex-end; gap: .6rem; margin-top:1rem;
}
.modal-actions button{
  padding:.6rem 1rem; border:none; border-radius:4px; cursor:pointer;
}
#cancelBtn{background:#9ca3af;color:#fff;}
#saveBtn{background:#2e86de;color:#fff;}
#cancelBtn:hover{background:#6b7280;}
#saveBtn:hover{background:#1c4a88;}