/* body	{
  font-family:system-ui,sans-serif;margin:1rem;display:grid;grid-template-columns:1fr 380px;gap:1rem

 } */
 .grid	{
 	display:flex;
	grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
	gap:.6rem
 }
 .card	{
	border:1px solid #ddd;
	border-radius:10px;
	padding:.6rem
 }

 .ticket {
  	border:1px solid #ddd;
	border-radius:10px;
	padding:1rem;
	position:sticky;
	top:1rem;height:max-content
 }

 h3 {
 	margin:.4rem 0
 }
 
 form.add {
	display:flex;
	gap:.4rem;
	margin-top:.4rem
 }

 input[type=number] {
 	width:70px
 }

 a.btn {
	display:inline-block;
	padding:.7rem 1rem;
	border:1px solid #ddd;
	border-radius:10px;
	text-decoration:none
 }

 .total {
 	font-weight:700;
	font-size:1.1rem;
	text-align:right;
	margin-top:.5rem
 }
 
 .ok {
  	color:#060
 }
 
 .warn {
  	color:#b60
 }
 .btn {
	display:inline-block;
	padding:.5rem .8rem;
	border:1px solid #ccc;
	border-radius:8px;
	text-decoration:none
 }

 .pay {
  	background:#0a0;
	color:#fff;
	border:none
 }

 .close {
  	background:#111;
	color:#fff;
	border:none
 }
 
 .sec {
 	margin-top:1rem;
	border-top:1px dashed #ddd;
	padding-top:.7rem
 }
 table {
 	width:100%;
	border-collapse:collapse
 }

 th,td {
	border:1px solid #eee;
	padding:.4rem;
	text-align:left
 }

 th {
 	text-align:left;
	background:#fafafa
 }
 
 .muted {
 	color:#666;
	font-size:.9rem
 }

 .del {
	background:#c00;
	color:#fff;
	border:none;
	border-radius:6px;
	cursor:pointer;
	width:28px;
	height:28px;
	line-height:24px;
	font-weight:700
}
 .del:hover {
  	opacity:.9
}