/* --- GLOBAL STYLES --- */
        body { background-color: #111; color: #f4f4f4; font-family: 'Helvetica Neue', sans-serif; margin: 0; }
        a { text-decoration: none; color: inherit; }

        /* --- HEADER --- */
        header {
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .logo { font-weight: 800; font-style: italic; font-size: 24px; }
        
        /* The Page Title (changes based on link clicked) */
        #collection-title {
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #888;
        }

        .back-link { font-size: 12px; color: #666; text-transform: uppercase; }
        .back-link:hover { color: white; }

        /* --- GRID LAYOUT --- */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 40px;
            padding: 40px;
        }

        /* --- PRODUCT CARD --- */
        .product-card {
            display: block;
            transition: opacity 0.3s ease;
            /*pointer-events: none; */ /* Disables clicking */
        }
        /*.product-card:hover { opacity: 0.7; }  */
        
        .product-card img {
            width: 100%;
            height: auto;
            border-radius: 2px;
        }
        
        .info {
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }
        .price { color: #888; }

        /* --- HIDING CLASS --- */
        /* This handles the filtering magic */
        .hidden {
            display: none !important;
        }

/* --- STATUS BADGES --- */
.status-badge {
    display: inline-block;
    padding: 6px 8px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid;
}

.status-processing {
    color: #ffcc00;
    border-color: #ffcc00;
    background: rgba(255, 204, 0, 0.1);
    box-shadow: 0 0 5px rgba(255, 204, 0, 0.4);
    animation: blink-status 2s infinite;
}

.status-live {
    color: #00ff00;
    border-color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
}

.status-retired {
    color: #ff3333;
    border-color: #ff3333;
    background: rgba(255, 51, 51, 0.1);
    text-decoration: line-through;
    opacity: 0.8;
}

@keyframes blink-status {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* --- SIGNAL BUTTON SYSTEM --- */
.signal-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    /* Safety Fixes for Layout */
    position: relative;
    z-index: 100; 
}

.signal-count {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #fff;
    opacity: 0.8;
    min-width: 20px;
}

.signal-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1px solid #00ff00;
    color: #00ff00;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 4px 8px;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    
    /* THE NUCLEAR FIX: Forces the button to be clickable */
    position: relative !important;
    z-index: 9999 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.signal-icon {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none; /* Ensures icon doesn't block the click */
}

/* Hover State */
.signal-btn:hover {
    background: rgba(0, 255, 0, 0.1);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.6);
}

/* Locked/Signaled State */
.signal-btn.signaled {
    background: #00ff00;
    color: #000000;
    border-color: #00ff00;
    cursor: default !important;
    box-shadow: 0 0 15px #00ff00;
}

.signal-btn.signaled .center-dot {
    opacity: 1 !important;
}

/* LINK WRAPPER */
.status-link {
    text-decoration: none; /* Removes the standard underline */
    display: inline-block; /* Keeps it tight to the badge */
}

/* HOVER EFFECTS FOR LINKS */
.status-link:hover .status-badge {
    cursor: pointer;
  /*  transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 12px rgba(0, 255, 0, 0.4); /* Glow gets stronger */
}

/* Specific Hover Colors */
.status-link:hover .status-live {
    background: rgba(0, 255, 0, 0.2);
}

.status-link:hover .status-processing {
    background: rgba(255, 204, 0, 0.2);
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.4);
}
/* 1. LEFT: THE ID */
.file-id {
    font-size: 11px;
    color: #888;          /* Dimmed text so it's not distracting */
    letter-spacing: 1px;
    text-transform: uppercase;
}