/* App Specific Styles */

.scanline {
    width: 100%;
    height: 100px;
    z-index: 50;
    position: fixed;
    pointer-events: none;
    top: 50%;
    left: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.1;
    animation: scan 8s linear infinite;
}

@keyframes scan {
    0% { transform: translateY(-100vh); }
    100% { transform: translateY(100vh); }
}

.custom-scrollbar::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #171717; /* gray-900 */
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #262626; /* gray-800 */
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #404040; /* gray-700 */
}

/* Match Highlights */
.hash-row.match-true {
    background-color: rgba(22, 101, 52, 0.2); /* green-900 with opacity */
    border-color: #22c55e; /* green-500 */
}
.hash-row.match-true .hash-val {
    color: #4ade80; /* green-400 */
}

.hash-row.match-false {
    background-color: rgba(127, 29, 29, 0.2); /* red-900 with opacity */
    border-color: #ef4444; /* red-500 */
}
.hash-row.match-false .hash-val {
    color: #f87171; /* red-400 */
}

/* Drag State */
#input-section.drag-over {
    border-color: #22c55e;
    background-color: rgba(22, 101, 52, 0.1);
}
#input-section.drag-over #drop-indicator {
    opacity: 1;
    color: #4ade80;
}
#input-section.drag-over #drop-indicator i {
    color: #4ade80;
}