/* =============================================================================
   9UY PASSWORD — app.css
   Leverages shared styles from 9uy.com/assets/css/styles.css
   ============================================================================= */

.block-cursor {
    display: inline-block;
    width: 0.6ch;
    height: 0.9em;
    background: #ffffff;
    vertical-align: middle;
    margin-left: 4px;
    animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.scanline {
    width: 100%;
    height: 100px;
    z-index: 1000;
    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;
    position: fixed;
    bottom: 100%;
    left: 0;
    pointer-events: none;
    animation: scanline 10s linear infinite;
}

@keyframes scanline {
    0% { transform: translateY(0); }
    100% { transform: translateY(200vh); }
}

@keyframes flicker {
    0% { opacity: 0.98; }
    5% { opacity: 0.95; }
    10% { opacity: 0.99; }
    15% { opacity: 0.93; }
    20% { opacity: 0.98; }
    100% { opacity: 1.0; }
}

body {
    animation: flicker 4s linear infinite;
}

::selection {
    background-color: #ffffff;
    color: #000000;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #1f2937;
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* Range Input Styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: #1f2937;
    height: 4px;
    border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -6px; /* center thumb on track */
    background-color: #ffffff;
    height: 16px;
    width: 16px;
    border-radius: 50%;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
    background: #374151;
}

input[type="range"]::-moz-range-track {
    background: #1f2937;
    height: 4px;
    border-radius: 2px;
}

input[type="range"]::-moz-range-thumb {
    background-color: #ffffff;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
}

/* Mode Buttons */
.mode-btn.active {
    background: #ffffff;
    color: #000000;
}

/* Settings Groups visibility */
.settings-group {
    display: none;
}
.settings-group.active {
    display: block;
}