* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1a1a1a;
  background: #fafafa;
}
a { color: #0a66c2; text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: #666; }
code { background: #eee; padding: 1px 4px; border-radius: 3px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.brand a { font-weight: 700; font-size: 18px; color: #1a1a1a; }
.client-nav { display: flex; gap: 16px; align-items: center; }
.client-nav strong { margin-right: 8px; }

main { max-width: 1200px; margin: 0 auto; padding: 24px; }
h1 { margin-top: 0; }

.client-list { list-style: none; padding: 0; }
.client-list li { padding: 8px 0; border-bottom: 1px solid #eee; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: end;
  padding: 16px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  margin-bottom: 16px;
}
.filter-bar label { display: flex; flex-direction: column; font-size: 12px; color: #555; }
.filter-bar select, .filter-bar input[type="text"] { min-width: 160px; padding: 6px; }
.filter-bar button { padding: 8px 16px; }
.filter-bar .clear { padding: 8px 0; font-size: 13px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.tile {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  overflow: hidden;
  display: block;
  color: inherit;
}
.tile img { display: block; width: 100%; height: 165px; object-fit: cover; }
.tile-meta { padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  display: inline-block;
  font-size: 11px;
  background: #eef2f7;
  color: #334;
  padding: 2px 6px;
  border-radius: 3px;
}

.upload-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  background: #fff;
  padding: 16px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
}
.upload-form label { display: flex; flex-direction: column; font-size: 13px; }
.upload-form label > span { color: #555; margin-bottom: 4px; }
.upload-form select, .upload-form input { padding: 6px; }
.upload-form button { grid-column: 1 / -1; padding: 10px; font-size: 15px; }

.cat {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.cat header { display: flex; align-items: center; justify-content: space-between; }
.cat h2 { font-size: 16px; margin: 8px 0; }
.cat ul.values { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cat ul.values li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef2f7;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 13px;
}
.cat ul.values button { border: none; background: transparent; cursor: pointer; color: #a00; font-weight: 700; }
.cat form { display: flex; gap: 6px; margin-top: 8px; }
.cat form input { flex: 1; padding: 6px; }
.cat.new form { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; align-items: end; }
.cat.new label { display: flex; flex-direction: column; font-size: 12px; color: #555; }
.cat.new label.checkbox { flex-direction: row; align-items: center; gap: 6px; }

button { cursor: pointer; }
button.danger { background: #fdd; border: 1px solid #f99; color: #800; padding: 4px 8px; }