:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --accent:#0b74de;
  --muted:#666;
  --gap:12px;
  --radius:10px;
  --shadow: 0 6px 18px rgba(20,20,60,0.06);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:#111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.app-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
  background:linear-gradient(90deg,#fff,#f8fbff);
  border-bottom:1px solid rgba(20,20,60,0.03);
}

.app-header h1{margin:0;font-size:18px}
.header-controls{display:flex;gap:8px;align-items:center}
.header-controls input{width:72px;padding:6px;border-radius:6px;border:1px solid #ddd}

.container{display:flex;gap:20px;padding:20px;flex:1;flex-direction:column;max-width:1100px;margin:0 auto;width:100%}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tab{
  background:transparent;border:1px solid rgba(10,10,50,0.06);padding:8px 12px;border-radius:10px;cursor:pointer
}
.tab.active{background:var(--accent);color:white;border-color:transparent}

.panel{display:none}
.panel.active{display:block}

.card{
  background:var(--card);
  padding:14px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:12px;
}

form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
form input, form select{padding:8px;border:1px solid #ddd;border-radius:8px}
form button{background:var(--accent);color:white;border:none;padding:10px 12px;border-radius:8px;cursor:pointer}

#foodsList, #mealsList, #pricesList{display:flex;flex-direction:column;gap:8px}
.item-row{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:8px;border:1px solid rgba(20,20,60,0.03)}
.item-row .meta{display:flex;gap:8px;align-items:center}
.small-muted{color:var(--muted);font-size:13px}

.hidden{display:none}

.mt-16{margin-top:16px}

table{width:100%;border-collapse:collapse}
td,th{padding:8px;border-bottom:1px solid rgba(0,0,0,0.06);text-align:left}

.app-footer{padding:12px;text-align:center;color:var(--muted);font-size:13px}

@media (min-width:900px){
  .container{flex-direction:row}
  nav.tabs{flex-direction:column;width:220px}
  .panel{flex:1}
}