:root {
--ci-primary: #8B5CF6; 
--ci-primary-light: #A78BFA;
--ci-primary-dark: #7C3AED;
--ci-secondary: #EC4899;
--ci-accent: #6366F1; 

--bg-color: #F8FAFC; /* Crisp, cool off-white */
--card-bg: rgba(255, 255, 255, 0.95);

--text-main: #1E293B;
--text-muted: #64748B;

--border-color: rgba(139, 92, 246, 0.15);


}

body {
background-color: var(--bg-color);
/* Clean, modern dotted pattern instead of the older SVG */
background-image: radial-gradient(var(--border-color) 1.5px, transparent 1.5px);
background-size: 24px 24px;
-webkit-tap-highlight-color: transparent;
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
color: var(--text-main);
}

::-webkit-scrollbar {
width: 0px;
background: transparent;
}


.glass-card {
background: var(--card-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.05),
0 10px 15px -3px rgba(0, 0, 0, 0.05),
0 0 0 1px rgba(139, 92, 246, 0.05); 
}

/* Animations */
.item-enter {
animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.item-leave {
animation: slideOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideIn {
from { opacity: 0; transform: translateY(20px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideOut {
from { opacity: 1; transform: translateX(-20px); }
to { opacity: 0; transform: translateX(100%); }
}

/* STREAMING_CHUNK: Auth Specific Styles */
.auth-gradient-text {
background: linear-gradient(135deg, var(--ci-primary), var(--ci-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.auth-btn {
background: linear-gradient(135deg, var(--ci-primary), var(--ci-accent));
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
transition: all 0.3s ease;
}

.auth-btn:hover {
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
transform: translateY(-1px);
}

.auth-input {
transition: all 0.3s ease;
border: 1px solid #E2E8F0;
}

.auth-input:focus {
border-color: var(--ci-primary-light);
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
background-color: white;
}

.logo-container {
background: linear-gradient(135deg, var(--ci-primary), var(--ci-secondary));
padding: 2px; /* Border thickness */
border-radius: 50%;
}

.logo-inner {
background: white;
border-radius: 50%;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

/* STREAMING_CHUNK: Helpers */
.purchased-text {
text-decoration: line-through;
color: var(--text-muted);
}

.fab-button {
background: linear-gradient(135deg, var(--ci-primary), var(--ci-accent));
box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
}

.public-view-mode .owner-only {
display: none !important;
}

#version-card{
    transition: all .35s ease;
    cursor: default;
}

#version-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

@keyframes versionUpdate{
    0%{
        transform: scale(1);
        box-shadow:0 0 0 rgba(34,197,94,0);
    }

    50%{
        transform:scale(1.04);
        box-shadow:0 0 35px rgba(34,197,94,.55);
    }

    100%{
        transform:scale(1);
        box-shadow:0 0 0 rgba(34,197,94,0);
    }
}

#version-card.version-updated{
    animation:versionUpdate 1s ease;
}