:root{
  --paper:#efe8d8; --paper-2:#e4dcc7;
  --ink:#2a2116; --ink-dim:#6b6252;
  --teal:#2f5d50; --teal-dark:#1e4038;
  --brick:#a1503a; --brick-bg:#f0dfd4;
  --line:#cfc4a8;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Work Sans',sans-serif;
}
.page{max-width:980px; margin:0 auto; padding:32px 20px 70px;}

.masthead-row{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;}
h1{
  font-family:'Bitter',serif; font-weight:700; font-size:clamp(30px,6vw,44px);
  margin:0; color:var(--teal-dark);
}
.tagline{color:var(--ink-dim); margin:6px 0 0; font-size:15px;}

.btn-add, .btn-primary{
  background:var(--teal); color:var(--paper); border:none; border-radius:4px;
  padding:10px 18px; font-family:inherit; font-weight:500; font-size:14px; cursor:pointer;
}
.btn-add:active, .btn-primary:active{background:var(--teal-dark);}

.filters{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap;}
.filters button{
  background:none; border:1px solid var(--line); color:var(--ink);
  border-radius:20px; padding:6px 14px; font-family:inherit; font-size:13px; cursor:pointer;
}
.filters button.active{background:var(--teal); border-color:var(--teal); color:var(--paper);}

.ticker{
  margin-top:20px; padding:10px 16px; background:var(--brick-bg); border-left:3px solid var(--brick);
  border-radius:4px; font-size:14px; color:var(--ink); display:none;
}
.ticker.show{display:block;}

.add-form{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; padding:16px;
  background:var(--paper-2); border-radius:6px;
}
.add-form input, .add-form select{
  background:var(--paper); border:1px solid var(--line); color:var(--ink);
  border-radius:4px; padding:9px 10px; font-family:inherit; font-size:14px;
}
.add-form input[name=name]{flex:1; min-width:160px;}

.catalog{
  margin-top:28px; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:18px;
}
.card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  display:flex; flex-direction:column;
}
.card.low{border-color:var(--brick);}
.card-photo{
  position:relative; aspect-ratio:4/3; background:#ddd3b8; display:flex; align-items:center; justify-content:center;
}
.photo-img{width:100%; height:100%; object-fit:cover;}
.photo-upload{
  cursor:pointer; color:var(--ink-dim); font-size:13px; border:1px dashed var(--line);
  padding:8px 12px; border-radius:4px; background:rgba(239,232,216,0.7);
}
.card-photo:has(.photo-img:not([hidden])) .photo-upload{
  position:absolute; bottom:8px; right:8px; padding:4px 8px; font-size:11px;
}

.card-body{padding:14px; display:flex; flex-direction:column; gap:8px; flex:1;}
.card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:6px;}
.card-name{font-family:'Bitter',serif; font-size:17px; margin:0; font-weight:700; line-height:1.25;}
.card-del{background:none; border:none; color:var(--ink-dim); font-size:18px; cursor:pointer; line-height:1;}
.card-cat{margin:0; font-size:12px; color:var(--teal-dark); text-transform:none;}

.card-stats{display:flex; gap:14px; font-size:12px; color:var(--ink-dim);}
.card-stats label{display:flex; flex-direction:column; gap:3px;}
.card-stats input{
  width:64px; background:var(--paper); border:1px solid var(--line); color:var(--ink);
  border-radius:4px; padding:6px; font-family:inherit; font-size:14px;
}
.card-stats .unit{display:none;}

.order-toggle{
  margin-top:4px; background:none; border:1px solid var(--line); color:var(--ink);
  border-radius:4px; padding:8px; font-family:inherit; font-size:13px; cursor:pointer;
}
.order-toggle.on{background:var(--brick); border-color:var(--brick); color:#fff;}

.empty{color:var(--ink-dim); text-align:center; margin-top:40px; font-size:14px;}

@media (max-width:480px){
  .catalog{grid-template-columns:repeat(auto-fill, minmax(150px,1fr));}
}