:root {
    --glass-purple-top: #9a5597;
    --glass-purple-mid: #793477;
    --glass-purple-bottom: #552052;
    --glass-purple-edge: #4b1749;
    --glass-gold: #fff1c4;
}

:where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.button,
    .button,
    .primary,
    .secondary,
    .period-button
):not(.danger):not(.small-danger):not(.photo-delete):not(.out):not(.cancel) {
    appearance: none;
    -webkit-appearance: none;
    color: #fff !important;
    border: 1px solid var(--glass-purple-edge) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.10) 42%, rgba(255,255,255,0) 43%),
        linear-gradient(135deg, var(--glass-purple-top) 0%, var(--glass-purple-mid) 48%, var(--glass-purple-bottom) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        inset 0 -2px 2px rgba(45,10,43,.34),
        0 5px 12px rgba(78,27,75,.25) !important;
    text-shadow: 0 1px 1px rgba(38,9,36,.72);
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

:where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.button,
    .button,
    .primary,
    .secondary,
    .period-button
):not(.danger):not(.small-danger):not(.photo-delete):not(.out):not(.cancel):hover {
    filter: brightness(1.10) saturate(1.04);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -2px 2px rgba(45,10,43,.30),
        0 8px 17px rgba(78,27,75,.32) !important;
}

:where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.button,
    .button,
    .primary,
    .secondary,
    .period-button
):not(.danger):not(.small-danger):not(.photo-delete):not(.out):not(.cancel):active {
    filter: brightness(.94);
    transform: translateY(1px);
    box-shadow:
        inset 0 3px 5px rgba(42,8,40,.38),
        inset 0 1px 0 rgba(255,255,255,.20),
        0 2px 5px rgba(78,27,75,.22) !important;
}

:where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.button,
    .button,
    .primary,
    .secondary,
    .period-button
):focus-visible {
    outline: 3px solid rgba(242,201,76,.48) !important;
    outline-offset: 3px;
}

:where(button, input[type="button"], input[type="submit"], input[type="reset"]):disabled {
    cursor: not-allowed;
    filter: grayscale(.28) opacity(.58);
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.top-nav a {
    color: #fff !important;
    border: 1px solid var(--glass-purple-edge) !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.08) 43%, transparent 44%),
        linear-gradient(135deg, #8c4989 0%, #6f2d6c 55%, #501e4d 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.62),
        inset 0 -2px 2px rgba(45,10,43,.30),
        0 4px 10px rgba(78,27,75,.20) !important;
    text-shadow: 0 1px 1px rgba(38,9,36,.70);
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.top-nav a:hover {
    filter: brightness(1.11);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.75),
        inset 0 -2px 2px rgba(45,10,43,.26),
        0 7px 14px rgba(78,27,75,.29) !important;
}

.top-nav a.active,
.period-button.active {
    color: var(--glass-gold) !important;
    border-color: #71306d !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.13) 43%, transparent 44%),
        linear-gradient(135deg, #a65aa1 0%, #7b3478 48%, #572052 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.82),
        inset 0 -2px 3px rgba(45,10,43,.34),
        0 0 0 2px rgba(242,201,76,.24),
        0 6px 14px rgba(78,27,75,.30) !important;
}

@media (prefers-reduced-motion: reduce) {
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.button,
    .button,
    .top-nav a,
    .period-button {
        transition: none !important;
    }
}