/* epicEFI Flasher - ABSOLUTELY UNHINGED CYBERPUNK UI */

/* === INSANE ANIMATED BACKGROUND === */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600;700&display=swap');

/* Cyberpunk Grid Background */
body {
    background-color: #0a0a0f;
    background-image:
        linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(255, 0, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 255, 0.02) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 0%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 50%, rgba(0, 255, 200, 0.2) 0%, transparent 40%),
        radial-gradient(ellipse at 0% 50%, rgba(255, 0, 150, 0.2) 0%, transparent 40%);
    background-size:
        100px 100px,
        100px 100px,
        20px 20px,
        20px 20px,
        100% 100%,
        100% 100%,
        100% 100%;
    color: #e4e4e7;
    min-height: 100vh;
    animation: bgPulse 10s ease-in-out infinite alternate;
    overflow-x: hidden;
}

@keyframes bgPulse {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    100% { background-position: 100px 100px, 100px 100px, 20px 20px, 20px 20px, 0 0, 0 0, 0 0; }
}

/* Scanline Overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 9999;
    animation: scanlines 0.1s linear infinite;
}

@keyframes scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(2px); }
}

/* Vignette Effect */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
    z-index: 9998;
}

/* === MAIN CONTAINER === */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    position: relative;
    z-index: 1;
}

/* === HEADER - ABSOLUTE CHAOS === */
header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

header h1 {
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    margin: 0;
    font-size: 3em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 8px;
    position: relative;
    animation: titleGlow 2s ease-in-out infinite alternate, glitchText 5s infinite;
    text-shadow:
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 40px #00ffff,
        0 0 80px #ff00ff;
    background: linear-gradient(90deg, #00ffff, #ff00ff, #ffff00, #00ffff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleGlow 2s ease-in-out infinite alternate, rainbowShift 3s linear infinite;
}

@keyframes rainbowShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes titleGlow {
    0% {
        filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.8));
        transform: scale(1);
    }
    100% {
        filter: drop-shadow(0 0 40px rgba(255, 0, 255, 0.8));
        transform: scale(1.02);
    }
}

@keyframes glitchText {
    0%, 90%, 100% { transform: translate(0); }
    92% { transform: translate(-3px, 2px); }
    94% { transform: translate(3px, -2px); }
    96% { transform: translate(-2px, -1px); }
    98% { transform: translate(2px, 1px); }
}

/* Subtitle decoration */
header::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 20px;
    background: linear-gradient(90deg, transparent, #00ffff, #ff00ff, #00ffff, transparent);
    animation: lineGlow 2s ease-in-out infinite;
}

@keyframes lineGlow {
    0%, 100% { opacity: 0.5; transform: scaleX(0.8); }
    50% { opacity: 1; transform: scaleX(1); }
}

/* === STATUS INDICATOR - HOLOGRAPHIC === */
#status {
    padding: 25px 30px;
    border-radius: 0;
    text-align: center;
    font-weight: 700;
    font-size: 1.3em;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 30px;
    position: relative;
    font-family: 'Orbitron', sans-serif;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#status::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(20px);
    opacity: 0.5;
    z-index: -1;
}

#status::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.status-disconnected {
    background: linear-gradient(135deg, #ff0055 0%, #ff0088 50%, #ff0055 100%);
    color: white;
    box-shadow:
        0 0 30px rgba(255, 0, 85, 0.5),
        inset 0 0 30px rgba(255, 255, 255, 0.1);
    animation: statusPulse 1.5s ease-in-out infinite, disconnectedGlitch 0.3s infinite;
}

@keyframes disconnectedGlitch {
    0%, 100% { clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
    50% { clip-path: polygon(5px 0, calc(100% - 15px) 5px, 100% 25px, calc(100% - 5px) 100%, 25px calc(100% - 5px), 0 calc(100% - 25px)); }
}

.status-connecting {
    background: linear-gradient(135deg, #ffaa00 0%, #ff6600 50%, #ffaa00 100%);
    color: #000;
    box-shadow: 0 0 40px rgba(255, 170, 0, 0.6);
    animation: statusPulse 0.5s ease-in-out infinite;
}

.status-ready {
    background: linear-gradient(135deg, #00ff88 0%, #00ffcc 50%, #00ff88 100%);
    color: #000;
    box-shadow:
        0 0 50px rgba(0, 255, 136, 0.6),
        0 0 100px rgba(0, 255, 136, 0.3);
    animation: statusPulse 2s ease-in-out infinite;
}

.status-working {
    background: linear-gradient(135deg, #00aaff 0%, #0088ff 50%, #00aaff 100%);
    color: white;
    box-shadow: 0 0 50px rgba(0, 170, 255, 0.6);
    animation: workingPulse 0.3s ease-in-out infinite;
}

@keyframes workingPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.01); filter: brightness(1.2); }
}

.status-error {
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    color: white;
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.8);
    animation: errorShake 0.5s ease-in-out;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* === PROGRESS SECTION - MATRIX STYLE === */
.progress-section {
    margin: 30px 0;
    text-align: center;
    position: relative;
}

progress {
    width: 100%;
    height: 40px;
    border-radius: 0;
    overflow: hidden;
    appearance: none;
    background: transparent;
    border: 2px solid #00ffff;
    box-shadow:
        0 0 20px rgba(0, 255, 255, 0.3),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
}

progress::-webkit-progress-bar {
    background: linear-gradient(90deg, rgba(0,255,255,0.1), rgba(255,0,255,0.1));
}

progress::-webkit-progress-value {
    background: linear-gradient(90deg,
        #00ffff 0%,
        #00ff88 25%,
        #ffff00 50%,
        #ff00ff 75%,
        #00ffff 100%);
    background-size: 200% 100%;
    animation: progressGradient 1s linear infinite;
    box-shadow:
        0 0 30px rgba(0, 255, 255, 0.8),
        0 0 60px rgba(0, 255, 255, 0.4);
    position: relative;
}

progress::-webkit-progress-value::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8));
    animation: progressShine 0.5s linear infinite;
}

@keyframes progressGradient {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

#progressText {
    margin-top: 15px;
    color: #00ffff;
    font-size: 1.1em;
    font-family: 'Orbitron', monospace;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    animation: textFlicker 0.1s infinite;
}

@keyframes textFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.95; }
}

/* === BUTTONS - CYBER DECK STYLE === */
.button-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 35px 0;
    perspective: 1000px;
}

button {
    padding: 22px 30px;
    border: none;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    position: relative;
    overflow: hidden;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    background-size: 200% 200%;
}

button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.3), transparent 30%);
    animation: rotate 4s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

button:hover::before {
    opacity: 1;
}

@keyframes rotate {
    100% { transform: rotate(360deg); }
}

button::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: inherit;
    clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
    z-index: -1;
}

button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(0.8);
}

button:not(:disabled):hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 60px var(--glow-color, rgba(0, 255, 255, 0.5));
}

button:not(:disabled):active {
    transform: translateY(-2px) scale(0.98);
}

#connectBtn {
    --glow-color: rgba(0, 255, 255, 0.6);
    background: linear-gradient(135deg, #001a1a 0%, #003333 50%, #001a1a 100%);
    color: #00ffff;
    border: 2px solid #00ffff;
    box-shadow:
        0 0 30px rgba(0, 255, 255, 0.3),
        inset 0 0 30px rgba(0, 255, 255, 0.1);
    animation: borderPulse 2s ease-in-out infinite;
}

@keyframes borderPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(0, 255, 255, 0.3), inset 0 0 30px rgba(0, 255, 255, 0.1); }
    50% { box-shadow: 0 0 50px rgba(0, 255, 255, 0.5), inset 0 0 50px rgba(0, 255, 255, 0.2); }
}

#connectBtn:hover:not(:disabled) {
    background: linear-gradient(135deg, #002222 0%, #004444 50%, #002222 100%);
    box-shadow:
        0 0 60px rgba(0, 255, 255, 0.6),
        inset 0 0 40px rgba(0, 255, 255, 0.2);
}

#connectBtn.connected {
    --glow-color: rgba(255, 0, 85, 0.6);
    background: linear-gradient(135deg, #1a0008 0%, #330010 50%, #1a0008 100%);
    color: #ff0055;
    border-color: #ff0055;
    box-shadow:
        0 0 30px rgba(255, 0, 85, 0.3),
        inset 0 0 30px rgba(255, 0, 85, 0.1);
    animation: connectedPulse 1s ease-in-out infinite;
}

@keyframes connectedPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 0, 85, 0.3), inset 0 0 30px rgba(255, 0, 85, 0.1); }
    50% { box-shadow: 0 0 60px rgba(255, 0, 85, 0.6), inset 0 0 50px rgba(255, 0, 85, 0.2); }
}

#backupBtn, #flashBtn {
    --glow-color: rgba(255, 0, 255, 0.6);
    background: linear-gradient(135deg, #1a001a 0%, #330033 50%, #1a001a 100%);
    color: #ff00ff;
    border: 2px solid #ff00ff;
    box-shadow:
        0 0 30px rgba(255, 0, 255, 0.3),
        inset 0 0 30px rgba(255, 0, 255, 0.1);
}

#backupBtn:hover:not(:disabled), #flashBtn:hover:not(:disabled) {
    background: linear-gradient(135deg, #220022 0%, #440044 50%, #220022 100%);
    box-shadow:
        0 0 60px rgba(255, 0, 255, 0.6),
        inset 0 0 40px rgba(255, 0, 255, 0.2);
}

#flashBtn.active {
    --glow-color: rgba(0, 255, 136, 0.6);
    background: linear-gradient(135deg, #001a0d 0%, #00331a 50%, #001a0d 100%);
    color: #00ff88;
    border-color: #00ff88;
    box-shadow:
        0 0 50px rgba(0, 255, 136, 0.5),
        inset 0 0 30px rgba(0, 255, 136, 0.2);
    animation: flashReady 0.5s ease-in-out infinite;
}

#exitDfuBtn {
    --glow-color: rgba(0, 255, 200, 0.6);
    background: linear-gradient(135deg, #001a14 0%, #003328 50%, #001a14 100%);
    color: #00ffc8;
    border: 2px solid #00ffc8;
    box-shadow:
        0 0 30px rgba(0, 255, 200, 0.3),
        inset 0 0 30px rgba(0, 255, 200, 0.1);
}

#exitDfuBtn:hover:not(:disabled) {
    background: linear-gradient(135deg, #00221a 0%, #004433 50%, #00221a 100%);
    box-shadow:
        0 0 60px rgba(0, 255, 200, 0.6),
        inset 0 0 40px rgba(0, 255, 200, 0.2);
}

@keyframes flashReady {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* === FILE INPUT - NEON DRAG ZONE === */
.file-input-section {
    margin: 35px 0;
    padding: 30px;
    background: linear-gradient(135deg, rgba(20, 20, 30, 0.9), rgba(10, 10, 20, 0.9));
    border: 2px solid transparent;
    border-image: linear-gradient(135deg, #00ffff, #ff00ff, #00ffff) 1;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
    backdrop-filter: blur(10px);
}

.file-input-section::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #00ffff, #ff00ff, #ffff00, #00ffff);
    background-size: 300% 300%;
    animation: borderRainbow 4s linear infinite;
    z-index: -1;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

@keyframes borderRainbow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

.file-input-section label {
    display: block;
    font-weight: 700;
    margin-bottom: 15px;
    color: #00ffff;
    font-size: 1.1em;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

input[type="file"] {
    width: 100%;
    padding: 15px;
    border: 2px solid #ff00ff;
    background: rgba(0, 0, 0, 0.5);
    color: #ff00ff;
    font-size: 1em;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 1px;
    box-shadow:
        0 0 20px rgba(255, 0, 255, 0.2),
        inset 0 0 20px rgba(255, 0, 255, 0.1);
    transition: all 0.3s ease;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

input[type="file"]:hover:not(:disabled) {
    background: rgba(255, 0, 255, 0.1);
    box-shadow:
        0 0 40px rgba(255, 0, 255, 0.4),
        inset 0 0 30px rgba(255, 0, 255, 0.2);
}

input[type="file"]:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(0.8);
}

#fileInfo {
    margin-top: 15px;
    padding: 15px;
    font-size: 0.95em;
    display: none;
    font-family: 'Orbitron', monospace;
    letter-spacing: 1px;
}

#fileInfo.has-file {
    display: block;
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 200, 0.1));
    color: #00ff88;
    border: 2px solid #00ff88;
    box-shadow:
        0 0 30px rgba(0, 255, 136, 0.3),
        inset 0 0 20px rgba(0, 255, 136, 0.1);
    animation: fileInfoGlow 1s ease-in-out infinite;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

@keyframes fileInfoGlow {
    0%, 100% { box-shadow: 0 0 30px rgba(0, 255, 136, 0.3), inset 0 0 20px rgba(0, 255, 136, 0.1); }
    50% { box-shadow: 0 0 50px rgba(0, 255, 136, 0.5), inset 0 0 30px rgba(0, 255, 136, 0.2); }
}

/* === ACTIVITY LOG - TERMINAL HACKER STYLE === */
.log-section {
    margin: 35px 0;
    position: relative;
}

.log-section h3 {
    margin: 0 0 20px 0;
    font-size: 1.3em;
    color: #00ff88;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
    display: flex;
    align-items: center;
    gap: 10px;
}

.log-section h3::before {
    content: '[>]';
    color: #00ffff;
    animation: cursorBlink 1s infinite;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

#activityLog {
    background:
        linear-gradient(180deg, rgba(0, 20, 0, 0.95), rgba(0, 10, 5, 0.95)),
        repeating-linear-gradient(0deg, rgba(0, 255, 0, 0.03) 0px, rgba(0, 255, 0, 0.03) 1px, transparent 1px, transparent 2px);
    border: 2px solid #00ff88;
    padding: 20px;
    max-height: 300px;
    overflow-y: auto;
    font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: 0.9em;
    box-shadow:
        0 0 30px rgba(0, 255, 136, 0.2),
        inset 0 0 50px rgba(0, 255, 136, 0.05);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
    position: relative;
}

#activityLog::before {
    content: 'TERMINAL v2.0';
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 0.7em;
    color: rgba(0, 255, 136, 0.3);
    letter-spacing: 2px;
}

.log-entry {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 255, 136, 0.2);
    display: flex;
    align-items: flex-start;
    animation: logFadeIn 0.3s ease-out;
}

@keyframes logFadeIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
        text-shadow: 0 0 20px currentColor;
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.log-entry:last-child {
    border-bottom: none;
}

.log-entry .timestamp {
    color: #00ff88;
    margin-right: 15px;
    flex-shrink: 0;
    opacity: 0.7;
}

.log-entry .timestamp::before {
    content: '[';
    color: rgba(0, 255, 136, 0.5);
}

.log-entry .timestamp::after {
    content: ']';
    color: rgba(0, 255, 136, 0.5);
}

.log-entry .message {
    flex: 1;
}

.log-entry.success .message {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.log-entry.success .message::before {
    content: '✔ ';
}

.log-entry.error .message {
    color: #ff4444;
    text-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
    animation: errorPulse 0.5s ease-out;
}

@keyframes errorPulse {
    0% { background: rgba(255, 0, 0, 0.3); }
    100% { background: transparent; }
}

.log-entry.error .message::before {
    content: '✖ ';
}

.log-entry.warning .message {
    color: #ffaa00;
    text-shadow: 0 0 10px rgba(255, 170, 0, 0.5);
}

.log-entry.warning .message::before {
    content: '⚠ ';
}

.log-entry.info .message {
    color: #00ccff;
    text-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
}

.log-entry.info .message::before {
    content: 'ℹ ';
}

/* === RECOVERY INSTRUCTIONS - DANGER ZONE === */
#recoveryInstructions {
    display: none;
    margin: 30px 0;
    padding: 25px;
    background:
        linear-gradient(135deg, rgba(255, 100, 0, 0.2), rgba(255, 50, 0, 0.1)),
        repeating-linear-gradient(45deg, rgba(255, 100, 0, 0.05), rgba(255, 100, 0, 0.05) 10px, transparent 10px, transparent 20px);
    border: 3px solid #ff6600;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
    animation: dangerPulse 1s ease-in-out infinite;
}

@keyframes dangerPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(255, 100, 0, 0.3); }
    50% { box-shadow: 0 0 60px rgba(255, 100, 0, 0.6); }
}

#recoveryInstructions::before {
    content: '⚠ DANGER ZONE ⚠';
    position: absolute;
    top: -15px;
    left: 20px;
    background: #ff6600;
    color: #000;
    padding: 5px 20px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    animation: dangerText 0.5s ease-in-out infinite alternate;
}

@keyframes dangerText {
    0% { color: #000; }
    100% { color: #fff; }
}

#recoveryInstructions.show {
    display: block;
    animation: recoverySlideIn 0.5s ease-out;
}

@keyframes recoverySlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#recoveryInstructions h4 {
    margin: 15px 0;
    color: #ffaa00;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 170, 0, 0.5);
}

#recoveryInstructions ol {
    margin: 0;
    padding-left: 25px;
}

#recoveryInstructions li {
    margin: 10px 0;
    color: #ffcc88;
    line-height: 1.6;
}

#recoveryInstructions p {
    color: #ffcc88;
}

#recoveryInstructions strong {
    color: #ffff00;
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
}

/* === HELP SECTION - HOLOGRAPHIC DECK === */
.help-section {
    margin: 40px 0;
    padding: 25px;
    background: linear-gradient(135deg, rgba(20, 10, 40, 0.9), rgba(10, 5, 30, 0.9));
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, #8800ff, #ff00ff, #00ffff, #ff00ff, #8800ff) 1;
    position: relative;
    backdrop-filter: blur(10px);
}

.help-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #00ffff, #ff00ff, #00ffff, transparent);
    animation: scanLine 2s linear infinite;
}

@keyframes scanLine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.help-section details {
    cursor: pointer;
}

.help-section summary {
    font-weight: 700;
    color: #ff00ff;
    font-size: 1.2em;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    list-style: none;
    display: flex;
    align-items: center;
    text-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
    transition: all 0.3s ease;
}

.help-section summary:hover {
    color: #00ffff;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
}

.help-section summary::-webkit-details-marker {
    display: none;
}

.help-section summary::before {
    content: '[EXPAND]';
    margin-right: 15px;
    font-size: 0.6em;
    padding: 5px 10px;
    background: rgba(255, 0, 255, 0.2);
    border: 1px solid #ff00ff;
    color: #ff00ff;
    transition: all 0.3s ease;
}

.help-section details[open] summary::before {
    content: '[CLOSE]';
    background: rgba(0, 255, 255, 0.2);
    border-color: #00ffff;
    color: #00ffff;
}

.help-content {
    margin-top: 25px;
    padding: 25px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 0, 255, 0.3);
    animation: contentFadeIn 0.3s ease-out;
}

@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.help-content h4 {
    margin: 0 0 15px 0;
    color: #00ffff;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.3);
}

.help-content ol {
    margin: 0;
    padding-left: 25px;
}

.help-content li {
    margin: 12px 0;
    line-height: 1.7;
    color: #cccccc;
    transition: all 0.3s ease;
}

.help-content li:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.help-content p {
    color: #aaaaaa;
    line-height: 1.7;
}

.help-content strong {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.help-content a {
    color: #ff00ff;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.help-content a:hover {
    color: #00ffff;
    border-bottom-color: #00ffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* === CUSTOM SCROLLBAR - NEON STYLE === */
#activityLog::-webkit-scrollbar {
    width: 12px;
}

#activityLog::-webkit-scrollbar-track {
    background: rgba(0, 20, 0, 0.5);
    border-left: 1px solid rgba(0, 255, 136, 0.3);
}

#activityLog::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00ff88, #00cc66);
    border: 2px solid #002200;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

#activityLog::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00ffaa, #00ff88);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.8);
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 700px) {
    .container {
        padding: 15px;
    }

    header h1 {
        font-size: 1.8em;
        letter-spacing: 4px;
    }

    .button-group {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    button {
        padding: 18px 20px;
        font-size: 0.95em;
        letter-spacing: 2px;
    }

    #status {
        font-size: 1em;
        padding: 18px;
        letter-spacing: 1px;
    }

    .log-section h3 {
        font-size: 1.1em;
    }

    #activityLog {
        font-size: 0.8em;
    }

    .file-input-section {
        padding: 20px;
    }

    .file-input-section label {
        font-size: 1em;
    }
}

/* === EXTRA CRAZY EFFECTS === */

/* Floating particles (CSS only) */
.container::before {
    content: '◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 20px;
    color: transparent;
    text-shadow:
        50px 100px rgba(0, 255, 255, 0.3),
        150px 200px rgba(255, 0, 255, 0.3),
        250px 50px rgba(0, 255, 136, 0.3),
        350px 300px rgba(255, 255, 0, 0.3),
        450px 150px rgba(0, 255, 255, 0.3),
        550px 250px rgba(255, 0, 255, 0.3),
        650px 100px rgba(0, 255, 136, 0.3),
        750px 350px rgba(255, 255, 0, 0.3);
    animation: floatParticles 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes floatParticles {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-400px) rotate(360deg); }
}

/* Glitch overlay on hover */
button:not(:disabled):hover {
    animation: buttonGlitch 0.3s ease-in-out infinite;
}

@keyframes buttonGlitch {
    0%, 100% { transform: translateY(-5px) scale(1.02); }
    25% { transform: translateY(-5px) scale(1.02) translateX(2px); }
    75% { transform: translateY(-5px) scale(1.02) translateX(-2px); }
}

/* Neon flicker on important elements */
.status-ready, .status-error {
    animation: neonFlicker 0.15s infinite;
}

@keyframes neonFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.97; }
    75% { opacity: 0.99; }
}

/* === HEADER DECORATIONS === */
.header-decoration {
    font-family: 'Orbitron', monospace;
    font-size: 0.7em;
    color: #00ff88;
    letter-spacing: 5px;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.8);
    animation: decorationPulse 2s ease-in-out infinite;
}

@keyframes decorationPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.header-subtitle {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9em;
    color: #ff00ff;
    letter-spacing: 8px;
    margin-top: 15px;
    text-shadow: 0 0 20px rgba(255, 0, 255, 0.6);
    animation: subtitleGlow 3s ease-in-out infinite alternate;
}

@keyframes subtitleGlow {
    0% { text-shadow: 0 0 20px rgba(255, 0, 255, 0.6); }
    100% { text-shadow: 0 0 40px rgba(255, 0, 255, 0.9), 0 0 60px rgba(0, 255, 255, 0.4); }
}

/* === STATUS ICON === */
.status-icon {
    display: inline-block;
    animation: statusIconPulse 1s ease-in-out infinite;
    margin: 0 10px;
}

@keyframes statusIconPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

/* === BUTTON ENHANCEMENTS === */
.btn-icon {
    display: block;
    font-size: 1.5em;
    margin-bottom: 5px;
    animation: iconFloat 2s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.btn-text {
    display: block;
    font-size: 0.75em;
}

button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* === FILE INPUT LABEL ICON === */
.label-icon {
    color: #ff00ff;
    margin-right: 10px;
    animation: labelArrow 1s ease-in-out infinite;
}

@keyframes labelArrow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

/* === FOOTER === */
.footer {
    margin-top: 50px;
    text-align: center;
    padding: 20px;
}

.footer-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ffff, #ff00ff, #00ffff, transparent);
    margin-bottom: 20px;
    animation: footerLineGlow 2s ease-in-out infinite;
}

@keyframes footerLineGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.footer-text {
    font-family: 'Orbitron', monospace;
    font-size: 0.8em;
    color: #666;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* === DATA STREAM DECORATION === */
.log-section::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        #00ff88 20%,
        #00ff88 40%,
        transparent 50%,
        #00ff88 60%,
        #00ff88 80%,
        transparent);
    background-size: 200% 100%;
    animation: dataStream 2s linear infinite;
}

@keyframes dataStream {
    0% { background-position: 200% 0; }
    100% { background-position: 0 0; }
}

/* === HOLOGRAPHIC SHIMMER === */
@keyframes holoShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

#status {
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
}

.status-ready, .status-disconnected, .status-connecting, .status-working {
    animation-iteration-count: infinite;
}