.light-controls{
    isolation:isolate;
}

.light-control{
    --light-card-level:0;
    position:relative;
    isolation:isolate;
    overflow:visible;
    box-shadow:var(--shadow-card);
}

/*
 * Treat every outdoor-light card as a floating panel with the actual lamp
 * mounted behind it. The luminous layers are deliberately smaller than the
 * card itself; blur then lets the light escape around the complete perimeter
 * while the opaque card masks the centre. This reads as emitted light rather
 * than a UI glow painted on top of the control.
 */
.light-control::before,
.light-control::after{
    content:"";
    position:absolute;
    z-index:-1;
    pointer-events:none;
    opacity:var(--light-card-level);
    transition:opacity .18s ease,transform .22s ease;
}

.light-control::before{
    inset:12px 22px;
    border-radius:var(--radius-md);
    background:rgba(255,224,103,.96);
    filter:blur(27px);
    box-shadow:
        0 0 26px 11px rgba(255,235,157,.82),
        0 0 54px 24px rgba(255,211,72,.46),
        0 6px 78px 32px rgba(255,197,45,.24);
    transform:scale(.94);
}

.light-control::after{
    inset:7px 13px;
    border-radius:var(--radius-md);
    background:linear-gradient(90deg,rgba(255,247,201,.90),rgba(255,224,112,.98) 52%,rgba(255,205,63,.88));
    filter:blur(13px);
    box-shadow:0 0 24px 8px rgba(255,232,145,.68);
    transform:scale(.97);
}

.light-control[data-light-state="on"]::before,
.light-control[data-light-state="on"]::after{
    transform:scale(1);
}

@media (prefers-reduced-motion:reduce){
    .light-control::before,
    .light-control::after{
        transition:none;
    }
}


/* Planned lamps are visible but intentionally cannot issue HA service calls. */
.light-control--pending{--light-card-level:0;background:var(--card);box-shadow:var(--shadow-soft)}
.light-control--pending .light-control__copy{min-width:0}
.light-control__pending-status{display:block;margin-top:var(--space-1);color:var(--muted);font-size:var(--font-xs);line-height:var(--line-normal)}
.light-control__manual-note{display:block;margin-top:var(--space-2);color:var(--green);font-size:var(--font-xs);line-height:var(--line-normal)}
.light-control__pending-icon{color:var(--muted);font-size:var(--font-md);opacity:.65;flex-shrink:0}