:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2933;
  background: #f4f6f8;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: #155eef; }
button, input, textarea, select { font: inherit; }

.site-header {
  min-height: 4rem;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-bottom: 1px solid #d9e0e7;
}

.site-header nav { display: flex; align-items: center; gap: 1rem; }
.site-header form { margin: 0; }
.brand { color: #172b4d; font-weight: 700; text-decoration: none; }
.link-button { padding: 0; border: 0; color: #155eef; background: transparent; cursor: pointer; }
.page-shell { max-width: 64rem; margin: 3rem auto; padding: 0 1.5rem; }
.panel { padding: 2rem; border: 1px solid #d9e0e7; border-radius: .75rem; background: #ffffff; }
.narrow { max-width: 28rem; margin: 0 auto; }
.eyebrow { margin: 0; color: #52606d; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin-top: .5rem; }
.field { margin: 1rem 0; }
.field label { display: block; margin-bottom: .35rem; font-weight: 600; }
.field input, .field textarea, .field select { width: 100%; padding: .65rem; border: 1px solid #9aa5b1; border-radius: .35rem; }
button[type="submit"] { padding: .65rem 1rem; border: 0; border-radius: .35rem; color: #ffffff; background: #155eef; cursor: pointer; }
.account-summary { display: grid; gap: .75rem; }
.account-summary div { display: grid; grid-template-columns: 8rem 1fr; }
.account-summary dt { color: #52606d; }
.account-summary dd { margin: 0; font-weight: 600; }
.placeholder { margin-top: 2rem; padding: 1rem; border: 1px dashed #9aa5b1; border-radius: .5rem; color: #52606d; }
.error { color: #b42318; }
.messages { padding: 0; list-style: none; }
.toolbar, .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.button { display: inline-block; padding: .65rem 1rem; border-radius: .35rem; color: #fff; background: #155eef; text-decoration: none; }
.artwork-grid, .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.artwork-card { overflow: hidden; border: 1px solid #d9e0e7; border-radius: .75rem; background: #fff; }
.artwork-card img, .thumbnail, .thumbnail-placeholder { width: 100%; aspect-ratio: 1; object-fit: cover; background: #e8edf2; }
.thumbnail { display: grid; place-items: center; overflow: hidden; }
.thumbnail-placeholder { display: grid; place-items: center; color: #52606d; }
.artwork-card-body, .card-body { padding: 1rem; }
.artwork-card h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.artwork-card p { margin: .3rem 0; }
.file-list { display: grid; gap: .75rem; padding: 0; list-style: none; }
.file-row { padding: 1rem; border: 1px solid #d9e0e7; border-radius: .5rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.actions form { margin: 0; }
.muted { color: #52606d; }
.detail-grid { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(20rem, 1fr); gap: 1rem; margin-bottom: 1rem; }
.preview-panel img { display: block; max-width: 100%; max-height: 32rem; margin: auto; }
.files-panel { margin-top: 1rem; }
.file-row { display: grid; grid-template-columns: 8rem 1fr auto; gap: 1rem; align-items: center; margin-top: .75rem; }
.mapping-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .85rem 0; border-top: 1px solid #d9e0e7; }
.inline-form { display: inline; margin-left: .5rem; }
.search-form { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(10rem, .45fr) auto; gap: 1rem; align-items: end; margin: 1rem 0; padding: 1rem; }
.search-form .field { margin: 0; }
.sku-hit { padding: .5rem; border-radius: .35rem; background: #eef4ff; }
.secondary { color: #155eef; background: #e8f0ff; }
.danger { background: #b42318 !important; }
.warning { border-color: #b45309; background: #fff7ed; }
.audit-row { display: grid; gap: .35rem; padding: .9rem 0; border-bottom: 1px solid #e5e7eb; }
.audit-row:last-child { border-bottom: 0; }
.audit-row pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 44rem) {
  .detail-grid { grid-template-columns: 1fr; }
  .file-row { grid-template-columns: 1fr; }
  .mapping-row, .search-form { grid-template-columns: 1fr; }
}