.template-order-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-left: auto;
  padding: 7px 11px;
  border: 1px solid #d8dffa;
  border-radius: 999px;
  background: #f7f8ff;
  color: #5d6b8a;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
  transition: .18s ease;
}

.template-order-status[data-state="moving"] {
  border-color: #94aaff;
  background: #edf1ff;
  color: #3158d8;
}

.template-order-status[data-state="saving"] {
  border-color: #e6ca82;
  background: #fff8e7;
  color: #916213;
}

.template-order-status[data-state="saved"] {
  border-color: #9adbbf;
  background: #eaf9f2;
  color: #147653;
}

.master-template-card.template-sortable {
  cursor: grab;
  user-select: none;
  transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.master-template-card.template-sortable:hover {
  border-color: #9bb0f4;
  box-shadow: 0 14px 36px rgba(34, 65, 151, .14);
}

.master-template-card.template-sortable:active {
  cursor: grabbing;
}

.template-sortable button,
.template-sortable a {
  cursor: pointer;
}

.template-drag-grip {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(10,20,50,.78);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .03em;
  opacity: .78;
  pointer-events: none;
  backdrop-filter: blur(8px);
  transition: opacity .18s ease, transform .18s ease;
}

.template-sortable:hover .template-drag-grip {
  opacity: 1;
  transform: translateY(-1px);
}

.template-grid.template-drag-active {
  cursor: grabbing;
}

.template-grid.template-drag-active .master-template-card:not(.template-dragging) {
  border-color: #c7d2fa;
}

.master-template-card.template-dragging {
  opacity: .34;
  border: 2px dashed #3158ff;
  box-shadow: none;
}

.template-grid.template-order-saving {
  pointer-events: none;
}

body.dark .template-order-status {
  border-color: #34456d;
  background: #17233d;
  color: #b8c5df;
}

body.dark .template-order-status[data-state="saved"] {
  border-color: #286c55;
  background: #15382e;
  color: #9ee0c6;
}

@media (max-width: 720px) {
  .template-access-banner { align-items: flex-start; flex-wrap: wrap; }
  .template-order-status { width: 100%; margin-left: 51px; justify-content: center; }
}