/* =====================================================
   OVERLAY PREVIEW CSS (DASHBOARD SAFE)
   Scoped to .overlay-preview ONLY
   ===================================================== */

.overlay-preview {
  --text: #ededed;
}

/* Container only */
.overlay-preview #alert {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Fade wrapper */
.overlay-preview #fade {
  opacity: 0;
}

/* Pill */
.overlay-preview #pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 64px;
  background: radial-gradient(
    circle at 50% 0%,
    #26262f 0%,
    #18181b 55%,
    #101015 100%
  );
  border-radius: 999px;
  box-shadow:
    0 0 30px rgba(0,0,0,0.6),
    inset 0 0 16px rgba(0,0,0,0.9);
}

/* Animated border */
.overlay-preview #pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 7px;

  background: conic-gradient(
    from var(--angle),
    var(--c1) 0%,
    var(--c1) 32%,
    var(--c2) 38%,
    var(--c3) 45%,
    var(--c2) 52%,
    var(--c1) 58%,
    var(--c1) 100%
  );

  filter:
    drop-shadow(0 0 10px rgba(0,0,0,0.45));

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Animate border */
.overlay-preview .active #pill::before {
  animation: previewBorderSpin 6.5s linear infinite;
}

@keyframes previewBorderSpin {
  to { --angle: 360deg; }
}

/* Logo */
.overlay-preview #icon {
  width: 100px;
  height: 100px;
}

.overlay-preview #icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Text */
.overlay-preview #text {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  white-space: nowrap;
  text-shadow:
    0 0 6px rgba(0,0,0,.8),
    0 2px 0 #0a0a0c,
    0 4px 6px rgba(0,0,0,.85),
    0 -1px 0 rgba(255,255,255,.08);
}

/* CSS variable registration */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* =====================================================
   THEMES
   ===================================================== */

.overlay-preview.theme-green {
  --c1: #1b5e0d;
  --c2: #2f9c16;
  --c3: #8ef03e;
}

.overlay-preview.theme-blue {
  --c1: #0d355e;
  --c2: #167ac9;
  --c3: #3eaef0;
}

.overlay-preview.theme-orange {
  --c1: #7a3b00;
  --c2: #ff8c1a;
  --c3: #ffd27a;
}

.overlay-preview.theme-pink {
  --c1: #6e1748;
  --c2: #ff4fa3;
  --c3: #ffa6d4;
}

.overlay-preview.theme-purple {
  --c1: #3a1c6e;
  --c2: #8b5cf6;
  --c3: #c4b5fd;
}

.overlay-preview.theme-red {
  --c1: #6e1313;
  --c2: #ef4444;
  --c3: #fca5a5;
}

.overlay-preview.theme-yellow {
  --c1: #6b5400;
  --c2: #facc15;
  --c3: #fde68a;
}