/* ui-edit-mode.css — the ★ R&D edit layer (pairs with /js/ui-edit-mode.js) */

.ui-edit-toggle {
  position: fixed; right: 12px; top: 12px; z-index: 2147483000;
  width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid rgba(88, 230, 255, .45); background: rgba(11, 16, 32, .82);
  color: #9fe8ff; font-size: 14px; line-height: 1; cursor: pointer;
  box-shadow: 0 0 12px rgba(88, 230, 255, .25);
  transition: transform .15s ease, background .15s ease;
}
.ui-edit-toggle:hover { transform: scale(1.1); background: rgba(20, 30, 50, .92); }
.ui-edit-toggle.ui-edit-active {
  color: #ffd24d; border-color: rgba(255, 210, 77, .6);
  box-shadow: 0 0 16px rgba(255, 210, 77, .4);
}

/* the per-element ★ badge — hidden until edit mode is ON */
.ui-edit-star {
  display: none;
  position: absolute; top: -9px; right: -9px; z-index: 5;
  width: 16px; height: 16px; border-radius: 999px;
  background: #0b1020; color: #ffd24d; border: 1px solid rgba(255, 210, 77, .7);
  font-size: 10px; line-height: 14px; text-align: center;
  cursor: pointer; box-shadow: 0 0 8px rgba(255, 210, 77, .5);
}
.ui-edit-on .ui-edit-star { display: block; }
.ui-edit-star:hover { background: #1c2438; }

/* the element being edited */
.ui-editing {
  outline: 2px dashed rgba(88, 230, 255, .85) !important;
  outline-offset: 2px;
  min-width: 1em;
  cursor: text !important;
  background: rgba(88, 230, 255, .06) !important;
}