body {-webkit-tap-highlight-color: transparent;}

.nexus-readonly [data-requires-edit] {display: none !important;}

[data-nexus-signed-out] .nexus-readonly .action-menu-dropdown [data-requires-edit] {display: flex !important;}
.nexus-readonly [data-readonly-disable] {
    pointer-events: none;
    opacity: 0.45;
    cursor: not-allowed;
}
.nexus-readonly #studio-deck-name {cursor: default;}

:where(a[href], button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgb(var(--nx-accent));
    outline-offset: 2px;
    border-radius: 2px;
}
.header-surface {
    background: rgb(var(--nx-card));
    border: 1px solid rgb(var(--nx-hair)/0.08);
}

.card-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234c1d95' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.fade-transition {
    transition: opacity 0.8s ease-in-out;
}

.modal-backdrop {
    background: rgb(var(--nx-base)/0.92);
}

.custom-scrollbar::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgb(var(--nx-surface-hover));
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--nx-violet));
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

@keyframes pulseLatestAdd {

    0%,
    100% {
        box-shadow: inset 0 0 0 2px #10B981;
        background-color: rgba(2, 44, 34, 0.4);
    }

    50% {
        box-shadow: inset 0 0 0 3px #10B981;
        background-color: rgba(2, 44, 34, 0.6);
    }
}

@keyframes pulseLatestCut {

    0%,
    100% {
        box-shadow: inset 0 0 0 2px rgb(var(--nx-error));
        background-color: rgba(76, 5, 25, 0.4);
    }

    50% {
        box-shadow: inset 0 0 0 3px rgb(var(--nx-error));
        background-color: rgba(76, 5, 25, 0.6);
    }
}

@keyframes pulseSlate {

    0%,
    100% {
        box-shadow: inset 0 0 0 2px rgb(var(--nx-muted));
        background-color: rgb(var(--nx-muted)/0.2);
    }

    50% {
        box-shadow: inset 0 0 0 3px rgb(var(--nx-muted));
        background-color: rgb(var(--nx-muted)/0.4);
    }
}

@keyframes nexusFoilSweep {
    0% { transform: translate3d(-140%, -140%, 0) rotate(18deg); }
    100% { transform: translate3d(140%, 140%, 0) rotate(18deg); }
}

.nexus-foil-fx {
    position: relative;
    isolation: isolate;
}

.nexus-foil-fx::before {
    content: '';
    position: absolute;
    inset: -45%;
    pointer-events: none;
    z-index: 12;
    opacity: 0.42;
    mix-blend-mode: screen;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.18) 34%, rgb(var(--nx-accent)/0.38) 43%, rgb(var(--nx-rare)/0.32) 52%, rgb(var(--nx-violet)/0.36) 61%, rgba(255, 255, 255, 0.16) 70%, transparent 82%);
    transform: translate3d(-140%, -140%, 0) rotate(18deg);
    animation: nexusFoilSweep 3.8s linear infinite;
    will-change: transform;
}


@media (prefers-reduced-motion: reduce) {
    .nexus-foil-fx::before {
        animation: none;
        transform: translate3d(0, 0, 0) rotate(18deg);
        opacity: 0.3;
    }
}

.latest-highlight-add::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 20;
    animation: pulseLatestAdd 1.5s ease-in-out infinite;
}

.latest-highlight-cut::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 20;
    animation: pulseLatestCut 1.5s ease-in-out infinite;
}

.persist-highlight-add::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 20;
    box-shadow: inset 0 0 0 2px #10B981;
}

.persist-highlight-cut::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 20;
    box-shadow: inset 0 0 0 2px rgb(var(--nx-error));
}


.tag-change-latest::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 20;
    border: 2px dashed #F59E0B;
    animation: pulseTagChange 1.5s ease-in-out infinite;
}

.tag-change-persist::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 20;
    border: 2px dashed #F59E0B;
    opacity: 0.7;
}


#manifest-view {
    overflow-y: visible;
}


#nexus-readonly-banner {
    position: sticky;
    top: 5.5rem;
    z-index: 45;
    
    background-color: rgb(var(--nx-base) / 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


#manifest-view .sticky.top-\[68px\] {
    top: calc(5.5rem + var(--nexus-banner-h, 0px));
}


#manifest-view .sticky.top-\[260px\] {
    top: calc(5.5rem + var(--deck-stack-h, 4rem) + 1.25rem + var(--nexus-banner-h, 0px));
}

@keyframes pulseTagChange {
    0%, 100% {
        opacity: 0.45;
    }
    50% {
        opacity: 1;
    }
}

.undo-predictive-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 20;
    animation: pulseSlate 1.5s ease-in-out infinite;
}
