body{font-family:system-ui,Arial;line-height:1.5;background:#f7f7f8;color:#222}
.container{max-width:1000px;margin:20px auto;padding:0 16px}
h1{margin:0 0 10px}
.inline{margin:10px 0}
label{margin-right:10px}
input,button{padding:10px 12px;margin-right:10px}
.suggest{background:#eef9f1;border:1px solid #c5e8d1;padding:10px;margin:10px 0}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{border:1px solid #ddd;padding:10px;text-align:left}
thead{background:#f0f0f0}
form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.table-responsive{overflow-x:auto}
.ops a, .ops button{margin-right:6px}

@media (max-width:768px){
  .container{padding:0 12px}
  form{display:grid;grid-template-columns:1fr;gap:8px}
  input,button{width:100%;margin-right:0}
}

@media (max-width:640px){
  thead{display:none}
  table,tbody,tr,td{display:block;width:100%}
  tr{margin-bottom:12px;background:#fff;border:1px solid #ddd}
  td{border:none;border-bottom:1px solid #eee;padding:10px 12px;display:flex;justify-content:space-between;align-items:center}
  td:last-child{border-bottom:none}
  td::before{content:attr(data-label);font-weight:600;color:#555;margin-right:12px}
  .ops a,.ops button{display:inline-block}
}