/* Load once in App.razor, also for anonymous pages. The outer glass foot
   and shadow remain outside the clipped fluid. No global page selectors. */
.liquid-button {
    --liquid-color: #4da3ff;
    --liquid-ink: #17212b;
    --liquid-surface: rgb(255 255 255 / .14);
    --liquid-rim: rgb(255 255 255 / .8);
    --liquid-recess: rgb(15 23 32 / .3);
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 8.15rem;
    min-height: 3.5rem;
    max-width: 100%;
    padding: .95rem 2.1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--liquid-ink);
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    transition: transform .55s cubic-bezier(.16, 1.35, .35, 1);
}

/* Second contour: the foot of the thick glass, below its front surface. */
.liquid-button::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 4px 0 -5px;
    border-radius: inherit;
    border: 1px solid rgb(150 160 170 / .35);
    background: linear-gradient(180deg, transparent 45%, var(--liquid-recess));
    box-shadow: 0 2px 1px rgb(255 255 255 / .24),
                0 9px 12px -6px rgb(0 0 0 / .6),
                inset 0 -1px 1px rgb(255 255 255 / .32);
    pointer-events: none;
}

/* A real 3D side wall. It lies perpendicular to the face and becomes visible
   only while the capsule is crossing 90 degrees, so the flip keeps its glass
   thickness instead of collapsing into a one-pixel line. */
.liquid-button::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 4px;
    right: 4px;
    height: 12px;
    margin-top: -6px;
    border: 1px solid rgb(255 255 255 / .5);
    border-radius: 999px;
    background: linear-gradient(180deg,
        rgb(255 255 255 / .92) 0%,
        rgb(255 255 255 / .42) 18%,
        rgb(111 119 128 / .52) 48%,
        rgb(10 13 17 / .9) 78%,
        rgb(255 255 255 / .28) 100%);
    opacity: 0;
    transform: rotateX(90deg);
    transform-origin: 50% 50%;
    box-shadow: inset 0 1px 1px rgb(255 255 255 / .78),
                inset 0 -2px 2px rgb(0 0 0 / .72),
                0 2px 5px rgb(0 0 0 / .68);
    pointer-events: none;
}
.liquid-button__shadow,
.liquid-button__glass,
.liquid-button__fluid,
.liquid-button__edge-glow,
.liquid-button__reflection,
.liquid-button__highlight {
    position: absolute;
    pointer-events: none;
    border-radius: inherit;
}
.liquid-button__shadow {
    z-index: -3;
    inset: 60% 9% -11px;
    background: var(--liquid-color);
    filter: blur(13px);
    opacity: 0;
    transform: scaleX(.75);
    transition: opacity .45s, transform .55s;
}
.liquid-button__glass {
    z-index: -1;
    inset: 0;
    background: linear-gradient(155deg, rgb(255 255 255 / .16), transparent 32% 70%, rgb(255 255 255 / .045)), var(--liquid-surface);
    border: 1px solid rgb(200 211 223 / .34);
    box-shadow: inset 1px 1px 1px var(--liquid-rim),
                inset -1px -2px 1px rgb(255 255 255 / .48),
                inset 3px 0 5px rgb(255 255 255 / .12),
                inset 0 -6px 5px -4px var(--liquid-recess);
    -webkit-backdrop-filter: blur(9px) saturate(120%);
    backdrop-filter: blur(9px) saturate(120%);
}
.liquid-button__fluid {
    z-index: 0;
    inset: 3px 4px 4px;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 130%, var(--liquid-color), transparent 72%);
    opacity: .025;
    transform: scaleY(.94);
    transform-origin: 50% 80%;
    transition: opacity .5s ease, transform .65s cubic-bezier(.16, 1.35, .35, 1);
}
.liquid-button__blob {
    position: absolute;
    inset: -30% -5% -50% -20%;
    border-radius: 45% 55% 36% 64%;
    background: radial-gradient(ellipse at 30% 35%, color-mix(in srgb, var(--liquid-color) 60%, white), transparent 50%),
                linear-gradient(145deg, var(--liquid-color) 25%, color-mix(in srgb, var(--liquid-color) 65%, black));
    filter: blur(4px);
    transform: translate(-7%, 24%) rotate(-8deg);
    animation: liquid-button-flow 7s ease-in-out infinite paused;
}
.liquid-button__blob--secondary {
    inset: 20% -20% -65% 20%;
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--liquid-color) 38%, white), var(--liquid-color) 55%, transparent 75%);
    opacity: .7;
    animation-direction: reverse;
    animation-duration: 9s;
}

/* Sharp white specular edges above the fluid; soft bloom below the shell. */
.liquid-button__edge-glow {
    z-index: 1;
    inset: 3px 3px 2px;
    border-bottom: 2px solid rgb(255 255 255 / .72);
    border-right: 1px solid rgb(255 255 255 / .46);
    border-left: 1px solid rgb(255 255 255 / .32);
    box-shadow: 0 2px 3px -1px rgb(255 255 255 / .18);
    transition: border-color .4s, box-shadow .4s;
}
.liquid-button__reflection {
    z-index: 1;
    top: 4px;
    left: 15%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .8) 22%, rgb(255 255 255 / .25), transparent);
    box-shadow: 0 1px 3px rgb(255 255 255 / .2);
}
.liquid-button__highlight {
    z-index: 1;
    inset: 3px;
    background: linear-gradient(115deg, transparent 10%, rgb(255 255 255 / .19) 15%, transparent 20% 75%, rgb(255 255 255 / .09) 85%, transparent 91%);
    opacity: .65;
    transition: opacity .4s;
}
.liquid-button__content {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-width: 0;
    text-align: center;
    overflow-wrap: anywhere;
}
.liquid-button__icon { display: inline-flex; flex: 0 0 auto; }
.liquid-button__spinner {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: liquid-button-spin .8s linear infinite;
}
.liquid-button.is-active:not(:disabled) .liquid-button__fluid {
    opacity: var(--liquid-active-opacity, .9);
    transform: scale(1);
}
.liquid-button.is-active:not(:disabled) .liquid-button__shadow {
    opacity: var(--liquid-glow-opacity, .45);
    transform: scaleX(1);
}
.liquid-button.is-active:not(:disabled) .liquid-button__edge-glow {
    border-bottom-color: color-mix(in srgb, var(--liquid-color) 35%, white);
    box-shadow: 0 3px 5px -2px var(--liquid-color), inset 0 -3px 5px -3px white;
}
.liquid-button.is-active .liquid-button__blob { animation-play-state: running; }

@media (hover: hover) and (pointer: fine) {
    .liquid-button:hover:not(:disabled) { transform: translateY(-2px); }
    .liquid-button:hover:not(:disabled) .liquid-button__fluid { opacity: .1; transform: scale(1); }
    .liquid-button:hover:not(:disabled) .liquid-button__shadow { opacity: .1; transform: scaleX(.88); }
    .liquid-button:hover:not(:disabled) .liquid-button__blob { animation-play-state: running; }
    .liquid-button:hover:not(:disabled) .liquid-button__highlight { opacity: 1; }
    .liquid-button:hover:not(:disabled) .liquid-button__edge-glow {
        border-bottom-color: rgb(255 255 255 / .9);
        box-shadow: 0 3px 5px -2px rgb(255 255 255 / .35), inset 0 -3px 5px -3px white;
    }
}
.liquid-button:active:not(:disabled) {
    transform: translateY(2px) scale(.975);
    transition-duration: .09s;
}
.liquid-button:active:not(:disabled) .liquid-button__fluid {
    transform: scaleX(1.025) scaleY(.86);
    transition-duration: .09s;
}
.liquid-button.is-flipping:not(:disabled) {
    pointer-events: none;
    animation: liquid-button-flip var(--liquid-flip-duration, 720ms)
        cubic-bezier(.42, 0, .18, 1) both;
}
.liquid-button.is-flip-resetting {
    transition: none !important;
}
.liquid-button.is-flipping:not(:disabled)::after {
    animation: liquid-button-side-flip var(--liquid-flip-duration, 720ms)
        cubic-bezier(.42, 0, .18, 1) both;
}
.liquid-button.is-flipping:not(:disabled) .liquid-button__content {
    animation: liquid-button-content-flip var(--liquid-flip-duration, 720ms)
        linear both;
}
.liquid-button.is-flipping:not(:disabled) .liquid-button__fluid {
    animation: liquid-button-color-flip var(--liquid-flip-duration, 720ms)
        cubic-bezier(.22, .75, .28, 1) both;
}
.liquid-button.is-flipping:not(:disabled) .liquid-button__shadow {
    animation: liquid-button-glow-flip var(--liquid-flip-duration, 720ms)
        ease-out both;
}
.liquid-button.is-flipping:not(:disabled) .liquid-button__edge-glow {
    animation: liquid-button-edge-flip var(--liquid-flip-duration, 720ms)
        ease-out both;
}
.liquid-button.is-flipping:not(:disabled) .liquid-button__blob {
    animation: liquid-button-flow 1.15s ease-in-out infinite;
}
.liquid-button.is-flipping.is-flipping-off:not(:disabled)::after,
.liquid-button.is-flipping.is-flipping-off:not(:disabled) .liquid-button__fluid,
.liquid-button.is-flipping.is-flipping-off:not(:disabled) .liquid-button__shadow,
.liquid-button.is-flipping.is-flipping-off:not(:disabled) .liquid-button__edge-glow {
    animation-direction: reverse;
}
.liquid-button:focus-visible { outline: 2px solid var(--liquid-color); outline-offset: 6px; }
.liquid-button:disabled { opacity: .45; cursor: not-allowed; }
.liquid-button:disabled .liquid-button__blob { animation-play-state: paused; }

@keyframes liquid-button-flow {
    0%, 100% { transform: translate(-7%, 24%) rotate(-8deg); }
    50% { transform: translate(8%, -4%) rotate(7deg); }
}
@keyframes liquid-button-spin { to { transform: rotate(360deg); } }
@keyframes liquid-button-flip {
    0% { transform: perspective(520px) translateY(0) rotateX(0deg) scale(1); }
    13% { transform: perspective(520px) translateY(2px) rotateX(8deg) scale(.975); }
    43% { transform: perspective(520px) translateY(0) rotateX(78deg) scaleX(.965); }
    50% { transform: perspective(520px) translateY(0) rotateX(89deg) scaleX(.96); }
    56% { transform: perspective(520px) translateY(0) rotateX(91deg) scaleX(.96); }
    66% { transform: perspective(520px) translateY(-1px) rotateX(116deg) scaleX(.975); }
    84% { transform: perspective(520px) translateY(-1px) rotateX(173deg) scale(1.015); }
    100% { transform: perspective(520px) translateY(0) rotateX(180deg) scale(1); }
}
@keyframes liquid-button-side-flip {
    0%, 35% {
        opacity: 0;
        box-shadow: inset 0 1px 1px rgb(255 255 255 / .78),
                    inset 0 -2px 2px rgb(0 0 0 / .72),
                    inset 0 0 0 20px transparent,
                    0 2px 5px rgb(0 0 0 / .68);
    }
    44% {
        opacity: .92;
        box-shadow: inset 0 1px 1px rgb(255 255 255 / .92),
                    inset 0 -2px 2px rgb(0 0 0 / .78),
                    inset 0 0 0 20px transparent,
                    0 3px 7px rgb(0 0 0 / .82);
    }
    51% {
        opacity: 1;
        box-shadow: inset 0 1px 1px white,
                    inset 0 -2px 2px rgb(0 0 0 / .66),
                    inset 0 0 0 20px color-mix(in srgb, var(--liquid-color) 24%, transparent),
                    0 0 8px rgb(255 255 255 / .7),
                    0 4px 9px rgb(0 0 0 / .76);
    }
    59% {
        opacity: .96;
        box-shadow: inset 0 1px 1px white,
                    inset 0 -2px 2px color-mix(in srgb, var(--liquid-color) 50%, black),
                    inset 0 0 0 20px color-mix(in srgb, var(--liquid-color) 72%, transparent),
                    0 0 13px color-mix(in srgb, var(--liquid-color) 72%, transparent),
                    0 4px 9px rgb(0 0 0 / .68);
    }
    72%, 100% {
        opacity: 0;
        box-shadow: inset 0 1px 1px white,
                    inset 0 -2px 2px var(--liquid-color),
                    inset 0 0 0 20px color-mix(in srgb, var(--liquid-color) 82%, transparent),
                    0 0 15px color-mix(in srgb, var(--liquid-color) 70%, transparent);
    }
}
/* The caption swaps to the reverse face while the capsule is edge-on, so it
   finishes upright instead of mirrored after the 180-degree turn. */
@keyframes liquid-button-content-flip {
    0%, 43% { opacity: 1; transform: rotateX(0deg); }
    47% { opacity: 0; transform: rotateX(0deg); }
    53% { opacity: 0; transform: rotateX(180deg); }
    60%, 100% { opacity: 1; transform: rotateX(180deg); }
}
/* The new color appears only after the control passes its thin edge. */
@keyframes liquid-button-color-flip {
    0%, 40% { opacity: .025; transform: scaleY(.94); }
    49% { opacity: .12; transform: scaleX(1.04) scaleY(.12); }
    62% { opacity: var(--liquid-active-opacity, .9); transform: scaleX(1.03) scaleY(.72); }
    82%, 100% { opacity: var(--liquid-active-opacity, .9); transform: scale(1); }
}
@keyframes liquid-button-glow-flip {
    0%, 43% { opacity: 0; transform: scaleX(.72); }
    55% { opacity: .2; transform: scaleX(.85); }
    100% { opacity: var(--liquid-glow-opacity, .45); transform: scaleX(1); }
}
@keyframes liquid-button-edge-flip {
    0%, 44% { border-bottom-color: rgb(255 255 255 / .72); box-shadow: 0 2px 3px -1px rgb(255 255 255 / .18); }
    58% { border-bottom-color: white; box-shadow: 0 2px 8px white; }
    100% { border-bottom-color: color-mix(in srgb, var(--liquid-color) 35%, white); box-shadow: 0 3px 5px -2px var(--liquid-color), inset 0 -3px 5px -3px white; }
}

@media (prefers-color-scheme: dark) {
    .liquid-button {
        --liquid-ink: #f5f7fa;
        --liquid-surface: rgb(255 255 255 / .025);
        --liquid-rim: rgb(255 255 255 / .55);
        --liquid-recess: rgb(0 0 0 / .8);
    }
}
:is(.theme-dark, [data-bs-theme="dark"]) .liquid-button,
.liquid-button.theme-dark {
    --liquid-ink: #f5f7fa;
    --liquid-surface: rgb(255 255 255 / .025);
    --liquid-rim: rgb(255 255 255 / .55);
    --liquid-recess: rgb(0 0 0 / .8);
}
:is(.theme-light, [data-bs-theme="light"]) .liquid-button,
.liquid-button.theme-light {
    --liquid-ink: #17212b;
    --liquid-surface: rgb(255 255 255 / .14);
    --liquid-rim: rgb(255 255 255 / .8);
    --liquid-recess: rgb(15 23 32 / .3);
}
@media (prefers-reduced-motion: reduce) {
    .liquid-button, .liquid-button *, .liquid-button::before, .liquid-button::after { animation: none !important; transition: none !important; }
    .liquid-button:hover:not(:disabled), .liquid-button:active:not(:disabled),
    .liquid-button:active:not(:disabled) .liquid-button__fluid { transform: none; }
}
@media (forced-colors: active) {
    .liquid-button { border: 1px solid ButtonText; color: ButtonText; background: ButtonFace; }
    .liquid-button::before, .liquid-button::after, .liquid-button__glass, .liquid-button__shadow,
    .liquid-button__fluid, .liquid-button__edge-glow, .liquid-button__reflection,
    .liquid-button__highlight { display: none; }
    .liquid-button:focus-visible { outline-color: Highlight; }
}