.embed-theme-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.embed-theme-grid > * {
    min-width: 0;
}

.embed-theme-grid .theme {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

#dash-embed .input-group,
#dash-embed .select2-container,
#dash-embed input,
#dash-embed select {
    min-width: 0;
    max-width: 100%;
}

.embed-theme-choice {
    position: relative;
    display: block;
    width: 100%;
    padding: .35rem;
    border: 1px solid #dee2e6;
    border-radius: .35rem;
    background: #fff;
    color: #25313d;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.embed-theme-choice:hover {
    border-color: #87a7bb;
    transform: translateY(-1px);
}

.embed-theme-choice:focus-visible {
    outline: 3px solid rgba(0, 123, 255, .3);
    outline-offset: 2px;
}

.embed-theme-choice.selected {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, .18);
}

.embed-theme-choice img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: .2rem;
    object-fit: cover;
}

.embed-theme-name {
    display: block;
    padding: .5rem .2rem .15rem;
    font-size: .82rem;
    font-weight: 700;
}

.embed-theme-badge {
    position: absolute;
    top: .65rem;
    right: .65rem;
    padding: .2rem .45rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 1rem;
    background: rgba(3, 13, 25, .78);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.embed-globe-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid rgba(80, 118, 145, .35);
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 45%, rgba(69, 164, 192, .3), transparent 34%),
        linear-gradient(145deg, #07101d, #10283d 55%, #07111e);
    box-shadow: inset 0 0 45px rgba(90, 191, 218, .1), 0 12px 30px rgba(16, 39, 59, .12);
}

.embed-globe-stage[data-theme="globe-porcelain"] {
    background:
        radial-gradient(circle at 50% 45%, rgba(110, 185, 177, .26), transparent 35%),
        linear-gradient(145deg, #f5f0e5, #d9e7e2);
}

.embed-globe-stage[data-theme="globe-earth"] {
    background:
        radial-gradient(circle at 50% 45%, rgba(67, 148, 205, .36), transparent 34%),
        linear-gradient(145deg, #030914, #102b46);
}

.embed-globe-stage[data-theme="globe-blueprint"] {
    background:
        radial-gradient(circle at 50% 45%, rgba(25, 191, 226, .29), transparent 35%),
        repeating-linear-gradient(0deg, transparent 0 23px, rgba(69, 211, 241, .045) 24px),
        repeating-linear-gradient(90deg, transparent 0 23px, rgba(69, 211, 241, .045) 24px),
        #06182a;
}

.embed-globe-stage .mapboxgl-map,
.embed-globe-stage .leaflet-container {
    width: 100%;
    height: 100%;
    min-height: inherit;
    background: transparent;
}

.embed-globe-status {
    position: absolute;
    z-index: 1001;
    right: .65rem;
    bottom: 1.75rem;
    max-width: calc(100% - 1.3rem);
    padding: .35rem .55rem;
    border-radius: .3rem;
    background: rgba(6, 18, 29, .82);
    color: #fff;
    font-size: .72rem;
    line-height: 1.25;
}

.embed-globe-fallback-cluster {
    border: 0;
    background: transparent;
}

.embed-globe-fallback-cluster span {
    display: block;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .22);
}

@media (max-width: 767.98px) {
    .embed-theme-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
    }
}

@media (max-width: 359.98px) {
    .embed-theme-grid {
        gap: .45rem;
    }

    .embed-theme-name {
        font-size: .75rem;
    }

    .embed-theme-badge {
        top: .5rem;
        right: .5rem;
        font-size: .56rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .embed-theme-choice {
        transition: none;
    }
}