/* --- BOTÃO FAB DISCRETO --- */
#help-fab-discrete {
    position: fixed; bottom: 25px; right: 25px; width: 45px; height: 45px;
    background: white; color: #94a3b8; border-radius: 50%; border: 1px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); z-index: 9999;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.7;
}
#help-fab-discrete:hover {
    opacity: 1; transform: scale(1.1); color: #D32F2F; border-color: #D32F2F;
    box-shadow: 0 10px 20px rgba(211, 47, 47, 0.1);
}
#help-fab-discrete.active {
    background: #D32F2F; color: white; border-color: #D32F2F; transform: rotate(90deg);
}

/* --- PAINEL DE AJUDA --- */
#help-panel {
    position: fixed; top: 0; right: 0; width: 400px; height: 100%;
    background: white; z-index: 9998; box-shadow: -20px 0 60px rgba(0,0,0,0.1);
    display: flex; flex-direction: column; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 1px solid #f1f5f9;
}
.help-panel-hidden { transform: translateX(100%); }
.help-panel-visible { transform: translateX(0); }

.help-header {
    padding: 30px; background: #f8fafc; border-bottom: 1px solid #f1f5f9;
    display: flex; justify-content: space-between; align-items: center;
}
.help-header-info { display: flex; align-items: center; gap: 15px; }
#help-page-icon { font-size: 24px; }
#help-page-title { font-weight: 900; text-transform: uppercase; font-style: italic; color: #1e293b; font-size: 16px; margin: 0; }

#help-close-btn { font-size: 32px; color: #cbd5e1; cursor: pointer; background: none; border: none; }
#help-close-btn:hover { color: #D32F2F; }

.help-content { flex: 1; overflow-y: auto; padding: 30px; }

/* --- CARDS DE INSTRUÇÃO --- */
.help-card {
    background: #fff; border-radius: 20px; padding: 25px; border: 1.5px solid #f1f5f9;
    margin-bottom: 20px; transition: all 0.3s;
}
.help-card:hover { border-color: #D32F2F; box-shadow: 0 10px 25px rgba(0,0,0,0.03); }

.help-card-task {
    font-size: 10px; font-weight: 900; text-transform: uppercase; color: #D32F2F;
    letter-spacing: 1px; margin-bottom: 8px;
}
.help-card-instruction {
    font-size: 14px; color: #475569; line-height: 1.7; font-weight: 500;
}
.help-card-instruction b { color: #1e293b; font-weight: 800; }

.help-info-box {
    margin-top: 40px; padding: 20px; background: #eff6ff; border-radius: 15px;
    font-size: 12px; color: #1e40af; line-height: 1.5; border: 1px solid #dbeafe;
}

.help-footer {
    padding: 20px; text-align: center; font-size: 9px; font-weight: 800;
    text-transform: uppercase; color: #cbd5e1; letter-spacing: 2px;
}

/* --- ANIMAÇÕES --- */
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-slide-up { animation: slideUp 0.5s ease forwards; }

.custom-scroll::-webkit-scrollbar { width: 4px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #f1f5f9; border-radius: 10px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #e2e8f0; }