/* Layout */
#lpl-overlay .lpl-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; pointer-events:none; }
#lpl-overlay{ pointer-events:auto; }
#lpl-overlay .lpl-text{ color: var(--lpl-text-color, #333333); font: 500 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* SVG ring container */
#lpl-overlay .lpl-ring-svg{
  position: relative;
  width: var(--lpl-ring-size, 220px);
  height: var(--lpl-ring-size, 220px);
  display:flex; align-items:center; justify-content:center;
}
#lpl-overlay .lpl-svg{ position:absolute; inset:0; }
#lpl-overlay .lpl-arc{ animation: lpl-rotate var(--lpl-ring-speed, 1.2s) linear infinite; transform-origin: 50% 50%; }
#lpl-overlay .lpl-full{ animation: lpl-rotate calc(var(--lpl-ring-speed, 1.2s) * 1.33) linear infinite; transform-origin: 50% 50%; }
#lpl-overlay .lpl-track{ opacity: 1; }

/* Show/hide based on selected style */
#lpl-overlay .lpl-wrap[data-style="single_arc"] .lpl-arc.single{ display:inline; }
#lpl-overlay .lpl-wrap[data-style="single_arc"] .lpl-arc.dual, 
#lpl-overlay .lpl-wrap[data-style="single_arc"] .lpl-full{ display:none; }

#lpl-overlay .lpl-wrap[data-style="dual_arc"] .lpl-arc.dual{ display:inline; }
#lpl-overlay .lpl-wrap[data-style="dual_arc"] .lpl-arc.single, 
#lpl-overlay .lpl-wrap[data-style="dual_arc"] .lpl-full{ display:none; }

#lpl-overlay .lpl-wrap[data-style="full_ring"] .lpl-full{ display:inline; }
#lpl-overlay .lpl-wrap[data-style="full_ring"] .lpl-arc.single, 
#lpl-overlay .lpl-wrap[data-style="full_ring"] .lpl-arc.dual{ display:none; }

/* Logo fits within ring */
#lpl-overlay .lpl-logo{
  position: relative;
  display:block;
  max-width: calc(var(--lpl-ring-size) - (var(--lpl-ring-thickness) + var(--lpl-ring-gap))*2);
  max-height: calc(var(--lpl-ring-size) - (var(--lpl-ring-thickness) + var(--lpl-ring-gap))*2);
  object-fit: cover;
}

/* Fallback spinner if no logo */
#lpl-overlay .lpl-spinner{
  width: 64px; height: 64px;
  border: 6px solid rgba(0,0,0,0.08);
  border-top-color: #555;
  border-radius: 50%;
  animation: lpl-spin 0.9s linear infinite;
}

@keyframes lpl-rotate { to { transform: rotate(360deg); } }
@keyframes lpl-spin{ to { transform: rotate(360deg); } }