* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; background: #f4f6f8; margin: 0; color: #1f2937; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; background:#111827; color:#fff; }
.container { max-width: 1200px; margin: 24px auto; padding: 0 16px 24px; }
.card { background:#fff; border-radius:12px; padding:20px; margin-bottom:20px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.inner-card { margin-bottom: 0; }
.small-card { max-width: 420px; margin: 80px auto; }
.grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.delivery-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.form-grid { display:grid; gap:12px; }
.cols-4 { grid-template-columns: repeat(4, 1fr); align-items:start; }
input, select, button { width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; }
.btn { background:#2563eb; color:#fff; border:none; cursor:pointer; }
.btn.secondary { background:#6b7280; }
.alert { padding:12px; border-radius:8px; margin-bottom:16px; }
.alert.success { background:#dcfce7; color:#166534; }
.alert.error { background:#fee2e2; color:#991b1b; }
.muted { color:#6b7280; }
.dual-list-wrapper { display:grid; grid-template-columns:1fr 120px 1fr; gap:16px; align-items:center; margin-bottom:16px; }
.dual-list { width:100%; min-height:260px; }
.dual-actions { display:grid; gap:12px; }
table { width:100%; border-collapse: collapse; margin-top:16px; }
th, td { padding:10px; border-bottom:1px solid #e5e7eb; text-align:left; }
.search-row { display:flex; gap:8px; align-items:center; }
.search-row input { flex:1 1 auto; min-width:0; width:auto; }
.search-row .btn { flex:0 0 120px; width:120px; }
@media (max-width: 900px) {
  .grid-3, .cols-4, .dual-list-wrapper { grid-template-columns:1fr; }
  .search-row { flex-direction:column; }
  .search-row .btn { width:100%; flex:1 1 auto; }
}