:root { --zk-ease: cubic-bezier(.2, .8, .2, 1); }

.zinkly-btn-primary,
.zinkly-btn-secondary {
    transition: transform .16s var(--zk-ease), box-shadow .22s var(--zk-ease), filter .2s, background-color .2s, border-color .2s, color .2s;
}
@media (hover: hover) {
    .zinkly-btn-primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 24px -12px rgba(124, 92, 255, .6); }
    .zinkly-btn-secondary:hover:not(:disabled) { transform: translateY(-1px); }
}
.zinkly-btn-primary:active:not(:disabled),
.zinkly-btn-secondary:active:not(:disabled) { transform: scale(.97); transition-duration: .06s; }
.zinkly-btn-primary:disabled,
.zinkly-btn-secondary:disabled { opacity: .55; cursor: not-allowed; }

:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--zinkly-cyan, #22d3ee);
    outline-offset: 2px;
}

:where(button, a, [role="button"]) { -webkit-tap-highlight-color: transparent; }

.zk-busy { position: relative; pointer-events: none; color: transparent !important; }
.zk-busy > * { visibility: hidden; }
.zk-busy::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    animation: zkSpin .7s linear infinite;
}
.zinkly-btn-secondary.zk-busy::after,
:where(button:not(.zinkly-btn-primary)).zk-busy::after { border-color: rgba(127, 127, 127, .3); border-top-color: var(--zinkly-cyan, #22d3ee); }
@keyframes zkSpin { to { transform: rotate(360deg); } }

@media (max-width: 1023px) {
    .zk-drawer { width: min(86vw, 340px); box-shadow: 24px 0 60px -24px rgba(0, 0, 0, .7); }
    .zk-drawer nav .zinkly-sidebar-item { padding-top: .7rem; padding-bottom: .7rem; }
    .zk-drawer nav > a, .zk-drawer .zk-more-tile { animation: zkNavIn .38s var(--zk-ease) both; }
    .zk-drawer nav > a:nth-child(2) { animation-delay: .03s; }
    .zk-drawer nav > a:nth-child(3) { animation-delay: .06s; }
    .zk-drawer nav > a:nth-child(4) { animation-delay: .09s; }
    .zk-drawer nav > a:nth-child(5) { animation-delay: .12s; }
    .zk-drawer nav > a:nth-child(6) { animation-delay: .15s; }
    .zk-drawer nav > a:nth-child(7) { animation-delay: .18s; }
    .zk-drawer .zk-more-tile { animation-delay: .2s; }
}
.zk-more-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.zk-more-tile { grid-column: span 2 / span 2; }
.zk-more-tile.is-half { grid-column: span 3 / span 3; }
.zk-more-tile.is-wide { grid-column: span 6 / span 6; flex-direction: row !important; gap: .6rem !important; padding: .8rem 1rem !important; }
.zk-more-tile.is-wide > span { width: auto !important; text-align: left; font-size: 12px; }

.zk-acct-backdrop { position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .55); }
.zk-sheet-handle { position: sticky; top: 0; z-index: 5; display: flex; justify-content: center; padding: 9px 0 7px; margin-bottom: -21px; touch-action: none; cursor: grab; }
.zk-sheet-handle span { width: 42px; height: 5px; border-radius: 9999px; background: rgba(255, 255, 255, .6); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
@media (max-width: 1023px) {
    .zk-acct-sheet {
        left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important;
        max-height: 88vh !important; z-index: 60 !important;
        border-radius: 24px 24px 0 0 !important; border-bottom-width: 0 !important;
        padding-bottom: env(safe-area-inset-bottom);
        overscroll-behavior: contain;
        box-shadow: 0 -20px 60px -10px rgba(0, 0, 0, .6) !important;
        animation: zkSheetUp .34s var(--zk-ease) both;
    }
}
@media (min-width: 1024px) { .zk-acct-backdrop, .zk-sheet-handle { display: none !important; } }
@keyframes zkNavIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes zkSheetUp { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .zk-drawer nav > a, .zk-drawer .zk-more-tile, .zk-acct-sheet { animation: none !important; }
    .zinkly-btn-primary, .zinkly-btn-secondary { transition: none; }
    .zinkly-btn-primary:hover, .zinkly-btn-secondary:hover,
    .zinkly-btn-primary:active, .zinkly-btn-secondary:active { transform: none; }
    .zk-busy::after { animation-duration: 1.6s; }
}