.arg-roster,
.arg-preview-grid{
  --arg-cols:5;
  --arg-gap:12px;
  --arg-ratio:4/5;
  display:grid;
  grid-template-columns:repeat(var(--arg-cols),minmax(0,1fr));
  gap:var(--arg-gap);
}

.arg-roster-item,
.arg-roster-item:link,
.arg-roster-item:visited,
.arg-roster-item:hover,
.arg-roster-item:active{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  border:1px solid rgba(255,255,255,.14);
  background:#0a0a0a;
  color:#fff;
  text-decoration:none;
  padding:8px;
  margin:0;
  cursor:pointer;
  box-sizing:border-box;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.arg-roster-item:hover,
.arg-roster-item:focus-visible{
  transform:translateY(-2px);
  border-color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;
  outline:none;
}

.arg-roster-frame,
.arg-thumb{
  position:relative;
  width:100%;
  aspect-ratio:var(--arg-ratio);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:rgba(255,255,255,.04);
}

.arg-roster-img,
.arg-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center;
}

.arg-roster-label{
  display:block;
  width:100%;
  min-height:1.2em;
  text-align:center;
  font-size:12px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.arg-editor-wrap{
  border:1px dashed #c9c9c9;
  padding:14px;
}

.arg-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.arg-mini-note{
  font-size:12px;
  color:#555;
}

.arg-card{
  background:#fff;
  border:1px solid #d9d9d9;
  padding:10px;
}

.arg-fields{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}

.arg-actions-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

@media (max-width: 782px){
  .arg-editor-wrap .arg-preview-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}