/* Shader-matched lapis previews for Settings and the pill theme picker. */
.theme-preview.lapis-lazuli {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 74% 18%, rgba(0, 116, 255, 0.46), transparent 20%),
        radial-gradient(circle at 22% 84%, rgba(11, 63, 190, 0.62), transparent 28%),
        radial-gradient(circle at 46% 42%, rgba(34, 91, 202, 0.35), transparent 38%),
        linear-gradient(145deg, #010511 0%, #05124a 34%, #082a94 58%, #02091d 100%) !important;
    border-color: rgba(166, 199, 255, 0.62) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.11),
        inset 0 0 44px rgba(0, 6, 22, 0.68),
        0 14px 34px rgba(0, 9, 34, 0.40) !important;
}

.theme-preview.lapis-lazuli::before,
.theme-preview.lapis-lazuli::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.theme-preview.lapis-lazuli::before {
    z-index: 1;
    opacity: 0.78;
    background:
        radial-gradient(circle, rgba(255, 244, 170, 0.95) 0 1px, transparent 1.7px) 0 0 / 17px 13px,
        radial-gradient(circle, rgba(218, 164, 47, 0.86) 0 0.85px, transparent 1.45px) 9px 5px / 23px 19px,
        radial-gradient(circle, rgba(255, 248, 196, 0.75) 0 1.2px, transparent 2px) 4px 7px / 41px 31px;
    mix-blend-mode: screen;
    -webkit-mask-image:
        linear-gradient(118deg, transparent 0 14%, #000 25% 51%, transparent 64% 100%),
        linear-gradient(164deg, transparent 0 35%, #000 48% 78%, transparent 90%);
    mask-image:
        linear-gradient(118deg, transparent 0 14%, #000 25% 51%, transparent 64% 100%),
        linear-gradient(164deg, transparent 0 35%, #000 48% 78%, transparent 90%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
}

.theme-preview.lapis-lazuli::after {
    z-index: 2;
    opacity: 0.52;
    background:
        linear-gradient(112deg, transparent 0 20%, rgba(232, 236, 222, 0.34) 23%, rgba(255, 249, 219, 0.15) 29%, transparent 37%),
        linear-gradient(154deg, transparent 0 50%, rgba(218, 226, 218, 0.22) 55%, transparent 68%),
        radial-gradient(ellipse at 18% 20%, rgba(230, 232, 220, 0.26), transparent 24%),
        radial-gradient(ellipse at 84% 72%, rgba(230, 232, 220, 0.18), transparent 30%);
    filter: blur(0.45px);
}

.lapis-preview__pyrite,
.lapis-preview__vein,
.lapis-preview__glow {
    position: absolute;
    pointer-events: none;
}

.lapis-preview__pyrite {
    z-index: 3;
    inset: 0;
    opacity: 0.72;
    background:
        radial-gradient(circle at 16% 34%, rgba(255, 246, 184, 0.98) 0 1.8px, transparent 2.6px),
        radial-gradient(circle at 27% 42%, rgba(215, 158, 37, 0.88) 0 1.2px, transparent 2px),
        radial-gradient(circle at 36% 30%, rgba(255, 236, 143, 0.88) 0 1px, transparent 1.8px),
        radial-gradient(circle at 54% 64%, rgba(255, 245, 178, 0.95) 0 1.5px, transparent 2.4px),
        radial-gradient(circle at 67% 56%, rgba(218, 164, 47, 0.92) 0 1px, transparent 1.8px),
        radial-gradient(circle at 78% 70%, rgba(255, 246, 184, 0.92) 0 1.7px, transparent 2.5px);
    filter: drop-shadow(0 0 5px rgba(255, 221, 101, 0.62));
}

.lapis-preview__vein {
    z-index: 4;
    left: -16%;
    width: 132%;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(237, 238, 224, 0.06), rgba(255, 250, 221, 0.35), rgba(237, 238, 224, 0.08), transparent);
    filter: blur(5px);
}

.lapis-preview__vein--one {
    top: 14%;
    transform: rotate(-11deg);
}

.lapis-preview__vein--two {
    top: 52%;
    transform: rotate(18deg);
    opacity: 0.7;
}

.lapis-preview__vein--three {
    bottom: 8%;
    transform: rotate(-17deg);
    opacity: 0.58;
}

.lapis-preview__glow {
    z-index: 5;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 34%),
        radial-gradient(circle at 50% 46%, rgba(32, 137, 255, 0.30), transparent 34%);
    mix-blend-mode: screen;
    opacity: 0.62;
}

.theme-preview.lapis-lazuli .theme-preview__mini {
    z-index: 6;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035)),
        rgba(1, 8, 32, 0.58);
    border: 1px solid rgba(220, 233, 255, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 10px 24px rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(7px);
    clip-path: none !important;
}

.theme-preview.lapis-lazuli .theme-preview__pill {
    background: linear-gradient(90deg, #f3d066, #ffeaa6);
}

.theme-preview.lapis-lazuli .theme-preview__line {
    background: rgba(230, 238, 255, 0.50);
}