.dashboard-action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .dashboard-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

@media (min-width: 1280px) {
    .dashboard-action-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.dashboard-action-tile {
    --tile-shadow: rgb(15 23 42 / 18%);
    --tile-glow: rgb(255 255 255 / 22%);

    position: relative;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    min-height: 13.5rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 1.25rem;
    padding: 2rem;
    text-decoration: none;
    background-size: 320% 320%;
    background-position: 0% 50%;
    box-shadow:
        0 18px 40px -16px var(--tile-shadow),
        inset 0 1px 0 rgb(255 255 255 / 28%);
    cursor: pointer;
    animation: dashboard-tile-flow 14s ease-in-out infinite;
    transition:
        transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 280ms ease,
        filter 280ms ease;
}

.dashboard-action-tile__flow,
.dashboard-action-tile__wave,
.dashboard-action-tile__glow {
    position: absolute;
    pointer-events: none;
}

.dashboard-action-tile__flow {
    inset: -40%;
    opacity: 0.55;
    background:
        radial-gradient(circle at 30% 30%, rgb(255 255 255 / 34%), transparent 42%),
        radial-gradient(circle at 70% 60%, rgb(255 255 255 / 18%), transparent 38%);
    animation: dashboard-tile-drift 10s ease-in-out infinite;
}

.dashboard-action-tile__wave {
    inset-inline: -25%;
    bottom: 0;
    height: 45%;
    border-radius: 48% 52% 0 0 / 22% 22% 0 0;
    background: linear-gradient(
        180deg,
        rgb(255 255 255 / 24%) 0%,
        rgb(255 255 255 / 14%) 52%,
        rgb(255 255 255 / 20%) 100%
    );
    filter: blur(0.5px);
    animation: dashboard-tile-wave 7s ease-in-out infinite;
}

.dashboard-action-tile__glow {
    inset-inline: -20%;
    bottom: 0;
    height: 45%;
    background: radial-gradient(ellipse 90% 80% at 50% 100%, var(--tile-glow), transparent 72%);
    opacity: 0.85;
    animation: dashboard-tile-pulse 5s ease-in-out infinite;
}

.dashboard-action-tile--interactive:hover {
    transform: translateY(-4px) scale(1.015);
    filter: saturate(1.08);
    box-shadow:
        0 28px 50px -18px var(--tile-shadow),
        0 0 0 1px rgb(255 255 255 / 22%) inset;
    animation-duration: 8s;
}

.dashboard-action-tile--interactive:hover .dashboard-action-tile__wave {
    animation-duration: 4.5s;
}

.dashboard-action-tile--interactive:active {
    transform: translateY(-1px) scale(1.005);
}

.dashboard-action-tile--interactive:focus-visible {
    outline: 2px solid rgb(255 255 255 / 85%);
    outline-offset: 3px;
}

.dashboard-action-tile--disabled {
    cursor: default;
    opacity: 0.82;
    animation: none;
}

.dashboard-action-tile--disabled .dashboard-action-tile__flow,
.dashboard-action-tile--disabled .dashboard-action-tile__wave,
.dashboard-action-tile--disabled .dashboard-action-tile__glow {
    animation: none;
}

.dashboard-action-tile__label {
    position: relative;
    z-index: 1;
    max-width: 14rem;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    text-shadow:
        0 1px 0 rgb(0 0 0 / 12%),
        0 8px 24px rgb(0 0 0 / 22%);
}

@media (min-width: 640px) {
    .dashboard-action-tile__label {
        font-size: 1.45rem;
    }
}

.dashboard-action-tile--emerald {
    --tile-shadow: rgb(5 150 105 / 42%);

    background-image: linear-gradient(
        125deg,
        #047857 0%,
        #10b981 22%,
        #2dd4bf 44%,
        #06b6d4 66%,
        #059669 88%,
        #065f46 100%
    );
}

.dashboard-action-tile--blue {
    --tile-shadow: rgb(37 99 235 / 42%);

    background-image: linear-gradient(
        125deg,
        #1d4ed8 0%,
        #3b82f6 22%,
        #60a5fa 44%,
        #38bdf8 66%,
        #2563eb 88%,
        #1e3a8a 100%
    );
}

.dashboard-action-tile--violet {
    --tile-shadow: rgb(124 58 237 / 42%);

    background-image: linear-gradient(
        125deg,
        #5b21b6 0%,
        #8b5cf6 22%,
        #a78bfa 44%,
        #6366f1 66%,
        #7c3aed 88%,
        #4c1d95 100%
    );
}

.dashboard-action-tile--red {
    --tile-shadow: rgb(220 38 38 / 42%);

    background-image: linear-gradient(
        125deg,
        #b91c1c 0%,
        #ef4444 22%,
        #fb7185 44%,
        #f97316 66%,
        #dc2626 88%,
        #991b1b 100%
    );
}

.dashboard-action-tile--pink {
    --tile-shadow: rgb(219 39 119 / 42%);

    background-image: linear-gradient(
        125deg,
        #be185d 0%,
        #ec4899 22%,
        #f472b6 44%,
        #c084fc 66%,
        #db2777 88%,
        #9d174d 100%
    );
}

.dashboard-action-tile--orange {
    --tile-shadow: rgb(234 88 12 / 42%);

    background-image: linear-gradient(
        125deg,
        #c2410c 0%,
        #f97316 22%,
        #fbbf24 44%,
        #fb923c 66%,
        #ea580c 88%,
        #9a3412 100%
    );
}

.dark .dashboard-action-tile {
    border-color: rgb(255 255 255 / 12%);
    box-shadow:
        0 22px 44px -20px rgb(0 0 0 / 55%),
        inset 0 1px 0 rgb(255 255 255 / 14%);
}

.dark .dashboard-action-tile--emerald {
    background-image: linear-gradient(
        125deg,
        #064e3b 0%,
        #059669 24%,
        #14b8a6 48%,
        #0891b2 72%,
        #047857 100%
    );
}

.dark .dashboard-action-tile--blue {
    background-image: linear-gradient(
        125deg,
        #1e3a8a 0%,
        #2563eb 24%,
        #3b82f6 48%,
        #0ea5e9 72%,
        #1d4ed8 100%
    );
}

.dark .dashboard-action-tile--violet {
    background-image: linear-gradient(
        125deg,
        #4c1d95 0%,
        #7c3aed 24%,
        #8b5cf6 48%,
        #6366f1 72%,
        #5b21b6 100%
    );
}

.dark .dashboard-action-tile--red {
    background-image: linear-gradient(
        125deg,
        #7f1d1d 0%,
        #dc2626 24%,
        #ef4444 48%,
        #ea580c 72%,
        #991b1b 100%
    );
}

.dark .dashboard-action-tile--pink {
    background-image: linear-gradient(
        125deg,
        #831843 0%,
        #db2777 24%,
        #ec4899 48%,
        #a855f7 72%,
        #9d174d 100%
    );
}

.dark .dashboard-action-tile--orange {
    background-image: linear-gradient(
        125deg,
        #7c2d12 0%,
        #ea580c 24%,
        #f97316 48%,
        #f59e0b 72%,
        #9a3412 100%
    );
}

@media (prefers-color-scheme: dark) {
    .dashboard-action-tile {
        border-color: rgb(255 255 255 / 12%);
        box-shadow:
            0 22px 44px -20px rgb(0 0 0 / 55%),
            inset 0 1px 0 rgb(255 255 255 / 14%);
    }

    .dashboard-action-tile--emerald {
        background-image: linear-gradient(
            125deg,
            #064e3b 0%,
            #059669 24%,
            #14b8a6 48%,
            #0891b2 72%,
            #047857 100%
        );
    }

    .dashboard-action-tile--blue {
        background-image: linear-gradient(
            125deg,
            #1e3a8a 0%,
            #2563eb 24%,
            #3b82f6 48%,
            #0ea5e9 72%,
            #1d4ed8 100%
        );
    }

    .dashboard-action-tile--violet {
        background-image: linear-gradient(
            125deg,
            #4c1d95 0%,
            #7c3aed 24%,
            #8b5cf6 48%,
            #6366f1 72%,
            #5b21b6 100%
        );
    }

    .dashboard-action-tile--red {
        background-image: linear-gradient(
            125deg,
            #7f1d1d 0%,
            #dc2626 24%,
            #ef4444 48%,
            #ea580c 72%,
            #991b1b 100%
        );
    }

    .dashboard-action-tile--pink {
        background-image: linear-gradient(
            125deg,
            #831843 0%,
            #db2777 24%,
            #ec4899 48%,
            #a855f7 72%,
            #9d174d 100%
        );
    }

    .dashboard-action-tile--orange {
        background-image: linear-gradient(
            125deg,
            #7c2d12 0%,
            #ea580c 24%,
            #f97316 48%,
            #f59e0b 72%,
            #9a3412 100%
        );
    }
}

@keyframes dashboard-tile-flow {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes dashboard-tile-drift {
    0%,
    100% {
        transform: translate3d(-4%, -2%, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(4%, 3%, 0) rotate(6deg);
    }
}

@keyframes dashboard-tile-wave {
    0%,
    100% {
        transform: translate3d(-6%, 0, 0) scaleX(1.02);
        border-radius: 48% 52% 0 0 / 22% 22% 0 0;
    }

    50% {
        transform: translate3d(6%, 0, 0) scaleX(1.05);
        border-radius: 52% 48% 0 0 / 26% 26% 0 0;
    }
}

@keyframes dashboard-tile-pulse {
    0%,
    100% {
        opacity: 0.65;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-action-tile,
    .dashboard-action-tile__flow,
    .dashboard-action-tile__wave,
    .dashboard-action-tile__glow {
        animation: none;
    }

    .dashboard-action-tile--interactive:hover {
        transform: none;
    }
}