* { box-sizing: border-box; }
body {
  margin: 0; padding: 1.25rem;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a; background: #f1f1f1;
}
.boot { padding: 3rem; text-align: center; color: #6b7177; }
h2 { margin: 0; font-size: 1.05rem; }
.muted { color: #6b7177; font-size: .9em; margin: .35rem 0 .75rem; }
.muted em, .field em { font-style: normal; color: #6b7177; font-weight: 400; }

.card {
  background: #fff; border: 1px solid #e1e3e5; border-radius: 12px;
  padding: 1rem 1.1rem; margin-bottom: 1rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }

.pill { font-size: .78em; padding: .18rem .55rem; border-radius: 999px; background: #e4e5e7; color: #42474c; white-space: nowrap; }
.pill--ok { background: #cdfee1; color: #0c5132; }
.pill--bad { background: #ffd6d9; color: #8e1420; }

.btn {
  border: 1px solid #c9cccf; background: #fff; color: #1a1a1a;
  padding: .5rem .85rem; border-radius: 8px; cursor: pointer; font-size: .9em; font-weight: 550;
}
.btn:hover { background: #f6f6f7; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.btn--primary:hover { background: #333; }
.btn--plain { border-color: transparent; background: transparent; text-decoration: underline; }
.btn--danger { color: #8e1420; border-color: #e3b3b8; }

.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row--end { justify-content: flex-end; margin-top: 1rem; }

.field { display: block; margin-bottom: 1rem; border: 0; padding: 0; }
.field > span { display: block; font-weight: 600; margin-bottom: .3rem; }
.field--narrow input { max-width: 220px; }
input[type=text], input[type=url], input[type=number], textarea, select {
  width: 100%; padding: .55rem .65rem; border: 1px solid #c9cccf;
  border-radius: 8px; font: inherit; background: #fff;
}
textarea { resize: vertical; }
.radio { display: flex; gap: .45rem; align-items: baseline; font-weight: 400; margin: .2rem 0; }
.radio input { width: auto; }

.slot {
  display: flex; gap: .75rem; align-items: center;
  border: 1px solid #e1e3e5; border-radius: 10px; padding: .6rem .7rem; margin-bottom: .5rem;
  background: #fafbfb;
}
.slot img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: #eee; }
.slot__body { flex: 1 1 auto; min-width: 0; }
.slot__title { font-weight: 600; }
.slot__meta { font-size: .82em; color: #6b7177; }
.slot__label { margin-top: .3rem; }
.slot__label input { font-size: .88em; padding: .35rem .5rem; }
.slot__qty { width: 68px; }
.slot__qty input { text-align: center; }

.bundle-row {
  display: flex; gap: .75rem; align-items: center; justify-content: space-between;
  border: 1px solid #e1e3e5; border-radius: 10px; padding: .6rem .75rem; margin-bottom: .5rem;
}
.bundle-row__main { min-width: 0; }
.bundle-row__name { font-weight: 600; }

.preview { background: #f6f6f7; border-radius: 10px; padding: .7rem .8rem; font-size: .9em; }
.preview s { color: #6b7177; }
.preview b { font-size: 1.1em; }
.preview .save { color: #0c5132; font-weight: 600; }

.log {
  background: #1a1a1a; color: #e3e3e3; padding: .7rem .8rem; border-radius: 8px;
  font-size: .78em; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto;
  margin-top: .75rem;
}